From 319a979596c904a3575c81ffdb0ad988eee85495 Mon Sep 17 00:00:00 2001
From: freeCodeCamp's Camper Bot <camperbot@users.noreply.github.com>
Date: Tue, 22 Oct 2024 08:50:25 +0530
Subject: [PATCH] chore(i18n,learn): processed translations (#89)

---
 .../5dc17d3bf86c76b9248c6eb4.md               |   6 +-
 .../5dc17dc8f86c76b9248c6eb5.md               |  11 +-
 .../5dc2385ff86c76b9248c6eb7.md               |   8 +-
 .../5dc23991f86c76b9248c6eb8.md               |  12 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../5dc24073f86c76b9248c6ebb.md               |   8 +-
 .../5dc24165f86c76b9248c6ebc.md               |   2 +-
 .../5dc24614f86c76b9248c6ebd.md               |   2 +-
 .../5ddbd81294d8ddc1510a8e56.md               |  12 +-
 .../5dfa2407b521be39a3de7be1.md               |  15 +-
 .../5dfa30b9eacea3f48c6300ad.md               |  10 +-
 .../5dfa3589eacea3f48c6300ae.md               |   6 +-
 .../5dfa371beacea3f48c6300af.md               |   6 +-
 .../5dfa37b9eacea3f48c6300b0.md               |   6 +-
 .../5dfb5ecbeacea3f48c6300b1.md               |   6 +-
 .../5dfb6250eacea3f48c6300b2.md               |   6 +-
 .../5dfb655eeacea3f48c6300b3.md               |  12 +-
 .../5dfb6a35eacea3f48c6300b4.md               |   6 +-
 .../5ef9b03c81a63668521804d0.md               |   6 +-
 .../5ef9b03c81a63668521804d1.md               |   6 +-
 .../5ef9b03c81a63668521804d2.md               |   6 +-
 .../5ef9b03c81a63668521804d3.md               |   6 +-
 .../5ef9b03c81a63668521804d4.md               |   6 +-
 .../5ef9b03c81a63668521804d5.md               |   6 +-
 .../5ef9b03c81a63668521804d6.md               |   6 +-
 .../5ef9b03c81a63668521804d7.md               |   6 +-
 .../5ef9b03c81a63668521804d8.md               |   6 +-
 .../5ef9b03c81a63668521804d9.md               |   6 +-
 .../5ef9b03c81a63668521804da.md               |   6 +-
 .../5ef9b03c81a63668521804db.md               |   6 +-
 .../5ef9b03c81a63668521804dc.md               |   6 +-
 .../5ef9b03c81a63668521804dd.md               |   6 +-
 .../5ef9b03c81a63668521804de.md               |   7 +-
 .../5ef9b03c81a63668521804df.md               |   6 +-
 .../5ef9b03c81a63668521804e1.md               |   6 +-
 .../5ef9b03c81a63668521804e2.md               |   6 +-
 .../5ef9b03c81a63668521804e3.md               |   6 +-
 .../5ef9b03c81a63668521804e5.md               |   6 +-
 .../5ef9b03c81a63668521804e7.md               |   6 +-
 .../5ef9b03c81a63668521804e8.md               |  10 +-
 .../5ef9b03c81a63668521804e9.md               |   8 +-
 .../5ef9b03c81a63668521804ea.md               |   6 +-
 .../5ef9b03c81a63668521804eb.md               |   6 +-
 .../5ef9b03c81a63668521804ec.md               |   6 +-
 .../5ef9b03c81a63668521804ee.md               |   6 +-
 .../5efada803cbd2bbdab94e332.md               |  13 +-
 .../5efae0543cbd2bbdab94e333.md               |   6 +-
 .../5efae16e3cbd2bbdab94e334.md               |   6 +-
 .../5efb23e70dc218d6c85f89b1.md               |   6 +-
 .../5efb2c990dc218d6c85f89b2.md               |   6 +-
 .../5efc4f528d6a74d05e68af74.md               |   6 +-
 .../5efc518e8d6a74d05e68af75.md               |   6 +-
 .../5efc54138d6a74d05e68af76.md               |   6 +-
 .../5efc575c8d6a74d05e68af77.md               |   6 +-
 .../5f05a1d8e233dff4a68508d8.md               |   6 +-
 .../5f07be6ef7412fbad0c5626b.md               |  12 +-
 .../5f07c98cdb9413cbd4b16750.md               |   6 +-
 .../5f07fb1579dc934717801375.md               |   6 +-
 .../5f0d48e7b435f13ab6550051.md               |   6 +-
 .../5f0d4ab1b435f13ab6550052.md               |   6 +-
 .../5f0d4d04b435f13ab6550053.md               |   6 +-
 .../5f1a80975fc4bcae0edb3497.md               |   7 +-
 .../5f1a89f1190aff21ae42105a.md               |   6 +-
 .../62bb4009e3458a128ff57d5d.md               |   8 +-
 .../671141d8e32fe934c26fa1be.md               |  57 ++
 .../671141f948cbab359e74cc93.md               |  48 +
 .../671141feba228a35cefba82d.md               |  57 ++
 .../671144cdcc01d73f7dd79dc9.md               |  47 +
 .../7cf9b03d81a65668421804c3.md               |   6 +-
 .../66edd630f7666cfa54b404d0.md               | 200 ++--
 .../66ed8ff4f45ce3ece4053eb4.md               | 200 ++--
 .../66f1af82732957c895f0b21a.md               | 200 ++--
 .../619665c9abd72906f3ad30f9.md               |  65 ++
 .../61967e74a8e3690ab6292daa.md               |  56 ++
 .../61968df2acd5550bf1616c34.md               |  53 ++
 .../61968e9243a4090cc805531c.md               |  51 ++
 .../61968f8877c6720d6d61aaf5.md               |  64 ++
 .../619691693bc14b0e528f5a20.md               |  66 ++
 .../6196928658b6010f28c39484.md               |  58 ++
 .../619692ff79f5770fc6d8c0b4.md               |  73 ++
 .../6196990f966e8f10a40094f6.md               |  75 ++
 .../619699c10a0f6e11591d73c4.md               |  74 ++
 .../61969aa6acef5b12200f672e.md               |  83 ++
 .../61969c487ced6f12db8fef94.md               |  89 ++
 .../61969d66cfcdba137d021558.md               |  76 ++
 .../61969e7451455614217e901b.md               |  91 ++
 .../6196adc17f77a714d51485f2.md               |  90 ++
 .../6196aead7ac7bf1584b17a7f.md               |  86 ++
 .../6196ce0415498d2463989e84.md               |  92 ++
 .../6196cee94c6da1253809dff9.md               | 100 ++
 .../6196d00a5d7292262bc02f4c.md               |  87 ++
 .../6196d0cda039d026f7f78d1e.md               | 100 ++
 .../6196d1ac33c68d27dcda5796.md               | 131 +++
 .../6196d213d99f16287bff22ae.md               | 104 +++
 .../6196d2c0f22ca0293107c048.md               | 112 +++
 .../6196d32d1340d829f0f6f57d.md               | 105 +++
 .../6196d41d40bf9b2aaea5d520.md               | 107 +++
 .../6197cff995d03905b0cca8ad.md               | 118 +++
 .../6197f40a16afea068c7e60c8.md               | 125 +++
 .../6197f667297bb30a552ce017.md               |  65 ++
 .../61993b72e874e709b8dfd666.md               | 128 +++
 .../61993cf26a8e0f0a553db223.md               | 122 +++
 .../61993dbb35adf30b10d49e38.md               | 139 +++
 .../61993e9adc9e9a0bb4d28fff.md               | 133 +++
 .../6199409834ccaf0d10736596.md               | 139 +++
 .../6199429802b7c10dc79ff871.md               | 154 ++++
 .../619943285a41720e6370d985.md               | 156 ++++
 .../619943876b706d0f35c01dbc.md               | 146 +++
 .../6199442866286d0ff421a4fc.md               | 148 +++
 .../619bcf239fc15905ecd66fce.md               | 145 +++
 .../619be73b3c806006ccc00bb0.md               | 158 ++++
 .../619be7af7b0bf60770f5d2a4.md               | 155 ++++
 .../619be80062551a080e32c821.md               | 160 ++++
 .../619be8ce4ea49008c5bfbc30.md               | 152 +++
 .../619be946958c6009844f1dee.md               | 166 ++++
 .../619c155df0063a0a3fec0e32.md               | 193 ++++
 .../619c16debd0c270b01c5ce38.md               | 165 ++++
 .../619cfdf2e63ddf05feab86ad.md               | 169 ++++
 .../619d019488f98c06acbbb71a.md               | 171 ++++
 .../619d022dc8400c0763829a17.md               | 177 ++++
 .../619d02c7bc95bf0827a5d296.md               | 181 ++++
 .../619d033915012509031f309a.md               | 184 ++++
 .../619d03dadadb6509a16f4f5f.md               | 210 +++++
 .../619d0503e03a790a4179d463.md               | 206 +++++
 .../619d05c54dabca0b10058235.md               | 197 ++++
 .../619d0882f54bf40bdc4671ed.md               | 197 ++++
 .../619d090cd8d6db0c93dc5087.md               | 222 +++++
 .../619d0b51ca42ed0d74582186.md               | 207 +++++
 .../619d0bc9cb05360e1bf549c3.md               | 200 ++++
 .../619d0c1594c38c0ebae75878.md               | 215 +++++
 .../619d0d18ca99870f884a7bff.md               | 225 +++++
 .../619d0daf214542102739b0da.md               | 227 +++++
 .../619d0e56f9ca9710fcb974e3.md               | 226 +++++
 .../619d0eec0ac40611b41e2ccc.md               | 247 +++++
 .../619d0fc9825c271253df28d4.md               | 238 +++++
 .../619d102d786c3d13124c37c6.md               | 231 +++++
 .../619d107edf7ddf13cc77106a.md               | 246 +++++
 .../619d10cc98145f14820399c5.md               | 271 ++++++
 .../619d115e2adcd71538e82ebb.md               | 256 ++++++
 .../619d11e6d5ef9515d2a16033.md               | 262 ++++++
 .../619d129a417d0716a94de913.md               | 267 ++++++
 .../619d1340361095175f4b5115.md               | 267 ++++++
 .../619d15797b580c1828b05426.md               | 263 ++++++
 .../619d15d955d9d418c4487bbc.md               | 264 ++++++
 .../619d1629a8adc61960ca8b40.md               | 278 ++++++
 .../619d1c5fc9f8941a400955da.md               | 272 ++++++
 .../619d1dab9ff3421ae1976991.md               | 273 ++++++
 .../619d1deb8b04811b8839ffe4.md               | 281 ++++++
 .../619d1e7a8e81a61c5a819dc4.md               | 272 ++++++
 .../619d1ed33c9a071cf657a0d6.md               | 306 +++++++
 .../619d1fb5d244c31db8a7fdb7.md               | 295 ++++++
 .../619d204bd73ae51e743b8e94.md               | 288 ++++++
 .../619d20b12996101f430920fb.md               | 304 ++++++
 .../619d21fe6a3f9b2016be9d9d.md               | 304 ++++++
 .../619d229b0e542520cd91c685.md               | 312 +++++++
 .../619d23089e787e216a7043d6.md               | 295 ++++++
 .../619d237a107c10221ed743fa.md               | 328 +++++++
 .../619d26b12e651022d80cd017.md               | 317 +++++++
 .../619d2712853306238f41828e.md               | 332 +++++++
 .../619d2b7a84e78b246f2d17a2.md               | 340 +++++++
 .../619d2bd9c1d43c2526e96f1f.md               | 325 +++++++
 .../619d2d4e80400325ff89664a.md               | 326 +++++++
 .../619d2ebc81ba81271460850d.md               | 326 +++++++
 .../619d2f0e9440bc27caee1cec.md               | 327 +++++++
 .../619d2fd3ff4f772882e3d998.md               | 323 +++++++
 .../619d30350883802921bfcccc.md               | 333 +++++++
 .../619d324f5915c929f36ae91d.md               | 351 +++++++
 .../619d32c7fa21f32aaa91d499.md               | 347 +++++++
 .../619d333b738e3c2b5d58b095.md               | 347 +++++++
 .../619d337765b9f02c10e93722.md               | 362 ++++++++
 .../619d33c51140292cc5a21742.md               | 357 ++++++++
 .../619d3482f505452d861d0f62.md               | 347 +++++++
 .../619d3561a951bf2e41a24f10.md               | 346 +++++++
 .../619d36103839c82efa95dd34.md               | 357 ++++++++
 .../619d3711d04d623000013e9e.md               | 670 ++++++++++++++
 .../61a8fe15a6a31306e60d1e89.md               |  55 ++
 .../5dc17d3bf86c76b9248c6eb4.md               |   6 +-
 .../5dc17dc8f86c76b9248c6eb5.md               |  11 +-
 .../5dc2385ff86c76b9248c6eb7.md               |   8 +-
 .../5dc23991f86c76b9248c6eb8.md               |  12 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../5dc24073f86c76b9248c6ebb.md               |   8 +-
 .../5dc24165f86c76b9248c6ebc.md               |   2 +-
 .../5dc24614f86c76b9248c6ebd.md               |   2 +-
 .../5ddbd81294d8ddc1510a8e56.md               |  12 +-
 .../5dfa2407b521be39a3de7be1.md               |  15 +-
 .../5dfa30b9eacea3f48c6300ad.md               |  10 +-
 .../5dfa3589eacea3f48c6300ae.md               |   6 +-
 .../5dfa371beacea3f48c6300af.md               |   6 +-
 .../5dfa37b9eacea3f48c6300b0.md               |   6 +-
 .../5dfb5ecbeacea3f48c6300b1.md               |   6 +-
 .../5dfb6250eacea3f48c6300b2.md               |   6 +-
 .../5dfb655eeacea3f48c6300b3.md               |  12 +-
 .../5dfb6a35eacea3f48c6300b4.md               |   6 +-
 .../5ef9b03c81a63668521804d0.md               |   6 +-
 .../5ef9b03c81a63668521804d1.md               |   6 +-
 .../5ef9b03c81a63668521804d2.md               |   6 +-
 .../5ef9b03c81a63668521804d3.md               |   6 +-
 .../5ef9b03c81a63668521804d4.md               |   6 +-
 .../5ef9b03c81a63668521804d5.md               |   6 +-
 .../5ef9b03c81a63668521804d6.md               |   6 +-
 .../5ef9b03c81a63668521804d7.md               |   6 +-
 .../5ef9b03c81a63668521804d8.md               |   6 +-
 .../5ef9b03c81a63668521804d9.md               |   6 +-
 .../5ef9b03c81a63668521804da.md               |   6 +-
 .../5ef9b03c81a63668521804db.md               |   6 +-
 .../5ef9b03c81a63668521804dc.md               |   6 +-
 .../5ef9b03c81a63668521804dd.md               |   6 +-
 .../5ef9b03c81a63668521804de.md               |   7 +-
 .../5ef9b03c81a63668521804df.md               |   6 +-
 .../5ef9b03c81a63668521804e1.md               |   6 +-
 .../5ef9b03c81a63668521804e2.md               |   6 +-
 .../5ef9b03c81a63668521804e3.md               |   6 +-
 .../5ef9b03c81a63668521804e5.md               |   6 +-
 .../5ef9b03c81a63668521804e7.md               |   6 +-
 .../5ef9b03c81a63668521804e8.md               |  10 +-
 .../5ef9b03c81a63668521804e9.md               |   8 +-
 .../5ef9b03c81a63668521804ea.md               |   6 +-
 .../5ef9b03c81a63668521804eb.md               |   6 +-
 .../5ef9b03c81a63668521804ec.md               |   6 +-
 .../5ef9b03c81a63668521804ee.md               |   6 +-
 .../5efada803cbd2bbdab94e332.md               |  13 +-
 .../5efae0543cbd2bbdab94e333.md               |   6 +-
 .../5efae16e3cbd2bbdab94e334.md               |   6 +-
 .../5efb23e70dc218d6c85f89b1.md               |   6 +-
 .../5efb2c990dc218d6c85f89b2.md               |   6 +-
 .../5efc4f528d6a74d05e68af74.md               |   6 +-
 .../5efc518e8d6a74d05e68af75.md               |   6 +-
 .../5efc54138d6a74d05e68af76.md               |   6 +-
 .../5efc575c8d6a74d05e68af77.md               |   6 +-
 .../5f05a1d8e233dff4a68508d8.md               |   6 +-
 .../5f07be6ef7412fbad0c5626b.md               |  12 +-
 .../5f07c98cdb9413cbd4b16750.md               |   6 +-
 .../5f07fb1579dc934717801375.md               |   6 +-
 .../5f0d48e7b435f13ab6550051.md               |   6 +-
 .../5f0d4ab1b435f13ab6550052.md               |   6 +-
 .../5f0d4d04b435f13ab6550053.md               |   6 +-
 .../5f1a80975fc4bcae0edb3497.md               |   7 +-
 .../5f1a89f1190aff21ae42105a.md               |   6 +-
 .../62bb4009e3458a128ff57d5d.md               |   8 +-
 .../671141d8e32fe934c26fa1be.md               |  57 ++
 .../671141f948cbab359e74cc93.md               |  48 +
 .../671141feba228a35cefba82d.md               |  57 ++
 .../671144cdcc01d73f7dd79dc9.md               |  47 +
 .../7cf9b03d81a65668421804c3.md               |   6 +-
 .../66edd630f7666cfa54b404d0.md               | 200 ++--
 .../66ed8ff4f45ce3ece4053eb4.md               | 200 ++--
 .../66f1af82732957c895f0b21a.md               | 200 ++--
 .../619665c9abd72906f3ad30f9.md               |  65 ++
 .../61967e74a8e3690ab6292daa.md               |  56 ++
 .../61968df2acd5550bf1616c34.md               |  53 ++
 .../61968e9243a4090cc805531c.md               |  51 ++
 .../61968f8877c6720d6d61aaf5.md               |  64 ++
 .../619691693bc14b0e528f5a20.md               |  66 ++
 .../6196928658b6010f28c39484.md               |  58 ++
 .../619692ff79f5770fc6d8c0b4.md               |  73 ++
 .../6196990f966e8f10a40094f6.md               |  75 ++
 .../619699c10a0f6e11591d73c4.md               |  74 ++
 .../61969aa6acef5b12200f672e.md               |  83 ++
 .../61969c487ced6f12db8fef94.md               |  89 ++
 .../61969d66cfcdba137d021558.md               |  76 ++
 .../61969e7451455614217e901b.md               |  91 ++
 .../6196adc17f77a714d51485f2.md               |  90 ++
 .../6196aead7ac7bf1584b17a7f.md               |  86 ++
 .../6196ce0415498d2463989e84.md               |  92 ++
 .../6196cee94c6da1253809dff9.md               | 100 ++
 .../6196d00a5d7292262bc02f4c.md               |  87 ++
 .../6196d0cda039d026f7f78d1e.md               | 100 ++
 .../6196d1ac33c68d27dcda5796.md               | 131 +++
 .../6196d213d99f16287bff22ae.md               | 104 +++
 .../6196d2c0f22ca0293107c048.md               | 112 +++
 .../6196d32d1340d829f0f6f57d.md               | 105 +++
 .../6196d41d40bf9b2aaea5d520.md               | 107 +++
 .../6197cff995d03905b0cca8ad.md               | 118 +++
 .../6197f40a16afea068c7e60c8.md               | 125 +++
 .../6197f667297bb30a552ce017.md               |  65 ++
 .../61993b72e874e709b8dfd666.md               | 128 +++
 .../61993cf26a8e0f0a553db223.md               | 122 +++
 .../61993dbb35adf30b10d49e38.md               | 139 +++
 .../61993e9adc9e9a0bb4d28fff.md               | 133 +++
 .../6199409834ccaf0d10736596.md               | 139 +++
 .../6199429802b7c10dc79ff871.md               | 154 ++++
 .../619943285a41720e6370d985.md               | 156 ++++
 .../619943876b706d0f35c01dbc.md               | 146 +++
 .../6199442866286d0ff421a4fc.md               | 148 +++
 .../619bcf239fc15905ecd66fce.md               | 145 +++
 .../619be73b3c806006ccc00bb0.md               | 158 ++++
 .../619be7af7b0bf60770f5d2a4.md               | 155 ++++
 .../619be80062551a080e32c821.md               | 160 ++++
 .../619be8ce4ea49008c5bfbc30.md               | 152 +++
 .../619be946958c6009844f1dee.md               | 166 ++++
 .../619c155df0063a0a3fec0e32.md               | 193 ++++
 .../619c16debd0c270b01c5ce38.md               | 165 ++++
 .../619cfdf2e63ddf05feab86ad.md               | 169 ++++
 .../619d019488f98c06acbbb71a.md               | 171 ++++
 .../619d022dc8400c0763829a17.md               | 177 ++++
 .../619d02c7bc95bf0827a5d296.md               | 181 ++++
 .../619d033915012509031f309a.md               | 184 ++++
 .../619d03dadadb6509a16f4f5f.md               | 210 +++++
 .../619d0503e03a790a4179d463.md               | 206 +++++
 .../619d05c54dabca0b10058235.md               | 197 ++++
 .../619d0882f54bf40bdc4671ed.md               | 197 ++++
 .../619d090cd8d6db0c93dc5087.md               | 222 +++++
 .../619d0b51ca42ed0d74582186.md               | 207 +++++
 .../619d0bc9cb05360e1bf549c3.md               | 200 ++++
 .../619d0c1594c38c0ebae75878.md               | 215 +++++
 .../619d0d18ca99870f884a7bff.md               | 225 +++++
 .../619d0daf214542102739b0da.md               | 227 +++++
 .../619d0e56f9ca9710fcb974e3.md               | 226 +++++
 .../619d0eec0ac40611b41e2ccc.md               | 247 +++++
 .../619d0fc9825c271253df28d4.md               | 238 +++++
 .../619d102d786c3d13124c37c6.md               | 231 +++++
 .../619d107edf7ddf13cc77106a.md               | 246 +++++
 .../619d10cc98145f14820399c5.md               | 271 ++++++
 .../619d115e2adcd71538e82ebb.md               | 256 ++++++
 .../619d11e6d5ef9515d2a16033.md               | 262 ++++++
 .../619d129a417d0716a94de913.md               | 267 ++++++
 .../619d1340361095175f4b5115.md               | 267 ++++++
 .../619d15797b580c1828b05426.md               | 263 ++++++
 .../619d15d955d9d418c4487bbc.md               | 264 ++++++
 .../619d1629a8adc61960ca8b40.md               | 278 ++++++
 .../619d1c5fc9f8941a400955da.md               | 272 ++++++
 .../619d1dab9ff3421ae1976991.md               | 273 ++++++
 .../619d1deb8b04811b8839ffe4.md               | 281 ++++++
 .../619d1e7a8e81a61c5a819dc4.md               | 272 ++++++
 .../619d1ed33c9a071cf657a0d6.md               | 306 +++++++
 .../619d1fb5d244c31db8a7fdb7.md               | 295 ++++++
 .../619d204bd73ae51e743b8e94.md               | 288 ++++++
 .../619d20b12996101f430920fb.md               | 304 ++++++
 .../619d21fe6a3f9b2016be9d9d.md               | 304 ++++++
 .../619d229b0e542520cd91c685.md               | 312 +++++++
 .../619d23089e787e216a7043d6.md               | 295 ++++++
 .../619d237a107c10221ed743fa.md               | 328 +++++++
 .../619d26b12e651022d80cd017.md               | 317 +++++++
 .../619d2712853306238f41828e.md               | 332 +++++++
 .../619d2b7a84e78b246f2d17a2.md               | 340 +++++++
 .../619d2bd9c1d43c2526e96f1f.md               | 325 +++++++
 .../619d2d4e80400325ff89664a.md               | 326 +++++++
 .../619d2ebc81ba81271460850d.md               | 326 +++++++
 .../619d2f0e9440bc27caee1cec.md               | 327 +++++++
 .../619d2fd3ff4f772882e3d998.md               | 323 +++++++
 .../619d30350883802921bfcccc.md               | 333 +++++++
 .../619d324f5915c929f36ae91d.md               | 351 +++++++
 .../619d32c7fa21f32aaa91d499.md               | 347 +++++++
 .../619d333b738e3c2b5d58b095.md               | 347 +++++++
 .../619d337765b9f02c10e93722.md               | 362 ++++++++
 .../619d33c51140292cc5a21742.md               | 357 ++++++++
 .../619d3482f505452d861d0f62.md               | 347 +++++++
 .../619d3561a951bf2e41a24f10.md               | 346 +++++++
 .../619d36103839c82efa95dd34.md               | 357 ++++++++
 .../619d3711d04d623000013e9e.md               | 670 ++++++++++++++
 .../61a8fe15a6a31306e60d1e89.md               |  55 ++
 .../5d822fd413a79914d39e9904.md               |  20 +-
 .../5dc17d3bf86c76b9248c6eb4.md               |   6 +-
 .../5dc17dc8f86c76b9248c6eb5.md               |  11 +-
 .../5dc2385ff86c76b9248c6eb7.md               |   8 +-
 .../5dc23991f86c76b9248c6eb8.md               |  12 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../5dc24073f86c76b9248c6ebb.md               |   8 +-
 .../5dc24165f86c76b9248c6ebc.md               |   2 +-
 .../5dc24614f86c76b9248c6ebd.md               |   2 +-
 .../5ddbd81294d8ddc1510a8e56.md               |  12 +-
 .../5dfa2407b521be39a3de7be1.md               |  15 +-
 .../5dfa30b9eacea3f48c6300ad.md               |  10 +-
 .../5dfa3589eacea3f48c6300ae.md               |   6 +-
 .../5dfa371beacea3f48c6300af.md               |   6 +-
 .../5dfa37b9eacea3f48c6300b0.md               |   6 +-
 .../5dfb5ecbeacea3f48c6300b1.md               |   6 +-
 .../5dfb6250eacea3f48c6300b2.md               |   6 +-
 .../5dfb655eeacea3f48c6300b3.md               |  12 +-
 .../5dfb6a35eacea3f48c6300b4.md               |   6 +-
 .../5ef9b03c81a63668521804d0.md               |   6 +-
 .../5ef9b03c81a63668521804d1.md               |   6 +-
 .../5ef9b03c81a63668521804d2.md               |   6 +-
 .../5ef9b03c81a63668521804d3.md               |   6 +-
 .../5ef9b03c81a63668521804d4.md               |   6 +-
 .../5ef9b03c81a63668521804d5.md               |   6 +-
 .../5ef9b03c81a63668521804d6.md               |   6 +-
 .../5ef9b03c81a63668521804d7.md               |   6 +-
 .../5ef9b03c81a63668521804d8.md               |   6 +-
 .../5ef9b03c81a63668521804d9.md               |   6 +-
 .../5ef9b03c81a63668521804da.md               |   6 +-
 .../5ef9b03c81a63668521804db.md               |   6 +-
 .../5ef9b03c81a63668521804dc.md               |   6 +-
 .../5ef9b03c81a63668521804dd.md               |   6 +-
 .../5ef9b03c81a63668521804de.md               |   7 +-
 .../5ef9b03c81a63668521804df.md               |   6 +-
 .../5ef9b03c81a63668521804e1.md               |   6 +-
 .../5ef9b03c81a63668521804e2.md               |   6 +-
 .../5ef9b03c81a63668521804e3.md               |   6 +-
 .../5ef9b03c81a63668521804e5.md               |   6 +-
 .../5ef9b03c81a63668521804e7.md               |   6 +-
 .../5ef9b03c81a63668521804e8.md               |  10 +-
 .../5ef9b03c81a63668521804e9.md               |   8 +-
 .../5ef9b03c81a63668521804ea.md               |   6 +-
 .../5ef9b03c81a63668521804eb.md               |   6 +-
 .../5ef9b03c81a63668521804ec.md               |   6 +-
 .../5ef9b03c81a63668521804ee.md               |   6 +-
 .../5efada803cbd2bbdab94e332.md               |  13 +-
 .../5efae0543cbd2bbdab94e333.md               |   6 +-
 .../5efae16e3cbd2bbdab94e334.md               |   6 +-
 .../5efb23e70dc218d6c85f89b1.md               |   6 +-
 .../5efb2c990dc218d6c85f89b2.md               |   6 +-
 .../5efc4f528d6a74d05e68af74.md               |   6 +-
 .../5efc518e8d6a74d05e68af75.md               |   6 +-
 .../5efc54138d6a74d05e68af76.md               |   6 +-
 .../5efc575c8d6a74d05e68af77.md               |   6 +-
 .../5f05a1d8e233dff4a68508d8.md               |   6 +-
 .../5f07be6ef7412fbad0c5626b.md               |  12 +-
 .../5f07c98cdb9413cbd4b16750.md               |   6 +-
 .../5f07fb1579dc934717801375.md               |   6 +-
 .../5f0d48e7b435f13ab6550051.md               |   6 +-
 .../5f0d4ab1b435f13ab6550052.md               |   6 +-
 .../5f0d4d04b435f13ab6550053.md               |   6 +-
 .../5f1a80975fc4bcae0edb3497.md               |   7 +-
 .../5f1a89f1190aff21ae42105a.md               |   6 +-
 .../62bb4009e3458a128ff57d5d.md               |   8 +-
 .../671141d8e32fe934c26fa1be.md               |  57 ++
 .../671141f948cbab359e74cc93.md               |  48 +
 .../671141feba228a35cefba82d.md               |  57 ++
 .../671144cdcc01d73f7dd79dc9.md               |  47 +
 .../7cf9b03d81a65668421804c3.md               |   6 +-
 .../657ddcd61f516cacdc7a04ca.md               |  30 +-
 .../657e4e3b02a2128049c344c8.md               |  30 +-
 .../66b205e6eacba4c4e54ea434.md               |   4 +-
 .../66c06fad3475cd92421b9ac2.md               |   4 +-
 .../587d78af367417b2b2512b04.md               |   2 +-
 .../669e2f60e83c011754f711f9.md               |   2 +-
 .../bd7158d8c442eddfaeb5bd18.md               |   2 +-
 .../670803abcb3e980233da4768.md               | 121 +++
 .../6708143cab2b583ecd3324f5.md               | 121 +++
 .../6708382cf088b216580a9ff1.md               | 125 +++
 .../67083868d5fdcb17bf8c14bd.md               | 121 +++
 .../670838977810401844af6fe0.md               | 121 +++
 .../670838b10ee87a18e5faff62.md               | 121 +++
 .../670838e914096b194b0c51aa.md               | 121 +++
 .../670839051794aa19fcef6dc8.md               | 120 +++
 .../67083952f800051a8a21fcfd.md               | 121 +++
 .../6708396caa00e11b597b3365.md               | 121 +++
 .../66edd630f7666cfa54b404d0.md               | 200 ++--
 .../66ed8fa2f45ce3ece4053eab.md               |   2 +-
 .../66ed8ff4f45ce3ece4053eb4.md               | 200 ++--
 .../66edd3403d7077eece6dc4b6.md               | 200 ++--
 .../66edd4bc0ce399f475ad6f9b.md               | 200 ++--
 .../quiz-nano/66f1b03b922a53cb231e1c0d.md     |   2 +-
 .../66f1a2009e65c9a40a26d51e.md               | 201 ++--
 .../66f1af82732957c895f0b21a.md               | 200 ++--
 .../66ed9034f45ce3ece4053ebd.md               | 200 ++--
 .../66ed9043f45ce3ece4053ebf.md               | 200 ++--
 .../61fd5a93fd62bb35968adeab.md               |  61 ++
 .../61fd6343fb42013d99bcd7f3.md               |  48 +
 .../61fd66c687e610436494c6f1.md               |  52 ++
 .../61fd67a656743144844941cb.md               |  78 ++
 .../61fd6ab779390f49148773bb.md               |  65 ++
 .../61fd6b7c83dbf54a08cf0498.md               |  79 ++
 .../61fd6cc9475a784b7776233e.md               |  80 ++
 .../61fd70336ebb3e4f62ee81ba.md               |  73 ++
 .../61fd719788899952e67692b9.md               |  86 ++
 .../61fd71d596e8f253b9408b39.md               |  86 ++
 .../61fd75ea7f663457612dba02.md               | 125 +++
 .../61fd7648a7ba2e5882436831.md               |  96 ++
 .../61fd778081276b59d59abad6.md               | 134 +++
 .../61fd77f7ad2aeb5ae34d07d6.md               | 138 +++
 .../61fd78621573aa5e8b512f5e.md               | 142 +++
 .../61fd7a160ed17960e971f28b.md               | 146 +++
 .../61fd7b3fcaa5406257abc5d1.md               | 130 +++
 .../61fd8e491324ce717da97ffe.md               | 119 +++
 .../61fd8fd08af43372f02952d0.md               | 149 +++
 .../61fd9126aa72a474301fc49f.md               | 131 +++
 .../61fd933ba685de776a94997e.md               | 169 ++++
 .../61fd94056e0355785fbba4d3.md               | 173 ++++
 .../61fd986ddbcbd47ba8fbc5ec.md               | 177 ++++
 .../61fd990577d8227dd93fbeeb.md               | 181 ++++
 .../61fd9a4ff2fc4481b9157bd7.md               | 165 ++++
 .../61fd9ad665a4a282c8106be3.md               | 198 ++++
 .../61fd9b7285bde783ad5b8aac.md               | 208 +++++
 .../61fd9d9fbdfe078800317055.md               | 158 ++++
 .../61fda307bde0b091cf7d884a.md               | 168 ++++
 .../61fda339eadcfd92a6812bed.md               | 171 ++++
 .../61fdac1e31692f9a9ad97295.md               | 172 ++++
 .../61fdaea3999cb19d76ce717b.md               | 172 ++++
 .../61fdaf9ff894b6a084ecdc1b.md               | 174 ++++
 .../61fdafe6f07fd7a1c6785bc2.md               | 182 ++++
 .../61fdb04d9939f0a26ca51c2b.md               | 192 ++++
 .../620159cd5431aa34bc6a4c9c.md               | 198 ++++
 .../62015a5da1c95c358f079ebb.md               | 194 ++++
 .../62015cd2654a1139321a89d2.md               | 196 ++++
 .../62015d8942384c3aed48329e.md               | 212 +++++
 .../620167374bb8b4455cd11125.md               | 224 +++++
 .../620174ed519dd7506c1a4b61.md               | 212 +++++
 .../620175b3710a0951cfa86edf.md               | 223 +++++
 .../6201782cc420715562f36271.md               | 232 +++++
 .../620179bc0a6a2358c72b90ad.md               | 224 +++++
 .../62017b6f47454059bf2d3bd1.md               | 230 +++++
 .../62017f47c87be96457c49f46.md               | 291 ++++++
 .../62017fa5bbef406580ceb44f.md               | 236 +++++
 .../62018243f046a368fab8ffb6.md               | 238 +++++
 .../6201830cb0c74b69f1b41635.md               | 242 +++++
 .../620186f4b6b8356d2def576b.md               | 252 +++++
 .../62018ba1aa263770c953be66.md               | 251 +++++
 .../62018c3e94434a71af1d5eaa.md               | 261 ++++++
 .../62018ec29b3ae674f40bef31.md               | 255 ++++++
 .../62019093fe30e278e797d2f6.md               | 265 ++++++
 .../620191707bc65579ddd3ce15.md               | 270 ++++++
 .../620192a767533a7ad19d96d7.md               | 277 ++++++
 .../6201995d9ab88e80f1989dce.md               | 274 ++++++
 .../620199c7a7a32c81d4db3410.md               | 278 ++++++
 .../6201a1a7af32c287bd6b8183.md               | 284 ++++++
 .../6201a1cc668a34888f5b2f52.md               | 288 ++++++
 .../6201a20d742f5c89736c8cfb.md               | 302 ++++++
 .../6201a42e39bf3b95b6a33bf3.md               | 320 +++++++
 .../6201a4adcc6414968b391592.md               | 296 ++++++
 .../6201a5258af7b398b030bfaf.md               | 312 +++++++
 .../6201a59be346d399c21d10b1.md               | 589 ++++++++++++
 .../64076bbeba941114b0027b6a.md               | 209 +++++
 .../5d822fd413a79914d39e98cc.md               |  76 ++
 .../5d822fd413a79914d39e98cd.md               |  56 ++
 .../5d822fd413a79914d39e98ce.md               |  61 ++
 .../5d822fd413a79914d39e98cf.md               |  69 ++
 .../5d822fd413a79914d39e98d0.md               |  65 ++
 .../5d822fd413a79914d39e98d1.md               |  68 ++
 .../5d822fd413a79914d39e98d2.md               |  83 ++
 .../5d822fd413a79914d39e98d3.md               | 105 +++
 .../5d822fd413a79914d39e98d4.md               | 138 +++
 .../5d822fd413a79914d39e98d5.md               | 112 +++
 .../5d822fd413a79914d39e98d6.md               | 103 +++
 .../5d822fd413a79914d39e98d7.md               | 100 ++
 .../5d822fd413a79914d39e98d8.md               | 124 +++
 .../5d822fd413a79914d39e98d9.md               |  99 ++
 .../5d822fd413a79914d39e98da.md               | 133 +++
 .../5d822fd413a79914d39e98db.md               | 133 +++
 .../5d822fd413a79914d39e98dc.md               | 127 +++
 .../5d822fd413a79914d39e98dd.md               | 142 +++
 .../5d822fd413a79914d39e98de.md               | 140 +++
 .../5d822fd413a79914d39e98df.md               | 124 +++
 .../5d822fd413a79914d39e98e0.md               | 142 +++
 .../5d822fd413a79914d39e98e1.md               | 155 ++++
 .../5d822fd413a79914d39e98e2.md               | 135 +++
 .../5d822fd413a79914d39e98e3.md               | 144 +++
 .../5d822fd413a79914d39e98e4.md               | 147 +++
 .../5d822fd413a79914d39e98e5.md               | 161 ++++
 .../5d822fd413a79914d39e98e6.md               | 192 ++++
 .../5d822fd413a79914d39e98e7.md               | 253 +++++
 .../5d822fd413a79914d39e98e8.md               | 190 ++++
 .../5d822fd413a79914d39e98e9.md               | 223 +++++
 .../5d822fd413a79914d39e98ea.md               | 181 ++++
 .../5d822fd413a79914d39e98eb.md               | 203 +++++
 .../5d822fd413a79914d39e98ec.md               | 203 +++++
 .../5d822fd413a79914d39e98ed.md               | 202 ++++
 .../5d822fd413a79914d39e98ee.md               | 196 ++++
 .../5d822fd413a79914d39e98ef.md               | 197 ++++
 .../5d822fd413a79914d39e98f0.md               | 218 +++++
 .../5d822fd413a79914d39e98f1.md               | 223 +++++
 .../5d822fd413a79914d39e98f2.md               | 237 +++++
 .../5d822fd413a79914d39e98f3.md               | 222 +++++
 .../5d822fd413a79914d39e98f4.md               | 227 +++++
 .../5d822fd413a79914d39e98f5.md               | 198 ++++
 .../5d822fd413a79914d39e98f6.md               | 207 +++++
 .../5d822fd413a79914d39e98f7.md               | 203 +++++
 .../5d822fd413a79914d39e98f8.md               | 210 +++++
 .../5d822fd413a79914d39e98f9.md               | 207 +++++
 .../5d822fd413a79914d39e98fa.md               | 211 +++++
 .../5d822fd413a79914d39e98fb.md               | 240 +++++
 .../5d822fd413a79914d39e98fc.md               | 211 +++++
 .../5d822fd413a79914d39e98fd.md               | 209 +++++
 .../5d822fd413a79914d39e98fe.md               | 260 ++++++
 .../5d822fd413a79914d39e98ff.md               | 238 +++++
 .../5d822fd413a79914d39e9900.md               | 224 +++++
 .../5d822fd413a79914d39e9901.md               | 224 +++++
 .../5d822fd413a79914d39e9902.md               | 227 +++++
 .../5d822fd413a79914d39e9903.md               | 223 +++++
 .../5d822fd413a79914d39e9904.md               | 245 +++++
 .../5d822fd413a79914d39e9905.md               | 223 +++++
 .../5d822fd413a79914d39e9906.md               | 249 +++++
 .../5d822fd413a79914d39e9907.md               | 258 ++++++
 .../5d822fd413a79914d39e9908.md               | 258 ++++++
 .../5d822fd413a79914d39e9909.md               | 245 +++++
 .../5d822fd413a79914d39e990a.md               | 277 ++++++
 .../5d822fd413a79914d39e990b.md               | 254 ++++++
 .../5d822fd413a79914d39e990c.md               | 253 +++++
 .../5d822fd413a79914d39e990d.md               | 255 ++++++
 .../5d822fd413a79914d39e990e.md               | 265 ++++++
 .../5d822fd413a79914d39e990f.md               | 279 ++++++
 .../5d822fd413a79914d39e9910.md               | 266 ++++++
 .../5d822fd413a79914d39e9911.md               | 291 ++++++
 .../5d822fd413a79914d39e9912.md               | 287 ++++++
 .../5d822fd413a79914d39e9913.md               | 280 ++++++
 .../5d822fd413a79914d39e9914.md               | 284 ++++++
 .../5d822fd413a79914d39e9915.md               | 391 ++++++++
 .../5d822fd413a79914d39e9916.md               | 297 ++++++
 .../5d822fd413a79914d39e9917.md               | 307 +++++++
 .../5d822fd413a79914d39e9918.md               | 298 ++++++
 .../5d822fd413a79914d39e9919.md               | 301 ++++++
 .../5d822fd413a79914d39e991a.md               | 312 +++++++
 .../5d822fd413a79914d39e991b.md               | 314 +++++++
 .../5d822fd413a79914d39e991c.md               | 317 +++++++
 .../5d822fd413a79914d39e991d.md               | 315 +++++++
 .../5d822fd413a79914d39e991e.md               | 326 +++++++
 .../5d822fd413a79914d39e991f.md               | 324 +++++++
 .../5d822fd413a79914d39e9920.md               | 330 +++++++
 .../5d822fd413a79914d39e9921.md               | 348 +++++++
 .../5d822fd413a79914d39e9922.md               | 347 +++++++
 .../5d822fd413a79914d39e9923.md               | 348 +++++++
 .../5d822fd413a79914d39e9924.md               | 340 +++++++
 .../5d822fd413a79914d39e9925.md               | 346 +++++++
 .../5d822fd413a79914d39e9926.md               | 355 ++++++++
 .../5d822fd413a79914d39e9927.md               | 350 +++++++
 .../5d822fd413a79914d39e9928.md               | 349 +++++++
 .../5d822fd413a79914d39e9929.md               | 362 ++++++++
 .../5d822fd413a79914d39e992a.md               | 359 ++++++++
 .../5d822fd413a79914d39e992b.md               | 361 ++++++++
 .../5d822fd413a79914d39e992c.md               | 364 ++++++++
 .../5d822fd413a79914d39e992d.md               | 377 ++++++++
 .../5d822fd413a79914d39e992e.md               | 374 ++++++++
 .../5d822fd413a79914d39e992f.md               | 377 ++++++++
 .../5d822fd413a79914d39e9930.md               | 381 ++++++++
 .../5d822fd413a79914d39e9931.md               | 404 ++++++++
 .../5d822fd413a79914d39e9932.md               | 396 ++++++++
 .../5d822fd413a79914d39e9933.md               | 402 ++++++++
 .../5d822fd413a79914d39e9934.md               | 409 +++++++++
 .../5d822fd413a79914d39e9935.md               | 409 +++++++++
 .../5d822fd413a79914d39e9936.md               | 402 ++++++++
 .../5d822fd413a79914d39e9937.md               | 403 ++++++++
 .../5d822fd413a79914d39e9938.md               | 421 +++++++++
 .../5d822fd413a79914d39e9939.md               | 410 +++++++++
 .../5d822fd413a79914d39e993a.md               | 422 +++++++++
 .../5d822fd413a79914d39e993b.md               | 424 +++++++++
 .../5d822fd413a79914d39e993c.md               | 437 +++++++++
 .../5d822fd413a79914d39e993d.md               | 450 +++++++++
 .../5d822fd413a79914d39e993e.md               | 862 ++++++++++++++++++
 .../619665c9abd72906f3ad30f9.md               |  65 ++
 .../61967e74a8e3690ab6292daa.md               |  56 ++
 .../61968df2acd5550bf1616c34.md               |  53 ++
 .../61968e9243a4090cc805531c.md               |  51 ++
 .../61968f8877c6720d6d61aaf5.md               |  64 ++
 .../619691693bc14b0e528f5a20.md               |  66 ++
 .../6196928658b6010f28c39484.md               |  58 ++
 .../619692ff79f5770fc6d8c0b4.md               |  73 ++
 .../6196990f966e8f10a40094f6.md               |  75 ++
 .../619699c10a0f6e11591d73c4.md               |  74 ++
 .../61969aa6acef5b12200f672e.md               |  83 ++
 .../61969c487ced6f12db8fef94.md               |  89 ++
 .../61969d66cfcdba137d021558.md               |  76 ++
 .../61969e7451455614217e901b.md               |  91 ++
 .../6196adc17f77a714d51485f2.md               |  90 ++
 .../6196aead7ac7bf1584b17a7f.md               |  86 ++
 .../6196ce0415498d2463989e84.md               |  92 ++
 .../6196cee94c6da1253809dff9.md               | 100 ++
 .../6196d00a5d7292262bc02f4c.md               |  87 ++
 .../6196d0cda039d026f7f78d1e.md               | 100 ++
 .../6196d1ac33c68d27dcda5796.md               | 131 +++
 .../6196d213d99f16287bff22ae.md               | 104 +++
 .../6196d2c0f22ca0293107c048.md               | 112 +++
 .../6196d32d1340d829f0f6f57d.md               | 105 +++
 .../6196d41d40bf9b2aaea5d520.md               | 107 +++
 .../6197cff995d03905b0cca8ad.md               | 118 +++
 .../6197f40a16afea068c7e60c8.md               | 125 +++
 .../6197f667297bb30a552ce017.md               |  65 ++
 .../61993b72e874e709b8dfd666.md               | 128 +++
 .../61993cf26a8e0f0a553db223.md               | 122 +++
 .../61993dbb35adf30b10d49e38.md               | 139 +++
 .../61993e9adc9e9a0bb4d28fff.md               | 133 +++
 .../6199409834ccaf0d10736596.md               | 139 +++
 .../6199429802b7c10dc79ff871.md               | 154 ++++
 .../619943285a41720e6370d985.md               | 156 ++++
 .../619943876b706d0f35c01dbc.md               | 146 +++
 .../6199442866286d0ff421a4fc.md               | 148 +++
 .../619bcf239fc15905ecd66fce.md               | 145 +++
 .../619be73b3c806006ccc00bb0.md               | 158 ++++
 .../619be7af7b0bf60770f5d2a4.md               | 155 ++++
 .../619be80062551a080e32c821.md               | 160 ++++
 .../619be8ce4ea49008c5bfbc30.md               | 152 +++
 .../619be946958c6009844f1dee.md               | 166 ++++
 .../619c155df0063a0a3fec0e32.md               | 193 ++++
 .../619c16debd0c270b01c5ce38.md               | 165 ++++
 .../619cfdf2e63ddf05feab86ad.md               | 169 ++++
 .../619d019488f98c06acbbb71a.md               | 171 ++++
 .../619d022dc8400c0763829a17.md               | 177 ++++
 .../619d02c7bc95bf0827a5d296.md               | 181 ++++
 .../619d033915012509031f309a.md               | 184 ++++
 .../619d03dadadb6509a16f4f5f.md               | 210 +++++
 .../619d0503e03a790a4179d463.md               | 206 +++++
 .../619d05c54dabca0b10058235.md               | 197 ++++
 .../619d0882f54bf40bdc4671ed.md               | 197 ++++
 .../619d090cd8d6db0c93dc5087.md               | 222 +++++
 .../619d0b51ca42ed0d74582186.md               | 207 +++++
 .../619d0bc9cb05360e1bf549c3.md               | 200 ++++
 .../619d0c1594c38c0ebae75878.md               | 215 +++++
 .../619d0d18ca99870f884a7bff.md               | 225 +++++
 .../619d0daf214542102739b0da.md               | 227 +++++
 .../619d0e56f9ca9710fcb974e3.md               | 226 +++++
 .../619d0eec0ac40611b41e2ccc.md               | 247 +++++
 .../619d0fc9825c271253df28d4.md               | 238 +++++
 .../619d102d786c3d13124c37c6.md               | 231 +++++
 .../619d107edf7ddf13cc77106a.md               | 246 +++++
 .../619d10cc98145f14820399c5.md               | 271 ++++++
 .../619d115e2adcd71538e82ebb.md               | 256 ++++++
 .../619d11e6d5ef9515d2a16033.md               | 262 ++++++
 .../619d129a417d0716a94de913.md               | 267 ++++++
 .../619d1340361095175f4b5115.md               | 267 ++++++
 .../619d15797b580c1828b05426.md               | 263 ++++++
 .../619d15d955d9d418c4487bbc.md               | 264 ++++++
 .../619d1629a8adc61960ca8b40.md               | 278 ++++++
 .../619d1c5fc9f8941a400955da.md               | 272 ++++++
 .../619d1dab9ff3421ae1976991.md               | 273 ++++++
 .../619d1deb8b04811b8839ffe4.md               | 281 ++++++
 .../619d1e7a8e81a61c5a819dc4.md               | 272 ++++++
 .../619d1ed33c9a071cf657a0d6.md               | 306 +++++++
 .../619d1fb5d244c31db8a7fdb7.md               | 295 ++++++
 .../619d204bd73ae51e743b8e94.md               | 288 ++++++
 .../619d20b12996101f430920fb.md               | 304 ++++++
 .../619d21fe6a3f9b2016be9d9d.md               | 304 ++++++
 .../619d229b0e542520cd91c685.md               | 312 +++++++
 .../619d23089e787e216a7043d6.md               | 295 ++++++
 .../619d237a107c10221ed743fa.md               | 328 +++++++
 .../619d26b12e651022d80cd017.md               | 317 +++++++
 .../619d2712853306238f41828e.md               | 332 +++++++
 .../619d2b7a84e78b246f2d17a2.md               | 340 +++++++
 .../619d2bd9c1d43c2526e96f1f.md               | 325 +++++++
 .../619d2d4e80400325ff89664a.md               | 326 +++++++
 .../619d2ebc81ba81271460850d.md               | 326 +++++++
 .../619d2f0e9440bc27caee1cec.md               | 327 +++++++
 .../619d2fd3ff4f772882e3d998.md               | 323 +++++++
 .../619d30350883802921bfcccc.md               | 333 +++++++
 .../619d324f5915c929f36ae91d.md               | 351 +++++++
 .../619d32c7fa21f32aaa91d499.md               | 347 +++++++
 .../619d333b738e3c2b5d58b095.md               | 347 +++++++
 .../619d337765b9f02c10e93722.md               | 362 ++++++++
 .../619d33c51140292cc5a21742.md               | 357 ++++++++
 .../619d3482f505452d861d0f62.md               | 347 +++++++
 .../619d3561a951bf2e41a24f10.md               | 346 +++++++
 .../619d36103839c82efa95dd34.md               | 357 ++++++++
 .../619d3711d04d623000013e9e.md               | 670 ++++++++++++++
 .../61a8fe15a6a31306e60d1e89.md               |  55 ++
 .../61537bb9b1a29430ac15ad38.md               |  43 +
 .../61537c5f81f0cf325b4a854c.md               |  62 ++
 .../61537c9eecea6a335db6da79.md               |  65 ++
 .../61537d86bdc3dd343688fceb.md               | 111 +++
 .../615380dff67172357fcf0425.md               |  83 ++
 .../6153893900438b4643590367.md               | 112 +++
 .../6153897c27f6334716ee5abe.md               |  93 ++
 .../6153908a366afb4d57185c8d.md               |  94 ++
 .../615392916d83fa4f02f7e2cf.md               |  88 ++
 .../6153938dce8b294ff8f5a4e9.md               |  87 ++
 .../6153947986535e5117e60615.md               |  88 ++
 .../61539e07e7430b528fbffe21.md               | 104 +++
 .../61539f32a206bd53ec116465.md               |  92 ++
 .../6153a04847abee57a3a406ac.md               |  95 ++
 .../6153a3485f0b20591d26d2a1.md               |  92 ++
 .../6153a3952facd25a83fe8083.md               | 112 +++
 .../6153a3ebb4f7f05b8401b716.md               | 181 ++++
 .../615f171d05def3218035dc85.md               |  92 ++
 .../6493bc0d99879635209565aa.md               |  75 ++
 .../6494da0daf5df5197963671d.md               |  83 ++
 .../64dd076a1b33c86d84b4232f.md               | 126 +++
 .../64dd136e4e8b0894f9c70d86.md               |  79 ++
 .../66c8ba975ee7230e29f6c4ad.md               |   2 +-
 .../615f2abbe7d18d49a1e0e1c8.md               |  58 ++
 .../615f2d4150fe0d4cbd0f2628.md               |  62 ++
 .../615f34948891834dd77655a6.md               |  63 ++
 .../615f34ecc1091b4fd5a8a484.md               |  88 ++
 .../615f357957e370510f21ea16.md               |  55 ++
 .../615f378014c2da526a109c81.md               |  57 ++
 .../615f38279e5c3d53692ea441.md               |  66 ++
 .../615f38cabc64e3556f98cc1a.md               |  65 ++
 .../615f3949f58e12577dcefb00.md               |  61 ++
 .../615f39d7da41b15851fa3fb9.md               |  66 ++
 .../615f3b091162165948e1cb33.md               |  72 ++
 .../615f3cafd794015aa9547a6d.md               |  76 ++
 .../615f3d9e59db4b5b8e960762.md               |  70 ++
 .../615f3e1b7233ee5c7595771f.md               |  71 ++
 .../615f3e4af8008c5d494d3afe.md               |  80 ++
 .../615f3ed16592445e57941aec.md               |  96 ++
 .../615f405b89a7ec5f8e2d11f4.md               |  91 ++
 .../615f40b01f680e608d360ed4.md               |  84 ++
 .../615f4172e9eec061d6456221.md               |  91 ++
 .../615f41c979787462e76dab90.md               | 104 +++
 .../615f423cf65d5864132a0956.md               |  86 ++
 .../615f42a021625f656101ef93.md               | 100 ++
 .../615f4bfb9de4a16703b56eb6.md               |  92 ++
 .../615f4ce9d877b668417c0c42.md               | 104 +++
 .../615f4dde9d72e3694cb9ee3b.md               | 105 +++
 .../615f4ec58334106a4170c2a8.md               | 105 +++
 .../615f4f9e4a40566b776a8f38.md               | 111 +++
 .../615f50473cc0196c6dd3892a.md               | 101 ++
 .../615f51257a8a516d80b6c743.md               | 113 +++
 .../615f51e4e5b24a6e80eccce1.md               | 128 +++
 .../615f522dea4f776f64dc3e91.md               | 115 +++
 .../615f5486b8fd4b71633f69b0.md               | 143 +++
 .../615f575b50b91e72af079480.md               | 144 +++
 .../615f5af373a68e744a3c5a76.md               | 141 +++
 .../615f5fd85d0062761f288364.md               | 134 +++
 .../615f61338c8ca176d6445574.md               | 141 +++
 .../615f666ac5edea782feb7e75.md               | 142 +++
 .../615f671b6d1919792745aa5d.md               | 167 ++++
 .../615f6823d0815b7a991f2a75.md               | 157 ++++
 .../615f6b2d164f81809efd9bdc.md               | 182 ++++
 .../615f6cc778f7698258467596.md               | 172 ++++
 .../615f6fddaac1e083502d3e6a.md               | 148 +++
 .../615f70077a4ff98424236c1e.md               | 163 ++++
 .../615f72a872354a850d4f533e.md               | 160 ++++
 .../615f74a71f1e498619e38ee8.md               | 166 ++++
 .../615f7ad94380408d971d14f6.md               | 181 ++++
 .../615f7bc680f7168ea01ebf99.md               | 165 ++++
 .../615f7c71eab8218f846e4503.md               | 196 ++++
 .../615f7d489a581590d1350288.md               | 165 ++++
 .../615f7de4487b64919bb4aa5e.md               | 215 +++++
 .../615f7e7281626a92bbd62da8.md               | 205 +++++
 .../615f7ecb09de9a938ef94756.md               | 210 +++++
 .../615f7fa959ab75948f96a0d6.md               | 183 ++++
 .../615f808d85793195b0f53be9.md               | 185 ++++
 .../615f829d07b18f96f6f6684b.md               | 169 ++++
 .../615f83ef928ec9982b785b6a.md               | 182 ++++
 .../615f84f246e8ba98e3cd97be.md               | 211 +++++
 .../615f887466db4ba14b5342cc.md               | 208 +++++
 .../615f89e055040ba294719d2f.md               | 195 ++++
 .../615f8bfe0f30a1a3c340356b.md               | 219 +++++
 .../615f8f1223601fa546e93f31.md               | 202 ++++
 .../615f905fbd1017a65ca224eb.md               | 211 +++++
 .../615f94786869e1a7fec54375.md               | 196 ++++
 .../615f951dff9317a900ef683f.md               | 365 ++++++++
 .../635bde33c91c80540eae239b.md               | 153 ++++
 .../6395d33ab5d91bf317107c48.md               | 117 +++
 .../6396e33fe478dd264ebbf278.md               | 135 +++
 .../667d1bb875f5961913176069.md               | 147 +++
 .../612e78af05201622d4bab8aa.md               |  58 ++
 .../612e7d1c29fb872d6384379c.md               |  60 ++
 .../612e804c54d5e7308d7ebe56.md               |  60 ++
 .../612e813b3ba67633222cbe54.md               |  95 ++
 .../612e8279827a28352ce83a72.md               |  74 ++
 .../612e83ec2eca1e370f830511.md               | 107 +++
 .../612e89562043183c86df287c.md               |  77 ++
 .../612e89d254fe5d3df7d6693d.md               |  83 ++
 .../612e8eebe3a6dc3fcc33a66f.md               |  95 ++
 .../612e95ef2e4bdf41f69067f9.md               |  81 ++
 .../612e96fc87fe8e44f69f7ec5.md               | 102 +++
 .../612e98f3245c98475e49cfc6.md               |  88 ++
 .../612e9a21381a1949327512e6.md               |  89 ++
 .../612e9d142affc44a453655db.md               | 117 +++
 .../612e9f1e7e5ccd4fa9ada0be.md               | 103 +++
 .../612ea4c4993aba52ab4aa32e.md               | 119 +++
 .../612ea97df5742154772f312e.md               | 110 +++
 .../612ead8788d28655ef8db056.md               | 112 +++
 .../612eaf56b7ba3257fdbfb0db.md               | 144 +++
 .../612eb4893b63c75bb9251ddf.md               | 129 +++
 .../612eb75153591b5e3b1ab65e.md               | 115 +++
 .../612eb7ca8c275d5f89c73333.md               | 116 +++
 .../612eb8e984cd73677a92b7e9.md               | 117 +++
 .../612eb934f64a4d6890a45518.md               | 118 +++
 .../612ebcba99bfa46a15370b11.md               | 139 +++
 .../612ebe7fe6d07e6b76d1cae2.md               | 133 +++
 .../612ebedec97e096c8bf64999.md               | 136 +++
 .../612ebf9a210f2b6d77001e68.md               | 139 +++
 .../612ec0490ae8626e9adf82e4.md               | 133 +++
 .../612ec19d5268da7074941f84.md               | 154 ++++
 .../612ec29c84b9a6718b1f5cec.md               | 288 ++++++
 .../66fbcdfed6848e48947dbbc9.md               |  36 +
 .../66fbcf750a62784cf11f562d.md               |  81 ++
 .../66fbcf750a62784cf11f562e.md               | 152 +++
 .../66fbcf750a62784cf11f5630.md               |  98 ++
 .../66fbcf750a62784cf11f5631.md               | 104 +++
 .../66fbcf750a62784cf11f5632.md               | 105 +++
 .../66fbcf750a62784cf11f5633.md               | 106 +++
 .../66fbcf750a62784cf11f5634.md               | 133 +++
 .../66fbcf750a62784cf11f5635.md               | 124 +++
 .../66fbcf750a62784cf11f5636.md               | 124 +++
 .../66fbcf750a62784cf11f5637.md               | 186 ++++
 .../66ff02792b3042a2b811f475.md               |  86 ++
 .../670e4f45f7116c0f216a5177.md               | 135 +++
 .../60a3e3396c7b40068ad6996b.md               |  43 +
 .../60a3e3396c7b40068ad6996c.md               |  42 +
 .../60a3e3396c7b40068ad6996d.md               |  41 +
 .../60a3e3396c7b40068ad6996e.md               |  43 +
 .../60a3e3396c7b40068ad6996f.md               |  47 +
 .../60a3e3396c7b40068ad69970.md               |  53 ++
 .../60a3e3396c7b40068ad69971.md               |  67 ++
 .../60a3e3396c7b40068ad69972.md               |  54 ++
 .../60a3e3396c7b40068ad69973.md               |  55 ++
 .../60a3e3396c7b40068ad69974.md               |  67 ++
 .../60a3e3396c7b40068ad69975.md               |  67 ++
 .../60a3e3396c7b40068ad69976.md               |  64 ++
 .../60a3e3396c7b40068ad69977.md               |  65 ++
 .../60a3e3396c7b40068ad69978.md               |  66 ++
 .../60a3e3396c7b40068ad69979.md               |  71 ++
 .../60a3e3396c7b40068ad6997a.md               |  74 ++
 .../60a3e3396c7b40068ad6997b.md               |  70 ++
 .../60a3e3396c7b40068ad6997c.md               |  71 ++
 .../60a3e3396c7b40068ad6997d.md               |  74 ++
 .../60a3e3396c7b40068ad6997e.md               |  75 ++
 .../60a3e3396c7b40068ad6997f.md               |  82 ++
 .../60a3e3396c7b40068ad69980.md               |  84 ++
 .../60a3e3396c7b40068ad69981.md               |  84 ++
 .../60a3e3396c7b40068ad69982.md               |  79 ++
 .../60a3e3396c7b40068ad69983.md               |  80 ++
 .../60a3e3396c7b40068ad69984.md               |  81 ++
 .../60a3e3396c7b40068ad69986.md               |  93 ++
 .../60a3e3396c7b40068ad69987.md               |  94 ++
 .../60a3e3396c7b40068ad69988.md               |  87 ++
 .../60a3e3396c7b40068ad69989.md               |  88 ++
 .../60a3e3396c7b40068ad6998a.md               |  89 ++
 .../60a3e3396c7b40068ad6998b.md               |  93 ++
 .../60a3e3396c7b40068ad6998c.md               | 100 ++
 .../60a3e3396c7b40068ad6998d.md               | 108 +++
 .../60a3e3396c7b40068ad6998e.md               |  95 ++
 .../60a3e3396c7b40068ad6998f.md               |  98 ++
 .../60a3e3396c7b40068ad69990.md               |  97 ++
 .../60a3e3396c7b40068ad69991.md               |  98 ++
 .../60a3e3396c7b40068ad69992.md               | 101 ++
 .../60a3e3396c7b40068ad69993.md               | 100 ++
 .../60a3e3396c7b40068ad69994.md               | 103 +++
 .../60a3e3396c7b40068ad69995.md               | 104 +++
 .../60a3e3396c7b40068ad69996.md               | 103 +++
 .../60a3e3396c7b40068ad69997.md               | 180 ++++
 .../5d822fd413a79914d39e9904.md               |  20 +-
 .../5dc17d3bf86c76b9248c6eb4.md               |   6 +-
 .../5dc17dc8f86c76b9248c6eb5.md               |  11 +-
 .../5dc2385ff86c76b9248c6eb7.md               |   8 +-
 .../5dc23991f86c76b9248c6eb8.md               |  12 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../5dc24073f86c76b9248c6ebb.md               |   8 +-
 .../5dc24165f86c76b9248c6ebc.md               |   2 +-
 .../5dc24614f86c76b9248c6ebd.md               |   2 +-
 .../5ddbd81294d8ddc1510a8e56.md               |  12 +-
 .../5dfa2407b521be39a3de7be1.md               |  15 +-
 .../5dfa30b9eacea3f48c6300ad.md               |  10 +-
 .../5dfa3589eacea3f48c6300ae.md               |   6 +-
 .../5dfa371beacea3f48c6300af.md               |   6 +-
 .../5dfa37b9eacea3f48c6300b0.md               |   6 +-
 .../5dfb5ecbeacea3f48c6300b1.md               |   6 +-
 .../5dfb6250eacea3f48c6300b2.md               |   6 +-
 .../5dfb655eeacea3f48c6300b3.md               |  12 +-
 .../5dfb6a35eacea3f48c6300b4.md               |   6 +-
 .../5ef9b03c81a63668521804d0.md               |   6 +-
 .../5ef9b03c81a63668521804d1.md               |   6 +-
 .../5ef9b03c81a63668521804d2.md               |   6 +-
 .../5ef9b03c81a63668521804d3.md               |   6 +-
 .../5ef9b03c81a63668521804d4.md               |   6 +-
 .../5ef9b03c81a63668521804d5.md               |   6 +-
 .../5ef9b03c81a63668521804d6.md               |   6 +-
 .../5ef9b03c81a63668521804d7.md               |   6 +-
 .../5ef9b03c81a63668521804d8.md               |   6 +-
 .../5ef9b03c81a63668521804d9.md               |   6 +-
 .../5ef9b03c81a63668521804da.md               |   6 +-
 .../5ef9b03c81a63668521804db.md               |   6 +-
 .../5ef9b03c81a63668521804dc.md               |   6 +-
 .../5ef9b03c81a63668521804dd.md               |   6 +-
 .../5ef9b03c81a63668521804de.md               |   7 +-
 .../5ef9b03c81a63668521804df.md               |   6 +-
 .../5ef9b03c81a63668521804e1.md               |   6 +-
 .../5ef9b03c81a63668521804e2.md               |   6 +-
 .../5ef9b03c81a63668521804e3.md               |   6 +-
 .../5ef9b03c81a63668521804e5.md               |   6 +-
 .../5ef9b03c81a63668521804e7.md               |   6 +-
 .../5ef9b03c81a63668521804e8.md               |  10 +-
 .../5ef9b03c81a63668521804e9.md               |   8 +-
 .../5ef9b03c81a63668521804ea.md               |   6 +-
 .../5ef9b03c81a63668521804eb.md               |   6 +-
 .../5ef9b03c81a63668521804ec.md               |   6 +-
 .../5ef9b03c81a63668521804ee.md               |   6 +-
 .../5efada803cbd2bbdab94e332.md               |  13 +-
 .../5efae0543cbd2bbdab94e333.md               |   6 +-
 .../5efae16e3cbd2bbdab94e334.md               |   6 +-
 .../5efb23e70dc218d6c85f89b1.md               |   6 +-
 .../5efb2c990dc218d6c85f89b2.md               |   6 +-
 .../5efc4f528d6a74d05e68af74.md               |   6 +-
 .../5efc518e8d6a74d05e68af75.md               |   6 +-
 .../5efc54138d6a74d05e68af76.md               |   6 +-
 .../5efc575c8d6a74d05e68af77.md               |   6 +-
 .../5f05a1d8e233dff4a68508d8.md               |   6 +-
 .../5f07be6ef7412fbad0c5626b.md               |  12 +-
 .../5f07c98cdb9413cbd4b16750.md               |   6 +-
 .../5f07fb1579dc934717801375.md               |   6 +-
 .../5f0d48e7b435f13ab6550051.md               |   6 +-
 .../5f0d4ab1b435f13ab6550052.md               |   6 +-
 .../5f0d4d04b435f13ab6550053.md               |   6 +-
 .../5f1a80975fc4bcae0edb3497.md               |   7 +-
 .../5f1a89f1190aff21ae42105a.md               |   6 +-
 .../62bb4009e3458a128ff57d5d.md               |   8 +-
 .../671141d8e32fe934c26fa1be.md               |  57 ++
 .../671141f948cbab359e74cc93.md               |  48 +
 .../671141feba228a35cefba82d.md               |  57 ++
 .../671144cdcc01d73f7dd79dc9.md               |  47 +
 .../7cf9b03d81a65668421804c3.md               |   6 +-
 .../657ddcd61f516cacdc7a04ca.md               |  30 +-
 .../657e4e3b02a2128049c344c8.md               |  30 +-
 .../66b205e6eacba4c4e54ea434.md               |   4 +-
 .../66c06fad3475cd92421b9ac2.md               |   4 +-
 .../587d78af367417b2b2512b04.md               |   2 +-
 .../669e2f60e83c011754f711f9.md               |   2 +-
 .../bd7158d8c442eddfaeb5bd18.md               |   2 +-
 .../670803abcb3e980233da4768.md               | 121 +++
 .../6708143cab2b583ecd3324f5.md               | 121 +++
 .../6708382cf088b216580a9ff1.md               | 125 +++
 .../67083868d5fdcb17bf8c14bd.md               | 121 +++
 .../670838977810401844af6fe0.md               | 121 +++
 .../670838b10ee87a18e5faff62.md               | 121 +++
 .../670838e914096b194b0c51aa.md               | 121 +++
 .../670839051794aa19fcef6dc8.md               | 120 +++
 .../67083952f800051a8a21fcfd.md               | 121 +++
 .../6708396caa00e11b597b3365.md               | 121 +++
 .../66edd630f7666cfa54b404d0.md               | 200 ++--
 .../66ed8fa2f45ce3ece4053eab.md               |   2 +-
 .../66ed8ff4f45ce3ece4053eb4.md               | 200 ++--
 .../66edd3403d7077eece6dc4b6.md               | 200 ++--
 .../66edd4bc0ce399f475ad6f9b.md               | 200 ++--
 .../quiz-nano/66f1b03b922a53cb231e1c0d.md     |   2 +-
 .../66f1a2009e65c9a40a26d51e.md               | 201 ++--
 .../66f1af82732957c895f0b21a.md               | 200 ++--
 .../66ed9034f45ce3ece4053ebd.md               | 200 ++--
 .../66ed9043f45ce3ece4053ebf.md               | 200 ++--
 .../61fd5a93fd62bb35968adeab.md               |  61 ++
 .../61fd6343fb42013d99bcd7f3.md               |  48 +
 .../61fd66c687e610436494c6f1.md               |  52 ++
 .../61fd67a656743144844941cb.md               |  78 ++
 .../61fd6ab779390f49148773bb.md               |  65 ++
 .../61fd6b7c83dbf54a08cf0498.md               |  79 ++
 .../61fd6cc9475a784b7776233e.md               |  80 ++
 .../61fd70336ebb3e4f62ee81ba.md               |  73 ++
 .../61fd719788899952e67692b9.md               |  86 ++
 .../61fd71d596e8f253b9408b39.md               |  86 ++
 .../61fd75ea7f663457612dba02.md               | 125 +++
 .../61fd7648a7ba2e5882436831.md               |  96 ++
 .../61fd778081276b59d59abad6.md               | 134 +++
 .../61fd77f7ad2aeb5ae34d07d6.md               | 138 +++
 .../61fd78621573aa5e8b512f5e.md               | 142 +++
 .../61fd7a160ed17960e971f28b.md               | 146 +++
 .../61fd7b3fcaa5406257abc5d1.md               | 130 +++
 .../61fd8e491324ce717da97ffe.md               | 119 +++
 .../61fd8fd08af43372f02952d0.md               | 149 +++
 .../61fd9126aa72a474301fc49f.md               | 131 +++
 .../61fd933ba685de776a94997e.md               | 169 ++++
 .../61fd94056e0355785fbba4d3.md               | 173 ++++
 .../61fd986ddbcbd47ba8fbc5ec.md               | 177 ++++
 .../61fd990577d8227dd93fbeeb.md               | 181 ++++
 .../61fd9a4ff2fc4481b9157bd7.md               | 165 ++++
 .../61fd9ad665a4a282c8106be3.md               | 198 ++++
 .../61fd9b7285bde783ad5b8aac.md               | 208 +++++
 .../61fd9d9fbdfe078800317055.md               | 158 ++++
 .../61fda307bde0b091cf7d884a.md               | 168 ++++
 .../61fda339eadcfd92a6812bed.md               | 171 ++++
 .../61fdac1e31692f9a9ad97295.md               | 172 ++++
 .../61fdaea3999cb19d76ce717b.md               | 172 ++++
 .../61fdaf9ff894b6a084ecdc1b.md               | 174 ++++
 .../61fdafe6f07fd7a1c6785bc2.md               | 182 ++++
 .../61fdb04d9939f0a26ca51c2b.md               | 192 ++++
 .../620159cd5431aa34bc6a4c9c.md               | 198 ++++
 .../62015a5da1c95c358f079ebb.md               | 194 ++++
 .../62015cd2654a1139321a89d2.md               | 196 ++++
 .../62015d8942384c3aed48329e.md               | 212 +++++
 .../620167374bb8b4455cd11125.md               | 224 +++++
 .../620174ed519dd7506c1a4b61.md               | 212 +++++
 .../620175b3710a0951cfa86edf.md               | 223 +++++
 .../6201782cc420715562f36271.md               | 232 +++++
 .../620179bc0a6a2358c72b90ad.md               | 224 +++++
 .../62017b6f47454059bf2d3bd1.md               | 230 +++++
 .../62017f47c87be96457c49f46.md               | 291 ++++++
 .../62017fa5bbef406580ceb44f.md               | 236 +++++
 .../62018243f046a368fab8ffb6.md               | 238 +++++
 .../6201830cb0c74b69f1b41635.md               | 242 +++++
 .../620186f4b6b8356d2def576b.md               | 252 +++++
 .../62018ba1aa263770c953be66.md               | 251 +++++
 .../62018c3e94434a71af1d5eaa.md               | 261 ++++++
 .../62018ec29b3ae674f40bef31.md               | 255 ++++++
 .../62019093fe30e278e797d2f6.md               | 265 ++++++
 .../620191707bc65579ddd3ce15.md               | 270 ++++++
 .../620192a767533a7ad19d96d7.md               | 277 ++++++
 .../6201995d9ab88e80f1989dce.md               | 274 ++++++
 .../620199c7a7a32c81d4db3410.md               | 278 ++++++
 .../6201a1a7af32c287bd6b8183.md               | 284 ++++++
 .../6201a1cc668a34888f5b2f52.md               | 288 ++++++
 .../6201a20d742f5c89736c8cfb.md               | 302 ++++++
 .../6201a42e39bf3b95b6a33bf3.md               | 320 +++++++
 .../6201a4adcc6414968b391592.md               | 296 ++++++
 .../6201a5258af7b398b030bfaf.md               | 312 +++++++
 .../6201a59be346d399c21d10b1.md               | 589 ++++++++++++
 .../64076bbeba941114b0027b6a.md               | 209 +++++
 .../5d822fd413a79914d39e98cc.md               |  76 ++
 .../5d822fd413a79914d39e98cd.md               |  56 ++
 .../5d822fd413a79914d39e98ce.md               |  61 ++
 .../5d822fd413a79914d39e98cf.md               |  69 ++
 .../5d822fd413a79914d39e98d0.md               |  65 ++
 .../5d822fd413a79914d39e98d1.md               |  68 ++
 .../5d822fd413a79914d39e98d2.md               |  83 ++
 .../5d822fd413a79914d39e98d3.md               | 105 +++
 .../5d822fd413a79914d39e98d4.md               | 138 +++
 .../5d822fd413a79914d39e98d5.md               | 112 +++
 .../5d822fd413a79914d39e98d6.md               | 103 +++
 .../5d822fd413a79914d39e98d7.md               | 100 ++
 .../5d822fd413a79914d39e98d8.md               | 124 +++
 .../5d822fd413a79914d39e98d9.md               |  99 ++
 .../5d822fd413a79914d39e98da.md               | 133 +++
 .../5d822fd413a79914d39e98db.md               | 133 +++
 .../5d822fd413a79914d39e98dc.md               | 127 +++
 .../5d822fd413a79914d39e98dd.md               | 142 +++
 .../5d822fd413a79914d39e98de.md               | 140 +++
 .../5d822fd413a79914d39e98df.md               | 124 +++
 .../5d822fd413a79914d39e98e0.md               | 142 +++
 .../5d822fd413a79914d39e98e1.md               | 155 ++++
 .../5d822fd413a79914d39e98e2.md               | 135 +++
 .../5d822fd413a79914d39e98e3.md               | 144 +++
 .../5d822fd413a79914d39e98e4.md               | 147 +++
 .../5d822fd413a79914d39e98e5.md               | 161 ++++
 .../5d822fd413a79914d39e98e6.md               | 192 ++++
 .../5d822fd413a79914d39e98e7.md               | 253 +++++
 .../5d822fd413a79914d39e98e8.md               | 190 ++++
 .../5d822fd413a79914d39e98e9.md               | 223 +++++
 .../5d822fd413a79914d39e98ea.md               | 181 ++++
 .../5d822fd413a79914d39e98eb.md               | 203 +++++
 .../5d822fd413a79914d39e98ec.md               | 203 +++++
 .../5d822fd413a79914d39e98ed.md               | 202 ++++
 .../5d822fd413a79914d39e98ee.md               | 196 ++++
 .../5d822fd413a79914d39e98ef.md               | 197 ++++
 .../5d822fd413a79914d39e98f0.md               | 218 +++++
 .../5d822fd413a79914d39e98f1.md               | 223 +++++
 .../5d822fd413a79914d39e98f2.md               | 237 +++++
 .../5d822fd413a79914d39e98f3.md               | 222 +++++
 .../5d822fd413a79914d39e98f4.md               | 227 +++++
 .../5d822fd413a79914d39e98f5.md               | 198 ++++
 .../5d822fd413a79914d39e98f6.md               | 207 +++++
 .../5d822fd413a79914d39e98f7.md               | 203 +++++
 .../5d822fd413a79914d39e98f8.md               | 210 +++++
 .../5d822fd413a79914d39e98f9.md               | 207 +++++
 .../5d822fd413a79914d39e98fa.md               | 211 +++++
 .../5d822fd413a79914d39e98fb.md               | 240 +++++
 .../5d822fd413a79914d39e98fc.md               | 211 +++++
 .../5d822fd413a79914d39e98fd.md               | 209 +++++
 .../5d822fd413a79914d39e98fe.md               | 260 ++++++
 .../5d822fd413a79914d39e98ff.md               | 238 +++++
 .../5d822fd413a79914d39e9900.md               | 224 +++++
 .../5d822fd413a79914d39e9901.md               | 224 +++++
 .../5d822fd413a79914d39e9902.md               | 227 +++++
 .../5d822fd413a79914d39e9903.md               | 223 +++++
 .../5d822fd413a79914d39e9904.md               | 245 +++++
 .../5d822fd413a79914d39e9905.md               | 223 +++++
 .../5d822fd413a79914d39e9906.md               | 249 +++++
 .../5d822fd413a79914d39e9907.md               | 258 ++++++
 .../5d822fd413a79914d39e9908.md               | 258 ++++++
 .../5d822fd413a79914d39e9909.md               | 245 +++++
 .../5d822fd413a79914d39e990a.md               | 277 ++++++
 .../5d822fd413a79914d39e990b.md               | 254 ++++++
 .../5d822fd413a79914d39e990c.md               | 253 +++++
 .../5d822fd413a79914d39e990d.md               | 255 ++++++
 .../5d822fd413a79914d39e990e.md               | 265 ++++++
 .../5d822fd413a79914d39e990f.md               | 279 ++++++
 .../5d822fd413a79914d39e9910.md               | 266 ++++++
 .../5d822fd413a79914d39e9911.md               | 291 ++++++
 .../5d822fd413a79914d39e9912.md               | 287 ++++++
 .../5d822fd413a79914d39e9913.md               | 280 ++++++
 .../5d822fd413a79914d39e9914.md               | 284 ++++++
 .../5d822fd413a79914d39e9915.md               | 391 ++++++++
 .../5d822fd413a79914d39e9916.md               | 297 ++++++
 .../5d822fd413a79914d39e9917.md               | 307 +++++++
 .../5d822fd413a79914d39e9918.md               | 298 ++++++
 .../5d822fd413a79914d39e9919.md               | 301 ++++++
 .../5d822fd413a79914d39e991a.md               | 312 +++++++
 .../5d822fd413a79914d39e991b.md               | 314 +++++++
 .../5d822fd413a79914d39e991c.md               | 317 +++++++
 .../5d822fd413a79914d39e991d.md               | 315 +++++++
 .../5d822fd413a79914d39e991e.md               | 326 +++++++
 .../5d822fd413a79914d39e991f.md               | 324 +++++++
 .../5d822fd413a79914d39e9920.md               | 330 +++++++
 .../5d822fd413a79914d39e9921.md               | 348 +++++++
 .../5d822fd413a79914d39e9922.md               | 347 +++++++
 .../5d822fd413a79914d39e9923.md               | 348 +++++++
 .../5d822fd413a79914d39e9924.md               | 340 +++++++
 .../5d822fd413a79914d39e9925.md               | 346 +++++++
 .../5d822fd413a79914d39e9926.md               | 355 ++++++++
 .../5d822fd413a79914d39e9927.md               | 350 +++++++
 .../5d822fd413a79914d39e9928.md               | 349 +++++++
 .../5d822fd413a79914d39e9929.md               | 362 ++++++++
 .../5d822fd413a79914d39e992a.md               | 359 ++++++++
 .../5d822fd413a79914d39e992b.md               | 361 ++++++++
 .../5d822fd413a79914d39e992c.md               | 364 ++++++++
 .../5d822fd413a79914d39e992d.md               | 377 ++++++++
 .../5d822fd413a79914d39e992e.md               | 374 ++++++++
 .../5d822fd413a79914d39e992f.md               | 377 ++++++++
 .../5d822fd413a79914d39e9930.md               | 381 ++++++++
 .../5d822fd413a79914d39e9931.md               | 404 ++++++++
 .../5d822fd413a79914d39e9932.md               | 396 ++++++++
 .../5d822fd413a79914d39e9933.md               | 402 ++++++++
 .../5d822fd413a79914d39e9934.md               | 409 +++++++++
 .../5d822fd413a79914d39e9935.md               | 409 +++++++++
 .../5d822fd413a79914d39e9936.md               | 402 ++++++++
 .../5d822fd413a79914d39e9937.md               | 403 ++++++++
 .../5d822fd413a79914d39e9938.md               | 421 +++++++++
 .../5d822fd413a79914d39e9939.md               | 410 +++++++++
 .../5d822fd413a79914d39e993a.md               | 422 +++++++++
 .../5d822fd413a79914d39e993b.md               | 424 +++++++++
 .../5d822fd413a79914d39e993c.md               | 437 +++++++++
 .../5d822fd413a79914d39e993d.md               | 450 +++++++++
 .../5d822fd413a79914d39e993e.md               | 862 ++++++++++++++++++
 .../619665c9abd72906f3ad30f9.md               |  65 ++
 .../61967e74a8e3690ab6292daa.md               |  56 ++
 .../61968df2acd5550bf1616c34.md               |  53 ++
 .../61968e9243a4090cc805531c.md               |  51 ++
 .../61968f8877c6720d6d61aaf5.md               |  64 ++
 .../619691693bc14b0e528f5a20.md               |  66 ++
 .../6196928658b6010f28c39484.md               |  58 ++
 .../619692ff79f5770fc6d8c0b4.md               |  73 ++
 .../6196990f966e8f10a40094f6.md               |  75 ++
 .../619699c10a0f6e11591d73c4.md               |  74 ++
 .../61969aa6acef5b12200f672e.md               |  83 ++
 .../61969c487ced6f12db8fef94.md               |  89 ++
 .../61969d66cfcdba137d021558.md               |  76 ++
 .../61969e7451455614217e901b.md               |  91 ++
 .../6196adc17f77a714d51485f2.md               |  90 ++
 .../6196aead7ac7bf1584b17a7f.md               |  86 ++
 .../6196ce0415498d2463989e84.md               |  92 ++
 .../6196cee94c6da1253809dff9.md               | 100 ++
 .../6196d00a5d7292262bc02f4c.md               |  87 ++
 .../6196d0cda039d026f7f78d1e.md               | 100 ++
 .../6196d1ac33c68d27dcda5796.md               | 131 +++
 .../6196d213d99f16287bff22ae.md               | 104 +++
 .../6196d2c0f22ca0293107c048.md               | 112 +++
 .../6196d32d1340d829f0f6f57d.md               | 105 +++
 .../6196d41d40bf9b2aaea5d520.md               | 107 +++
 .../6197cff995d03905b0cca8ad.md               | 118 +++
 .../6197f40a16afea068c7e60c8.md               | 125 +++
 .../6197f667297bb30a552ce017.md               |  65 ++
 .../61993b72e874e709b8dfd666.md               | 128 +++
 .../61993cf26a8e0f0a553db223.md               | 122 +++
 .../61993dbb35adf30b10d49e38.md               | 139 +++
 .../61993e9adc9e9a0bb4d28fff.md               | 133 +++
 .../6199409834ccaf0d10736596.md               | 139 +++
 .../6199429802b7c10dc79ff871.md               | 154 ++++
 .../619943285a41720e6370d985.md               | 156 ++++
 .../619943876b706d0f35c01dbc.md               | 146 +++
 .../6199442866286d0ff421a4fc.md               | 148 +++
 .../619bcf239fc15905ecd66fce.md               | 145 +++
 .../619be73b3c806006ccc00bb0.md               | 158 ++++
 .../619be7af7b0bf60770f5d2a4.md               | 155 ++++
 .../619be80062551a080e32c821.md               | 160 ++++
 .../619be8ce4ea49008c5bfbc30.md               | 152 +++
 .../619be946958c6009844f1dee.md               | 166 ++++
 .../619c155df0063a0a3fec0e32.md               | 193 ++++
 .../619c16debd0c270b01c5ce38.md               | 165 ++++
 .../619cfdf2e63ddf05feab86ad.md               | 169 ++++
 .../619d019488f98c06acbbb71a.md               | 171 ++++
 .../619d022dc8400c0763829a17.md               | 177 ++++
 .../619d02c7bc95bf0827a5d296.md               | 181 ++++
 .../619d033915012509031f309a.md               | 184 ++++
 .../619d03dadadb6509a16f4f5f.md               | 210 +++++
 .../619d0503e03a790a4179d463.md               | 206 +++++
 .../619d05c54dabca0b10058235.md               | 197 ++++
 .../619d0882f54bf40bdc4671ed.md               | 197 ++++
 .../619d090cd8d6db0c93dc5087.md               | 222 +++++
 .../619d0b51ca42ed0d74582186.md               | 207 +++++
 .../619d0bc9cb05360e1bf549c3.md               | 200 ++++
 .../619d0c1594c38c0ebae75878.md               | 215 +++++
 .../619d0d18ca99870f884a7bff.md               | 225 +++++
 .../619d0daf214542102739b0da.md               | 227 +++++
 .../619d0e56f9ca9710fcb974e3.md               | 226 +++++
 .../619d0eec0ac40611b41e2ccc.md               | 247 +++++
 .../619d0fc9825c271253df28d4.md               | 238 +++++
 .../619d102d786c3d13124c37c6.md               | 231 +++++
 .../619d107edf7ddf13cc77106a.md               | 246 +++++
 .../619d10cc98145f14820399c5.md               | 271 ++++++
 .../619d115e2adcd71538e82ebb.md               | 256 ++++++
 .../619d11e6d5ef9515d2a16033.md               | 262 ++++++
 .../619d129a417d0716a94de913.md               | 267 ++++++
 .../619d1340361095175f4b5115.md               | 267 ++++++
 .../619d15797b580c1828b05426.md               | 263 ++++++
 .../619d15d955d9d418c4487bbc.md               | 264 ++++++
 .../619d1629a8adc61960ca8b40.md               | 278 ++++++
 .../619d1c5fc9f8941a400955da.md               | 272 ++++++
 .../619d1dab9ff3421ae1976991.md               | 273 ++++++
 .../619d1deb8b04811b8839ffe4.md               | 281 ++++++
 .../619d1e7a8e81a61c5a819dc4.md               | 272 ++++++
 .../619d1ed33c9a071cf657a0d6.md               | 306 +++++++
 .../619d1fb5d244c31db8a7fdb7.md               | 295 ++++++
 .../619d204bd73ae51e743b8e94.md               | 288 ++++++
 .../619d20b12996101f430920fb.md               | 304 ++++++
 .../619d21fe6a3f9b2016be9d9d.md               | 304 ++++++
 .../619d229b0e542520cd91c685.md               | 312 +++++++
 .../619d23089e787e216a7043d6.md               | 295 ++++++
 .../619d237a107c10221ed743fa.md               | 328 +++++++
 .../619d26b12e651022d80cd017.md               | 317 +++++++
 .../619d2712853306238f41828e.md               | 332 +++++++
 .../619d2b7a84e78b246f2d17a2.md               | 340 +++++++
 .../619d2bd9c1d43c2526e96f1f.md               | 325 +++++++
 .../619d2d4e80400325ff89664a.md               | 326 +++++++
 .../619d2ebc81ba81271460850d.md               | 326 +++++++
 .../619d2f0e9440bc27caee1cec.md               | 327 +++++++
 .../619d2fd3ff4f772882e3d998.md               | 323 +++++++
 .../619d30350883802921bfcccc.md               | 333 +++++++
 .../619d324f5915c929f36ae91d.md               | 351 +++++++
 .../619d32c7fa21f32aaa91d499.md               | 347 +++++++
 .../619d333b738e3c2b5d58b095.md               | 347 +++++++
 .../619d337765b9f02c10e93722.md               | 362 ++++++++
 .../619d33c51140292cc5a21742.md               | 357 ++++++++
 .../619d3482f505452d861d0f62.md               | 347 +++++++
 .../619d3561a951bf2e41a24f10.md               | 346 +++++++
 .../619d36103839c82efa95dd34.md               | 357 ++++++++
 .../619d3711d04d623000013e9e.md               | 670 ++++++++++++++
 .../61a8fe15a6a31306e60d1e89.md               |  55 ++
 .../61537bb9b1a29430ac15ad38.md               |  43 +
 .../61537c5f81f0cf325b4a854c.md               |  62 ++
 .../61537c9eecea6a335db6da79.md               |  65 ++
 .../61537d86bdc3dd343688fceb.md               | 111 +++
 .../615380dff67172357fcf0425.md               |  83 ++
 .../6153893900438b4643590367.md               | 112 +++
 .../6153897c27f6334716ee5abe.md               |  93 ++
 .../6153908a366afb4d57185c8d.md               |  94 ++
 .../615392916d83fa4f02f7e2cf.md               |  88 ++
 .../6153938dce8b294ff8f5a4e9.md               |  87 ++
 .../6153947986535e5117e60615.md               |  88 ++
 .../61539e07e7430b528fbffe21.md               | 104 +++
 .../61539f32a206bd53ec116465.md               |  92 ++
 .../6153a04847abee57a3a406ac.md               |  95 ++
 .../6153a3485f0b20591d26d2a1.md               |  92 ++
 .../6153a3952facd25a83fe8083.md               | 112 +++
 .../6153a3ebb4f7f05b8401b716.md               | 181 ++++
 .../615f171d05def3218035dc85.md               |  92 ++
 .../6493bc0d99879635209565aa.md               |  75 ++
 .../6494da0daf5df5197963671d.md               |  83 ++
 .../64dd076a1b33c86d84b4232f.md               | 126 +++
 .../64dd136e4e8b0894f9c70d86.md               |  79 ++
 .../66c8ba975ee7230e29f6c4ad.md               |   2 +-
 .../615f2abbe7d18d49a1e0e1c8.md               |  58 ++
 .../615f2d4150fe0d4cbd0f2628.md               |  62 ++
 .../615f34948891834dd77655a6.md               |  63 ++
 .../615f34ecc1091b4fd5a8a484.md               |  88 ++
 .../615f357957e370510f21ea16.md               |  55 ++
 .../615f378014c2da526a109c81.md               |  57 ++
 .../615f38279e5c3d53692ea441.md               |  66 ++
 .../615f38cabc64e3556f98cc1a.md               |  65 ++
 .../615f3949f58e12577dcefb00.md               |  61 ++
 .../615f39d7da41b15851fa3fb9.md               |  66 ++
 .../615f3b091162165948e1cb33.md               |  72 ++
 .../615f3cafd794015aa9547a6d.md               |  76 ++
 .../615f3d9e59db4b5b8e960762.md               |  70 ++
 .../615f3e1b7233ee5c7595771f.md               |  71 ++
 .../615f3e4af8008c5d494d3afe.md               |  80 ++
 .../615f3ed16592445e57941aec.md               |  96 ++
 .../615f405b89a7ec5f8e2d11f4.md               |  91 ++
 .../615f40b01f680e608d360ed4.md               |  84 ++
 .../615f4172e9eec061d6456221.md               |  91 ++
 .../615f41c979787462e76dab90.md               | 104 +++
 .../615f423cf65d5864132a0956.md               |  86 ++
 .../615f42a021625f656101ef93.md               | 100 ++
 .../615f4bfb9de4a16703b56eb6.md               |  92 ++
 .../615f4ce9d877b668417c0c42.md               | 104 +++
 .../615f4dde9d72e3694cb9ee3b.md               | 105 +++
 .../615f4ec58334106a4170c2a8.md               | 105 +++
 .../615f4f9e4a40566b776a8f38.md               | 111 +++
 .../615f50473cc0196c6dd3892a.md               | 101 ++
 .../615f51257a8a516d80b6c743.md               | 113 +++
 .../615f51e4e5b24a6e80eccce1.md               | 128 +++
 .../615f522dea4f776f64dc3e91.md               | 115 +++
 .../615f5486b8fd4b71633f69b0.md               | 143 +++
 .../615f575b50b91e72af079480.md               | 144 +++
 .../615f5af373a68e744a3c5a76.md               | 141 +++
 .../615f5fd85d0062761f288364.md               | 134 +++
 .../615f61338c8ca176d6445574.md               | 141 +++
 .../615f666ac5edea782feb7e75.md               | 142 +++
 .../615f671b6d1919792745aa5d.md               | 167 ++++
 .../615f6823d0815b7a991f2a75.md               | 157 ++++
 .../615f6b2d164f81809efd9bdc.md               | 182 ++++
 .../615f6cc778f7698258467596.md               | 172 ++++
 .../615f6fddaac1e083502d3e6a.md               | 148 +++
 .../615f70077a4ff98424236c1e.md               | 163 ++++
 .../615f72a872354a850d4f533e.md               | 160 ++++
 .../615f74a71f1e498619e38ee8.md               | 166 ++++
 .../615f7ad94380408d971d14f6.md               | 181 ++++
 .../615f7bc680f7168ea01ebf99.md               | 165 ++++
 .../615f7c71eab8218f846e4503.md               | 196 ++++
 .../615f7d489a581590d1350288.md               | 165 ++++
 .../615f7de4487b64919bb4aa5e.md               | 215 +++++
 .../615f7e7281626a92bbd62da8.md               | 205 +++++
 .../615f7ecb09de9a938ef94756.md               | 210 +++++
 .../615f7fa959ab75948f96a0d6.md               | 183 ++++
 .../615f808d85793195b0f53be9.md               | 185 ++++
 .../615f829d07b18f96f6f6684b.md               | 169 ++++
 .../615f83ef928ec9982b785b6a.md               | 182 ++++
 .../615f84f246e8ba98e3cd97be.md               | 211 +++++
 .../615f887466db4ba14b5342cc.md               | 208 +++++
 .../615f89e055040ba294719d2f.md               | 195 ++++
 .../615f8bfe0f30a1a3c340356b.md               | 219 +++++
 .../615f8f1223601fa546e93f31.md               | 202 ++++
 .../615f905fbd1017a65ca224eb.md               | 211 +++++
 .../615f94786869e1a7fec54375.md               | 196 ++++
 .../615f951dff9317a900ef683f.md               | 365 ++++++++
 .../635bde33c91c80540eae239b.md               | 153 ++++
 .../6395d33ab5d91bf317107c48.md               | 117 +++
 .../6396e33fe478dd264ebbf278.md               | 135 +++
 .../667d1bb875f5961913176069.md               | 147 +++
 .../612e78af05201622d4bab8aa.md               |  58 ++
 .../612e7d1c29fb872d6384379c.md               |  60 ++
 .../612e804c54d5e7308d7ebe56.md               |  60 ++
 .../612e813b3ba67633222cbe54.md               |  95 ++
 .../612e8279827a28352ce83a72.md               |  74 ++
 .../612e83ec2eca1e370f830511.md               | 107 +++
 .../612e89562043183c86df287c.md               |  77 ++
 .../612e89d254fe5d3df7d6693d.md               |  83 ++
 .../612e8eebe3a6dc3fcc33a66f.md               |  95 ++
 .../612e95ef2e4bdf41f69067f9.md               |  81 ++
 .../612e96fc87fe8e44f69f7ec5.md               | 102 +++
 .../612e98f3245c98475e49cfc6.md               |  88 ++
 .../612e9a21381a1949327512e6.md               |  89 ++
 .../612e9d142affc44a453655db.md               | 117 +++
 .../612e9f1e7e5ccd4fa9ada0be.md               | 103 +++
 .../612ea4c4993aba52ab4aa32e.md               | 119 +++
 .../612ea97df5742154772f312e.md               | 110 +++
 .../612ead8788d28655ef8db056.md               | 112 +++
 .../612eaf56b7ba3257fdbfb0db.md               | 144 +++
 .../612eb4893b63c75bb9251ddf.md               | 129 +++
 .../612eb75153591b5e3b1ab65e.md               | 115 +++
 .../612eb7ca8c275d5f89c73333.md               | 116 +++
 .../612eb8e984cd73677a92b7e9.md               | 117 +++
 .../612eb934f64a4d6890a45518.md               | 118 +++
 .../612ebcba99bfa46a15370b11.md               | 139 +++
 .../612ebe7fe6d07e6b76d1cae2.md               | 133 +++
 .../612ebedec97e096c8bf64999.md               | 136 +++
 .../612ebf9a210f2b6d77001e68.md               | 139 +++
 .../612ec0490ae8626e9adf82e4.md               | 133 +++
 .../612ec19d5268da7074941f84.md               | 154 ++++
 .../612ec29c84b9a6718b1f5cec.md               | 288 ++++++
 .../66fbcdfed6848e48947dbbc9.md               |  36 +
 .../66fbcf750a62784cf11f562d.md               |  81 ++
 .../66fbcf750a62784cf11f562e.md               | 152 +++
 .../66fbcf750a62784cf11f5630.md               |  98 ++
 .../66fbcf750a62784cf11f5631.md               | 104 +++
 .../66fbcf750a62784cf11f5632.md               | 105 +++
 .../66fbcf750a62784cf11f5633.md               | 106 +++
 .../66fbcf750a62784cf11f5634.md               | 133 +++
 .../66fbcf750a62784cf11f5635.md               | 124 +++
 .../66fbcf750a62784cf11f5636.md               | 124 +++
 .../66fbcf750a62784cf11f5637.md               | 186 ++++
 .../66ff02792b3042a2b811f475.md               |  86 ++
 .../670e4f45f7116c0f216a5177.md               | 135 +++
 .../60a3e3396c7b40068ad6996b.md               |  43 +
 .../60a3e3396c7b40068ad6996c.md               |  42 +
 .../60a3e3396c7b40068ad6996d.md               |  41 +
 .../60a3e3396c7b40068ad6996e.md               |  43 +
 .../60a3e3396c7b40068ad6996f.md               |  47 +
 .../60a3e3396c7b40068ad69970.md               |  53 ++
 .../60a3e3396c7b40068ad69971.md               |  67 ++
 .../60a3e3396c7b40068ad69972.md               |  54 ++
 .../60a3e3396c7b40068ad69973.md               |  55 ++
 .../60a3e3396c7b40068ad69974.md               |  67 ++
 .../60a3e3396c7b40068ad69975.md               |  67 ++
 .../60a3e3396c7b40068ad69976.md               |  64 ++
 .../60a3e3396c7b40068ad69977.md               |  65 ++
 .../60a3e3396c7b40068ad69978.md               |  66 ++
 .../60a3e3396c7b40068ad69979.md               |  71 ++
 .../60a3e3396c7b40068ad6997a.md               |  74 ++
 .../60a3e3396c7b40068ad6997b.md               |  70 ++
 .../60a3e3396c7b40068ad6997c.md               |  71 ++
 .../60a3e3396c7b40068ad6997d.md               |  74 ++
 .../60a3e3396c7b40068ad6997e.md               |  75 ++
 .../60a3e3396c7b40068ad6997f.md               |  82 ++
 .../60a3e3396c7b40068ad69980.md               |  84 ++
 .../60a3e3396c7b40068ad69981.md               |  84 ++
 .../60a3e3396c7b40068ad69982.md               |  79 ++
 .../60a3e3396c7b40068ad69983.md               |  80 ++
 .../60a3e3396c7b40068ad69984.md               |  81 ++
 .../60a3e3396c7b40068ad69986.md               |  93 ++
 .../60a3e3396c7b40068ad69987.md               |  94 ++
 .../60a3e3396c7b40068ad69988.md               |  87 ++
 .../60a3e3396c7b40068ad69989.md               |  88 ++
 .../60a3e3396c7b40068ad6998a.md               |  89 ++
 .../60a3e3396c7b40068ad6998b.md               |  93 ++
 .../60a3e3396c7b40068ad6998c.md               | 100 ++
 .../60a3e3396c7b40068ad6998d.md               | 108 +++
 .../60a3e3396c7b40068ad6998e.md               |  95 ++
 .../60a3e3396c7b40068ad6998f.md               |  98 ++
 .../60a3e3396c7b40068ad69990.md               |  97 ++
 .../60a3e3396c7b40068ad69991.md               |  98 ++
 .../60a3e3396c7b40068ad69992.md               | 101 ++
 .../60a3e3396c7b40068ad69993.md               | 100 ++
 .../60a3e3396c7b40068ad69994.md               | 103 +++
 .../60a3e3396c7b40068ad69995.md               | 104 +++
 .../60a3e3396c7b40068ad69996.md               | 103 +++
 .../60a3e3396c7b40068ad69997.md               | 180 ++++
 .../5dc17d3bf86c76b9248c6eb4.md               |   6 +-
 .../5dc17dc8f86c76b9248c6eb5.md               |  11 +-
 .../5dc2385ff86c76b9248c6eb7.md               |   8 +-
 .../5dc23991f86c76b9248c6eb8.md               |  12 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../5dc24073f86c76b9248c6ebb.md               |   8 +-
 .../5dc24165f86c76b9248c6ebc.md               |   2 +-
 .../5dc24614f86c76b9248c6ebd.md               |   2 +-
 .../5ddbd81294d8ddc1510a8e56.md               |  12 +-
 .../5dfa2407b521be39a3de7be1.md               |  15 +-
 .../5dfa30b9eacea3f48c6300ad.md               |  10 +-
 .../5dfa3589eacea3f48c6300ae.md               |   6 +-
 .../5dfa371beacea3f48c6300af.md               |   6 +-
 .../5dfa37b9eacea3f48c6300b0.md               |   6 +-
 .../5dfb5ecbeacea3f48c6300b1.md               |   6 +-
 .../5dfb6250eacea3f48c6300b2.md               |   6 +-
 .../5dfb655eeacea3f48c6300b3.md               |  12 +-
 .../5dfb6a35eacea3f48c6300b4.md               |   6 +-
 .../5ef9b03c81a63668521804d0.md               |   6 +-
 .../5ef9b03c81a63668521804d1.md               |   6 +-
 .../5ef9b03c81a63668521804d2.md               |   6 +-
 .../5ef9b03c81a63668521804d3.md               |   6 +-
 .../5ef9b03c81a63668521804d4.md               |   6 +-
 .../5ef9b03c81a63668521804d5.md               |   6 +-
 .../5ef9b03c81a63668521804d6.md               |   6 +-
 .../5ef9b03c81a63668521804d7.md               |   6 +-
 .../5ef9b03c81a63668521804d8.md               |   6 +-
 .../5ef9b03c81a63668521804d9.md               |   6 +-
 .../5ef9b03c81a63668521804da.md               |   6 +-
 .../5ef9b03c81a63668521804db.md               |   6 +-
 .../5ef9b03c81a63668521804dc.md               |   6 +-
 .../5ef9b03c81a63668521804dd.md               |   6 +-
 .../5ef9b03c81a63668521804de.md               |   7 +-
 .../5ef9b03c81a63668521804df.md               |   6 +-
 .../5ef9b03c81a63668521804e1.md               |   6 +-
 .../5ef9b03c81a63668521804e2.md               |   6 +-
 .../5ef9b03c81a63668521804e3.md               |   6 +-
 .../5ef9b03c81a63668521804e5.md               |   6 +-
 .../5ef9b03c81a63668521804e7.md               |   6 +-
 .../5ef9b03c81a63668521804e8.md               |  10 +-
 .../5ef9b03c81a63668521804e9.md               |   8 +-
 .../5ef9b03c81a63668521804ea.md               |   6 +-
 .../5ef9b03c81a63668521804eb.md               |   6 +-
 .../5ef9b03c81a63668521804ec.md               |   6 +-
 .../5ef9b03c81a63668521804ee.md               |   6 +-
 .../5efada803cbd2bbdab94e332.md               |  13 +-
 .../5efae0543cbd2bbdab94e333.md               |   6 +-
 .../5efae16e3cbd2bbdab94e334.md               |   6 +-
 .../5efb23e70dc218d6c85f89b1.md               |   6 +-
 .../5efb2c990dc218d6c85f89b2.md               |   6 +-
 .../5efc4f528d6a74d05e68af74.md               |   6 +-
 .../5efc518e8d6a74d05e68af75.md               |   6 +-
 .../5efc54138d6a74d05e68af76.md               |   6 +-
 .../5efc575c8d6a74d05e68af77.md               |   6 +-
 .../5f05a1d8e233dff4a68508d8.md               |   6 +-
 .../5f07be6ef7412fbad0c5626b.md               |  12 +-
 .../5f07c98cdb9413cbd4b16750.md               |   6 +-
 .../5f07fb1579dc934717801375.md               |   6 +-
 .../5f0d48e7b435f13ab6550051.md               |   6 +-
 .../5f0d4ab1b435f13ab6550052.md               |   6 +-
 .../5f0d4d04b435f13ab6550053.md               |   6 +-
 .../5f1a80975fc4bcae0edb3497.md               |   7 +-
 .../5f1a89f1190aff21ae42105a.md               |   6 +-
 .../62bb4009e3458a128ff57d5d.md               |   8 +-
 .../671141d8e32fe934c26fa1be.md               |  57 ++
 .../671141f948cbab359e74cc93.md               |  48 +
 .../671141feba228a35cefba82d.md               |  57 ++
 .../671144cdcc01d73f7dd79dc9.md               |  47 +
 .../7cf9b03d81a65668421804c3.md               |   6 +-
 .../66edd630f7666cfa54b404d0.md               | 200 ++--
 .../66ed8ff4f45ce3ece4053eb4.md               | 200 ++--
 .../66f1af82732957c895f0b21a.md               | 200 ++--
 .../619665c9abd72906f3ad30f9.md               |  65 ++
 .../61967e74a8e3690ab6292daa.md               |  56 ++
 .../61968df2acd5550bf1616c34.md               |  53 ++
 .../61968e9243a4090cc805531c.md               |  51 ++
 .../61968f8877c6720d6d61aaf5.md               |  64 ++
 .../619691693bc14b0e528f5a20.md               |  66 ++
 .../6196928658b6010f28c39484.md               |  58 ++
 .../619692ff79f5770fc6d8c0b4.md               |  73 ++
 .../6196990f966e8f10a40094f6.md               |  75 ++
 .../619699c10a0f6e11591d73c4.md               |  74 ++
 .../61969aa6acef5b12200f672e.md               |  83 ++
 .../61969c487ced6f12db8fef94.md               |  89 ++
 .../61969d66cfcdba137d021558.md               |  76 ++
 .../61969e7451455614217e901b.md               |  91 ++
 .../6196adc17f77a714d51485f2.md               |  90 ++
 .../6196aead7ac7bf1584b17a7f.md               |  86 ++
 .../6196ce0415498d2463989e84.md               |  92 ++
 .../6196cee94c6da1253809dff9.md               | 100 ++
 .../6196d00a5d7292262bc02f4c.md               |  87 ++
 .../6196d0cda039d026f7f78d1e.md               | 100 ++
 .../6196d1ac33c68d27dcda5796.md               | 131 +++
 .../6196d213d99f16287bff22ae.md               | 104 +++
 .../6196d2c0f22ca0293107c048.md               | 112 +++
 .../6196d32d1340d829f0f6f57d.md               | 105 +++
 .../6196d41d40bf9b2aaea5d520.md               | 107 +++
 .../6197cff995d03905b0cca8ad.md               | 118 +++
 .../6197f40a16afea068c7e60c8.md               | 125 +++
 .../6197f667297bb30a552ce017.md               |  65 ++
 .../61993b72e874e709b8dfd666.md               | 128 +++
 .../61993cf26a8e0f0a553db223.md               | 122 +++
 .../61993dbb35adf30b10d49e38.md               | 139 +++
 .../61993e9adc9e9a0bb4d28fff.md               | 133 +++
 .../6199409834ccaf0d10736596.md               | 139 +++
 .../6199429802b7c10dc79ff871.md               | 154 ++++
 .../619943285a41720e6370d985.md               | 156 ++++
 .../619943876b706d0f35c01dbc.md               | 146 +++
 .../6199442866286d0ff421a4fc.md               | 148 +++
 .../619bcf239fc15905ecd66fce.md               | 145 +++
 .../619be73b3c806006ccc00bb0.md               | 158 ++++
 .../619be7af7b0bf60770f5d2a4.md               | 155 ++++
 .../619be80062551a080e32c821.md               | 160 ++++
 .../619be8ce4ea49008c5bfbc30.md               | 152 +++
 .../619be946958c6009844f1dee.md               | 166 ++++
 .../619c155df0063a0a3fec0e32.md               | 193 ++++
 .../619c16debd0c270b01c5ce38.md               | 165 ++++
 .../619cfdf2e63ddf05feab86ad.md               | 169 ++++
 .../619d019488f98c06acbbb71a.md               | 171 ++++
 .../619d022dc8400c0763829a17.md               | 177 ++++
 .../619d02c7bc95bf0827a5d296.md               | 181 ++++
 .../619d033915012509031f309a.md               | 184 ++++
 .../619d03dadadb6509a16f4f5f.md               | 210 +++++
 .../619d0503e03a790a4179d463.md               | 206 +++++
 .../619d05c54dabca0b10058235.md               | 197 ++++
 .../619d0882f54bf40bdc4671ed.md               | 197 ++++
 .../619d090cd8d6db0c93dc5087.md               | 222 +++++
 .../619d0b51ca42ed0d74582186.md               | 207 +++++
 .../619d0bc9cb05360e1bf549c3.md               | 200 ++++
 .../619d0c1594c38c0ebae75878.md               | 215 +++++
 .../619d0d18ca99870f884a7bff.md               | 225 +++++
 .../619d0daf214542102739b0da.md               | 227 +++++
 .../619d0e56f9ca9710fcb974e3.md               | 226 +++++
 .../619d0eec0ac40611b41e2ccc.md               | 247 +++++
 .../619d0fc9825c271253df28d4.md               | 238 +++++
 .../619d102d786c3d13124c37c6.md               | 231 +++++
 .../619d107edf7ddf13cc77106a.md               | 246 +++++
 .../619d10cc98145f14820399c5.md               | 271 ++++++
 .../619d115e2adcd71538e82ebb.md               | 256 ++++++
 .../619d11e6d5ef9515d2a16033.md               | 262 ++++++
 .../619d129a417d0716a94de913.md               | 267 ++++++
 .../619d1340361095175f4b5115.md               | 267 ++++++
 .../619d15797b580c1828b05426.md               | 263 ++++++
 .../619d15d955d9d418c4487bbc.md               | 264 ++++++
 .../619d1629a8adc61960ca8b40.md               | 278 ++++++
 .../619d1c5fc9f8941a400955da.md               | 272 ++++++
 .../619d1dab9ff3421ae1976991.md               | 273 ++++++
 .../619d1deb8b04811b8839ffe4.md               | 281 ++++++
 .../619d1e7a8e81a61c5a819dc4.md               | 272 ++++++
 .../619d1ed33c9a071cf657a0d6.md               | 306 +++++++
 .../619d1fb5d244c31db8a7fdb7.md               | 295 ++++++
 .../619d204bd73ae51e743b8e94.md               | 288 ++++++
 .../619d20b12996101f430920fb.md               | 304 ++++++
 .../619d21fe6a3f9b2016be9d9d.md               | 304 ++++++
 .../619d229b0e542520cd91c685.md               | 312 +++++++
 .../619d23089e787e216a7043d6.md               | 295 ++++++
 .../619d237a107c10221ed743fa.md               | 328 +++++++
 .../619d26b12e651022d80cd017.md               | 317 +++++++
 .../619d2712853306238f41828e.md               | 332 +++++++
 .../619d2b7a84e78b246f2d17a2.md               | 340 +++++++
 .../619d2bd9c1d43c2526e96f1f.md               | 325 +++++++
 .../619d2d4e80400325ff89664a.md               | 326 +++++++
 .../619d2ebc81ba81271460850d.md               | 326 +++++++
 .../619d2f0e9440bc27caee1cec.md               | 327 +++++++
 .../619d2fd3ff4f772882e3d998.md               | 323 +++++++
 .../619d30350883802921bfcccc.md               | 333 +++++++
 .../619d324f5915c929f36ae91d.md               | 351 +++++++
 .../619d32c7fa21f32aaa91d499.md               | 347 +++++++
 .../619d333b738e3c2b5d58b095.md               | 347 +++++++
 .../619d337765b9f02c10e93722.md               | 362 ++++++++
 .../619d33c51140292cc5a21742.md               | 357 ++++++++
 .../619d3482f505452d861d0f62.md               | 347 +++++++
 .../619d3561a951bf2e41a24f10.md               | 346 +++++++
 .../619d36103839c82efa95dd34.md               | 357 ++++++++
 .../619d3711d04d623000013e9e.md               | 670 ++++++++++++++
 .../61a8fe15a6a31306e60d1e89.md               |  55 ++
 .../algorithms/implement-binary-search.md     |   6 +-
 ...d-a-new-element-to-a-binary-search-tree.md |   2 +-
 .../build-a-nightlife-coordination-app.md     |   6 +-
 .../take-home-projects/build-a-simon-game.md  |   2 +-
 .../5d822fd413a79914d39e9904.md               |  20 +-
 .../5dc17d3bf86c76b9248c6eb4.md               |   6 +-
 .../5dc17dc8f86c76b9248c6eb5.md               |  11 +-
 .../5dc2385ff86c76b9248c6eb7.md               |   8 +-
 .../5dc23991f86c76b9248c6eb8.md               |  12 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../5dc24073f86c76b9248c6ebb.md               |   8 +-
 .../5dc24165f86c76b9248c6ebc.md               |   2 +-
 .../5dc24614f86c76b9248c6ebd.md               |   2 +-
 .../5ddbd81294d8ddc1510a8e56.md               |  12 +-
 .../5dfa2407b521be39a3de7be1.md               |  15 +-
 .../5dfa30b9eacea3f48c6300ad.md               |  10 +-
 .../5dfa3589eacea3f48c6300ae.md               |   6 +-
 .../5dfa371beacea3f48c6300af.md               |   6 +-
 .../5dfa37b9eacea3f48c6300b0.md               |   6 +-
 .../5dfb5ecbeacea3f48c6300b1.md               |   6 +-
 .../5dfb6250eacea3f48c6300b2.md               |   6 +-
 .../5dfb655eeacea3f48c6300b3.md               |  12 +-
 .../5dfb6a35eacea3f48c6300b4.md               |   6 +-
 .../5ef9b03c81a63668521804d0.md               |   6 +-
 .../5ef9b03c81a63668521804d1.md               |   6 +-
 .../5ef9b03c81a63668521804d2.md               |   6 +-
 .../5ef9b03c81a63668521804d3.md               |   6 +-
 .../5ef9b03c81a63668521804d4.md               |   6 +-
 .../5ef9b03c81a63668521804d5.md               |   6 +-
 .../5ef9b03c81a63668521804d6.md               |   6 +-
 .../5ef9b03c81a63668521804d7.md               |   6 +-
 .../5ef9b03c81a63668521804d8.md               |   6 +-
 .../5ef9b03c81a63668521804d9.md               |   6 +-
 .../5ef9b03c81a63668521804da.md               |   6 +-
 .../5ef9b03c81a63668521804db.md               |   6 +-
 .../5ef9b03c81a63668521804dc.md               |   6 +-
 .../5ef9b03c81a63668521804dd.md               |   6 +-
 .../5ef9b03c81a63668521804de.md               |   7 +-
 .../5ef9b03c81a63668521804df.md               |   6 +-
 .../5ef9b03c81a63668521804e1.md               |   6 +-
 .../5ef9b03c81a63668521804e2.md               |   6 +-
 .../5ef9b03c81a63668521804e3.md               |   6 +-
 .../5ef9b03c81a63668521804e5.md               |   6 +-
 .../5ef9b03c81a63668521804e7.md               |   6 +-
 .../5ef9b03c81a63668521804e8.md               |  10 +-
 .../5ef9b03c81a63668521804e9.md               |   8 +-
 .../5ef9b03c81a63668521804ea.md               |   6 +-
 .../5ef9b03c81a63668521804eb.md               |   6 +-
 .../5ef9b03c81a63668521804ec.md               |   6 +-
 .../5ef9b03c81a63668521804ee.md               |   6 +-
 .../5efada803cbd2bbdab94e332.md               |  13 +-
 .../5efae0543cbd2bbdab94e333.md               |   6 +-
 .../5efae16e3cbd2bbdab94e334.md               |   6 +-
 .../5efb23e70dc218d6c85f89b1.md               |   6 +-
 .../5efb2c990dc218d6c85f89b2.md               |   6 +-
 .../5efc4f528d6a74d05e68af74.md               |   6 +-
 .../5efc518e8d6a74d05e68af75.md               |   6 +-
 .../5efc54138d6a74d05e68af76.md               |   6 +-
 .../5efc575c8d6a74d05e68af77.md               |   6 +-
 .../5f05a1d8e233dff4a68508d8.md               |   6 +-
 .../5f07be6ef7412fbad0c5626b.md               |  12 +-
 .../5f07c98cdb9413cbd4b16750.md               |   6 +-
 .../5f07fb1579dc934717801375.md               |   6 +-
 .../5f0d48e7b435f13ab6550051.md               |   6 +-
 .../5f0d4ab1b435f13ab6550052.md               |   6 +-
 .../5f0d4d04b435f13ab6550053.md               |   6 +-
 .../5f1a80975fc4bcae0edb3497.md               |   7 +-
 .../5f1a89f1190aff21ae42105a.md               |   6 +-
 .../62bb4009e3458a128ff57d5d.md               |   8 +-
 .../671141d8e32fe934c26fa1be.md               |  57 ++
 .../671141f948cbab359e74cc93.md               |  48 +
 .../671141feba228a35cefba82d.md               |  57 ++
 .../671144cdcc01d73f7dd79dc9.md               |  47 +
 .../7cf9b03d81a65668421804c3.md               |   6 +-
 .../657ddcd61f516cacdc7a04ca.md               |  30 +-
 .../657e4e3b02a2128049c344c8.md               |  30 +-
 .../66b205e6eacba4c4e54ea434.md               |   4 +-
 .../66c06fad3475cd92421b9ac2.md               |   4 +-
 .../587d78af367417b2b2512b04.md               |   2 +-
 .../669e2f60e83c011754f711f9.md               |   2 +-
 .../bd7158d8c442eddfaeb5bd18.md               |   2 +-
 .../670803abcb3e980233da4768.md               | 121 +++
 .../6708143cab2b583ecd3324f5.md               | 121 +++
 .../6708382cf088b216580a9ff1.md               | 125 +++
 .../67083868d5fdcb17bf8c14bd.md               | 121 +++
 .../670838977810401844af6fe0.md               | 121 +++
 .../670838b10ee87a18e5faff62.md               | 121 +++
 .../670838e914096b194b0c51aa.md               | 121 +++
 .../670839051794aa19fcef6dc8.md               | 120 +++
 .../67083952f800051a8a21fcfd.md               | 121 +++
 .../6708396caa00e11b597b3365.md               | 121 +++
 .../66edd630f7666cfa54b404d0.md               | 200 ++--
 .../66ed8fa2f45ce3ece4053eab.md               |   2 +-
 .../66ed8ff4f45ce3ece4053eb4.md               | 200 ++--
 .../66edd3403d7077eece6dc4b6.md               | 200 ++--
 .../66edd4bc0ce399f475ad6f9b.md               | 200 ++--
 .../quiz-nano/66f1b03b922a53cb231e1c0d.md     |   2 +-
 .../66f1a2009e65c9a40a26d51e.md               | 201 ++--
 .../66f1af82732957c895f0b21a.md               | 200 ++--
 .../66ed9034f45ce3ece4053ebd.md               | 200 ++--
 .../66ed9043f45ce3ece4053ebf.md               | 200 ++--
 .../61fd5a93fd62bb35968adeab.md               |  61 ++
 .../61fd6343fb42013d99bcd7f3.md               |  48 +
 .../61fd66c687e610436494c6f1.md               |  52 ++
 .../61fd67a656743144844941cb.md               |  78 ++
 .../61fd6ab779390f49148773bb.md               |  65 ++
 .../61fd6b7c83dbf54a08cf0498.md               |  79 ++
 .../61fd6cc9475a784b7776233e.md               |  80 ++
 .../61fd70336ebb3e4f62ee81ba.md               |  73 ++
 .../61fd719788899952e67692b9.md               |  86 ++
 .../61fd71d596e8f253b9408b39.md               |  86 ++
 .../61fd75ea7f663457612dba02.md               | 125 +++
 .../61fd7648a7ba2e5882436831.md               |  96 ++
 .../61fd778081276b59d59abad6.md               | 134 +++
 .../61fd77f7ad2aeb5ae34d07d6.md               | 138 +++
 .../61fd78621573aa5e8b512f5e.md               | 142 +++
 .../61fd7a160ed17960e971f28b.md               | 146 +++
 .../61fd7b3fcaa5406257abc5d1.md               | 130 +++
 .../61fd8e491324ce717da97ffe.md               | 119 +++
 .../61fd8fd08af43372f02952d0.md               | 149 +++
 .../61fd9126aa72a474301fc49f.md               | 131 +++
 .../61fd933ba685de776a94997e.md               | 169 ++++
 .../61fd94056e0355785fbba4d3.md               | 173 ++++
 .../61fd986ddbcbd47ba8fbc5ec.md               | 177 ++++
 .../61fd990577d8227dd93fbeeb.md               | 181 ++++
 .../61fd9a4ff2fc4481b9157bd7.md               | 165 ++++
 .../61fd9ad665a4a282c8106be3.md               | 198 ++++
 .../61fd9b7285bde783ad5b8aac.md               | 208 +++++
 .../61fd9d9fbdfe078800317055.md               | 158 ++++
 .../61fda307bde0b091cf7d884a.md               | 168 ++++
 .../61fda339eadcfd92a6812bed.md               | 171 ++++
 .../61fdac1e31692f9a9ad97295.md               | 172 ++++
 .../61fdaea3999cb19d76ce717b.md               | 172 ++++
 .../61fdaf9ff894b6a084ecdc1b.md               | 174 ++++
 .../61fdafe6f07fd7a1c6785bc2.md               | 182 ++++
 .../61fdb04d9939f0a26ca51c2b.md               | 192 ++++
 .../620159cd5431aa34bc6a4c9c.md               | 198 ++++
 .../62015a5da1c95c358f079ebb.md               | 194 ++++
 .../62015cd2654a1139321a89d2.md               | 196 ++++
 .../62015d8942384c3aed48329e.md               | 212 +++++
 .../620167374bb8b4455cd11125.md               | 224 +++++
 .../620174ed519dd7506c1a4b61.md               | 212 +++++
 .../620175b3710a0951cfa86edf.md               | 223 +++++
 .../6201782cc420715562f36271.md               | 232 +++++
 .../620179bc0a6a2358c72b90ad.md               | 224 +++++
 .../62017b6f47454059bf2d3bd1.md               | 230 +++++
 .../62017f47c87be96457c49f46.md               | 291 ++++++
 .../62017fa5bbef406580ceb44f.md               | 236 +++++
 .../62018243f046a368fab8ffb6.md               | 238 +++++
 .../6201830cb0c74b69f1b41635.md               | 242 +++++
 .../620186f4b6b8356d2def576b.md               | 252 +++++
 .../62018ba1aa263770c953be66.md               | 251 +++++
 .../62018c3e94434a71af1d5eaa.md               | 261 ++++++
 .../62018ec29b3ae674f40bef31.md               | 255 ++++++
 .../62019093fe30e278e797d2f6.md               | 265 ++++++
 .../620191707bc65579ddd3ce15.md               | 270 ++++++
 .../620192a767533a7ad19d96d7.md               | 277 ++++++
 .../6201995d9ab88e80f1989dce.md               | 274 ++++++
 .../620199c7a7a32c81d4db3410.md               | 278 ++++++
 .../6201a1a7af32c287bd6b8183.md               | 284 ++++++
 .../6201a1cc668a34888f5b2f52.md               | 288 ++++++
 .../6201a20d742f5c89736c8cfb.md               | 302 ++++++
 .../6201a42e39bf3b95b6a33bf3.md               | 320 +++++++
 .../6201a4adcc6414968b391592.md               | 296 ++++++
 .../6201a5258af7b398b030bfaf.md               | 312 +++++++
 .../6201a59be346d399c21d10b1.md               | 589 ++++++++++++
 .../64076bbeba941114b0027b6a.md               | 209 +++++
 .../5d822fd413a79914d39e98cc.md               |  76 ++
 .../5d822fd413a79914d39e98cd.md               |  56 ++
 .../5d822fd413a79914d39e98ce.md               |  61 ++
 .../5d822fd413a79914d39e98cf.md               |  69 ++
 .../5d822fd413a79914d39e98d0.md               |  65 ++
 .../5d822fd413a79914d39e98d1.md               |  68 ++
 .../5d822fd413a79914d39e98d2.md               |  83 ++
 .../5d822fd413a79914d39e98d3.md               | 105 +++
 .../5d822fd413a79914d39e98d4.md               | 138 +++
 .../5d822fd413a79914d39e98d5.md               | 112 +++
 .../5d822fd413a79914d39e98d6.md               | 103 +++
 .../5d822fd413a79914d39e98d7.md               | 100 ++
 .../5d822fd413a79914d39e98d8.md               | 124 +++
 .../5d822fd413a79914d39e98d9.md               |  99 ++
 .../5d822fd413a79914d39e98da.md               | 133 +++
 .../5d822fd413a79914d39e98db.md               | 133 +++
 .../5d822fd413a79914d39e98dc.md               | 127 +++
 .../5d822fd413a79914d39e98dd.md               | 142 +++
 .../5d822fd413a79914d39e98de.md               | 140 +++
 .../5d822fd413a79914d39e98df.md               | 124 +++
 .../5d822fd413a79914d39e98e0.md               | 142 +++
 .../5d822fd413a79914d39e98e1.md               | 155 ++++
 .../5d822fd413a79914d39e98e2.md               | 135 +++
 .../5d822fd413a79914d39e98e3.md               | 144 +++
 .../5d822fd413a79914d39e98e4.md               | 147 +++
 .../5d822fd413a79914d39e98e5.md               | 161 ++++
 .../5d822fd413a79914d39e98e6.md               | 192 ++++
 .../5d822fd413a79914d39e98e7.md               | 253 +++++
 .../5d822fd413a79914d39e98e8.md               | 190 ++++
 .../5d822fd413a79914d39e98e9.md               | 223 +++++
 .../5d822fd413a79914d39e98ea.md               | 181 ++++
 .../5d822fd413a79914d39e98eb.md               | 203 +++++
 .../5d822fd413a79914d39e98ec.md               | 203 +++++
 .../5d822fd413a79914d39e98ed.md               | 202 ++++
 .../5d822fd413a79914d39e98ee.md               | 196 ++++
 .../5d822fd413a79914d39e98ef.md               | 197 ++++
 .../5d822fd413a79914d39e98f0.md               | 218 +++++
 .../5d822fd413a79914d39e98f1.md               | 223 +++++
 .../5d822fd413a79914d39e98f2.md               | 237 +++++
 .../5d822fd413a79914d39e98f3.md               | 222 +++++
 .../5d822fd413a79914d39e98f4.md               | 227 +++++
 .../5d822fd413a79914d39e98f5.md               | 198 ++++
 .../5d822fd413a79914d39e98f6.md               | 207 +++++
 .../5d822fd413a79914d39e98f7.md               | 203 +++++
 .../5d822fd413a79914d39e98f8.md               | 210 +++++
 .../5d822fd413a79914d39e98f9.md               | 207 +++++
 .../5d822fd413a79914d39e98fa.md               | 211 +++++
 .../5d822fd413a79914d39e98fb.md               | 240 +++++
 .../5d822fd413a79914d39e98fc.md               | 211 +++++
 .../5d822fd413a79914d39e98fd.md               | 209 +++++
 .../5d822fd413a79914d39e98fe.md               | 260 ++++++
 .../5d822fd413a79914d39e98ff.md               | 238 +++++
 .../5d822fd413a79914d39e9900.md               | 224 +++++
 .../5d822fd413a79914d39e9901.md               | 224 +++++
 .../5d822fd413a79914d39e9902.md               | 227 +++++
 .../5d822fd413a79914d39e9903.md               | 223 +++++
 .../5d822fd413a79914d39e9904.md               | 245 +++++
 .../5d822fd413a79914d39e9905.md               | 223 +++++
 .../5d822fd413a79914d39e9906.md               | 249 +++++
 .../5d822fd413a79914d39e9907.md               | 258 ++++++
 .../5d822fd413a79914d39e9908.md               | 258 ++++++
 .../5d822fd413a79914d39e9909.md               | 245 +++++
 .../5d822fd413a79914d39e990a.md               | 277 ++++++
 .../5d822fd413a79914d39e990b.md               | 254 ++++++
 .../5d822fd413a79914d39e990c.md               | 253 +++++
 .../5d822fd413a79914d39e990d.md               | 255 ++++++
 .../5d822fd413a79914d39e990e.md               | 265 ++++++
 .../5d822fd413a79914d39e990f.md               | 279 ++++++
 .../5d822fd413a79914d39e9910.md               | 266 ++++++
 .../5d822fd413a79914d39e9911.md               | 291 ++++++
 .../5d822fd413a79914d39e9912.md               | 287 ++++++
 .../5d822fd413a79914d39e9913.md               | 280 ++++++
 .../5d822fd413a79914d39e9914.md               | 284 ++++++
 .../5d822fd413a79914d39e9915.md               | 391 ++++++++
 .../5d822fd413a79914d39e9916.md               | 297 ++++++
 .../5d822fd413a79914d39e9917.md               | 307 +++++++
 .../5d822fd413a79914d39e9918.md               | 298 ++++++
 .../5d822fd413a79914d39e9919.md               | 301 ++++++
 .../5d822fd413a79914d39e991a.md               | 312 +++++++
 .../5d822fd413a79914d39e991b.md               | 314 +++++++
 .../5d822fd413a79914d39e991c.md               | 317 +++++++
 .../5d822fd413a79914d39e991d.md               | 315 +++++++
 .../5d822fd413a79914d39e991e.md               | 326 +++++++
 .../5d822fd413a79914d39e991f.md               | 324 +++++++
 .../5d822fd413a79914d39e9920.md               | 330 +++++++
 .../5d822fd413a79914d39e9921.md               | 348 +++++++
 .../5d822fd413a79914d39e9922.md               | 347 +++++++
 .../5d822fd413a79914d39e9923.md               | 348 +++++++
 .../5d822fd413a79914d39e9924.md               | 340 +++++++
 .../5d822fd413a79914d39e9925.md               | 346 +++++++
 .../5d822fd413a79914d39e9926.md               | 355 ++++++++
 .../5d822fd413a79914d39e9927.md               | 350 +++++++
 .../5d822fd413a79914d39e9928.md               | 349 +++++++
 .../5d822fd413a79914d39e9929.md               | 362 ++++++++
 .../5d822fd413a79914d39e992a.md               | 359 ++++++++
 .../5d822fd413a79914d39e992b.md               | 361 ++++++++
 .../5d822fd413a79914d39e992c.md               | 364 ++++++++
 .../5d822fd413a79914d39e992d.md               | 377 ++++++++
 .../5d822fd413a79914d39e992e.md               | 374 ++++++++
 .../5d822fd413a79914d39e992f.md               | 377 ++++++++
 .../5d822fd413a79914d39e9930.md               | 381 ++++++++
 .../5d822fd413a79914d39e9931.md               | 404 ++++++++
 .../5d822fd413a79914d39e9932.md               | 396 ++++++++
 .../5d822fd413a79914d39e9933.md               | 402 ++++++++
 .../5d822fd413a79914d39e9934.md               | 409 +++++++++
 .../5d822fd413a79914d39e9935.md               | 409 +++++++++
 .../5d822fd413a79914d39e9936.md               | 402 ++++++++
 .../5d822fd413a79914d39e9937.md               | 403 ++++++++
 .../5d822fd413a79914d39e9938.md               | 421 +++++++++
 .../5d822fd413a79914d39e9939.md               | 410 +++++++++
 .../5d822fd413a79914d39e993a.md               | 422 +++++++++
 .../5d822fd413a79914d39e993b.md               | 424 +++++++++
 .../5d822fd413a79914d39e993c.md               | 437 +++++++++
 .../5d822fd413a79914d39e993d.md               | 450 +++++++++
 .../5d822fd413a79914d39e993e.md               | 862 ++++++++++++++++++
 .../619665c9abd72906f3ad30f9.md               |  65 ++
 .../61967e74a8e3690ab6292daa.md               |  56 ++
 .../61968df2acd5550bf1616c34.md               |  53 ++
 .../61968e9243a4090cc805531c.md               |  51 ++
 .../61968f8877c6720d6d61aaf5.md               |  64 ++
 .../619691693bc14b0e528f5a20.md               |  66 ++
 .../6196928658b6010f28c39484.md               |  58 ++
 .../619692ff79f5770fc6d8c0b4.md               |  73 ++
 .../6196990f966e8f10a40094f6.md               |  75 ++
 .../619699c10a0f6e11591d73c4.md               |  74 ++
 .../61969aa6acef5b12200f672e.md               |  83 ++
 .../61969c487ced6f12db8fef94.md               |  89 ++
 .../61969d66cfcdba137d021558.md               |  76 ++
 .../61969e7451455614217e901b.md               |  91 ++
 .../6196adc17f77a714d51485f2.md               |  90 ++
 .../6196aead7ac7bf1584b17a7f.md               |  86 ++
 .../6196ce0415498d2463989e84.md               |  92 ++
 .../6196cee94c6da1253809dff9.md               | 100 ++
 .../6196d00a5d7292262bc02f4c.md               |  87 ++
 .../6196d0cda039d026f7f78d1e.md               | 100 ++
 .../6196d1ac33c68d27dcda5796.md               | 131 +++
 .../6196d213d99f16287bff22ae.md               | 104 +++
 .../6196d2c0f22ca0293107c048.md               | 112 +++
 .../6196d32d1340d829f0f6f57d.md               | 105 +++
 .../6196d41d40bf9b2aaea5d520.md               | 107 +++
 .../6197cff995d03905b0cca8ad.md               | 118 +++
 .../6197f40a16afea068c7e60c8.md               | 125 +++
 .../6197f667297bb30a552ce017.md               |  65 ++
 .../61993b72e874e709b8dfd666.md               | 128 +++
 .../61993cf26a8e0f0a553db223.md               | 122 +++
 .../61993dbb35adf30b10d49e38.md               | 139 +++
 .../61993e9adc9e9a0bb4d28fff.md               | 133 +++
 .../6199409834ccaf0d10736596.md               | 139 +++
 .../6199429802b7c10dc79ff871.md               | 154 ++++
 .../619943285a41720e6370d985.md               | 156 ++++
 .../619943876b706d0f35c01dbc.md               | 146 +++
 .../6199442866286d0ff421a4fc.md               | 148 +++
 .../619bcf239fc15905ecd66fce.md               | 145 +++
 .../619be73b3c806006ccc00bb0.md               | 158 ++++
 .../619be7af7b0bf60770f5d2a4.md               | 155 ++++
 .../619be80062551a080e32c821.md               | 160 ++++
 .../619be8ce4ea49008c5bfbc30.md               | 152 +++
 .../619be946958c6009844f1dee.md               | 166 ++++
 .../619c155df0063a0a3fec0e32.md               | 193 ++++
 .../619c16debd0c270b01c5ce38.md               | 165 ++++
 .../619cfdf2e63ddf05feab86ad.md               | 169 ++++
 .../619d019488f98c06acbbb71a.md               | 171 ++++
 .../619d022dc8400c0763829a17.md               | 177 ++++
 .../619d02c7bc95bf0827a5d296.md               | 181 ++++
 .../619d033915012509031f309a.md               | 184 ++++
 .../619d03dadadb6509a16f4f5f.md               | 210 +++++
 .../619d0503e03a790a4179d463.md               | 206 +++++
 .../619d05c54dabca0b10058235.md               | 197 ++++
 .../619d0882f54bf40bdc4671ed.md               | 197 ++++
 .../619d090cd8d6db0c93dc5087.md               | 222 +++++
 .../619d0b51ca42ed0d74582186.md               | 207 +++++
 .../619d0bc9cb05360e1bf549c3.md               | 200 ++++
 .../619d0c1594c38c0ebae75878.md               | 215 +++++
 .../619d0d18ca99870f884a7bff.md               | 225 +++++
 .../619d0daf214542102739b0da.md               | 227 +++++
 .../619d0e56f9ca9710fcb974e3.md               | 226 +++++
 .../619d0eec0ac40611b41e2ccc.md               | 247 +++++
 .../619d0fc9825c271253df28d4.md               | 238 +++++
 .../619d102d786c3d13124c37c6.md               | 231 +++++
 .../619d107edf7ddf13cc77106a.md               | 246 +++++
 .../619d10cc98145f14820399c5.md               | 271 ++++++
 .../619d115e2adcd71538e82ebb.md               | 256 ++++++
 .../619d11e6d5ef9515d2a16033.md               | 262 ++++++
 .../619d129a417d0716a94de913.md               | 267 ++++++
 .../619d1340361095175f4b5115.md               | 267 ++++++
 .../619d15797b580c1828b05426.md               | 263 ++++++
 .../619d15d955d9d418c4487bbc.md               | 264 ++++++
 .../619d1629a8adc61960ca8b40.md               | 278 ++++++
 .../619d1c5fc9f8941a400955da.md               | 272 ++++++
 .../619d1dab9ff3421ae1976991.md               | 273 ++++++
 .../619d1deb8b04811b8839ffe4.md               | 281 ++++++
 .../619d1e7a8e81a61c5a819dc4.md               | 272 ++++++
 .../619d1ed33c9a071cf657a0d6.md               | 306 +++++++
 .../619d1fb5d244c31db8a7fdb7.md               | 295 ++++++
 .../619d204bd73ae51e743b8e94.md               | 288 ++++++
 .../619d20b12996101f430920fb.md               | 304 ++++++
 .../619d21fe6a3f9b2016be9d9d.md               | 304 ++++++
 .../619d229b0e542520cd91c685.md               | 312 +++++++
 .../619d23089e787e216a7043d6.md               | 295 ++++++
 .../619d237a107c10221ed743fa.md               | 328 +++++++
 .../619d26b12e651022d80cd017.md               | 317 +++++++
 .../619d2712853306238f41828e.md               | 332 +++++++
 .../619d2b7a84e78b246f2d17a2.md               | 340 +++++++
 .../619d2bd9c1d43c2526e96f1f.md               | 325 +++++++
 .../619d2d4e80400325ff89664a.md               | 326 +++++++
 .../619d2ebc81ba81271460850d.md               | 326 +++++++
 .../619d2f0e9440bc27caee1cec.md               | 327 +++++++
 .../619d2fd3ff4f772882e3d998.md               | 323 +++++++
 .../619d30350883802921bfcccc.md               | 333 +++++++
 .../619d324f5915c929f36ae91d.md               | 351 +++++++
 .../619d32c7fa21f32aaa91d499.md               | 347 +++++++
 .../619d333b738e3c2b5d58b095.md               | 347 +++++++
 .../619d337765b9f02c10e93722.md               | 362 ++++++++
 .../619d33c51140292cc5a21742.md               | 357 ++++++++
 .../619d3482f505452d861d0f62.md               | 347 +++++++
 .../619d3561a951bf2e41a24f10.md               | 346 +++++++
 .../619d36103839c82efa95dd34.md               | 357 ++++++++
 .../619d3711d04d623000013e9e.md               | 670 ++++++++++++++
 .../61a8fe15a6a31306e60d1e89.md               |  55 ++
 .../61537bb9b1a29430ac15ad38.md               |  43 +
 .../61537c5f81f0cf325b4a854c.md               |  62 ++
 .../61537c9eecea6a335db6da79.md               |  65 ++
 .../61537d86bdc3dd343688fceb.md               | 111 +++
 .../615380dff67172357fcf0425.md               |  83 ++
 .../6153893900438b4643590367.md               | 112 +++
 .../6153897c27f6334716ee5abe.md               |  93 ++
 .../6153908a366afb4d57185c8d.md               |  94 ++
 .../615392916d83fa4f02f7e2cf.md               |  88 ++
 .../6153938dce8b294ff8f5a4e9.md               |  87 ++
 .../6153947986535e5117e60615.md               |  88 ++
 .../61539e07e7430b528fbffe21.md               | 104 +++
 .../61539f32a206bd53ec116465.md               |  92 ++
 .../6153a04847abee57a3a406ac.md               |  95 ++
 .../6153a3485f0b20591d26d2a1.md               |  92 ++
 .../6153a3952facd25a83fe8083.md               | 112 +++
 .../6153a3ebb4f7f05b8401b716.md               | 181 ++++
 .../615f171d05def3218035dc85.md               |  92 ++
 .../6493bc0d99879635209565aa.md               |  75 ++
 .../6494da0daf5df5197963671d.md               |  83 ++
 .../64dd076a1b33c86d84b4232f.md               | 126 +++
 .../64dd136e4e8b0894f9c70d86.md               |  79 ++
 .../66c8ba975ee7230e29f6c4ad.md               |   2 +-
 .../615f2abbe7d18d49a1e0e1c8.md               |  58 ++
 .../615f2d4150fe0d4cbd0f2628.md               |  62 ++
 .../615f34948891834dd77655a6.md               |  63 ++
 .../615f34ecc1091b4fd5a8a484.md               |  88 ++
 .../615f357957e370510f21ea16.md               |  55 ++
 .../615f378014c2da526a109c81.md               |  57 ++
 .../615f38279e5c3d53692ea441.md               |  66 ++
 .../615f38cabc64e3556f98cc1a.md               |  65 ++
 .../615f3949f58e12577dcefb00.md               |  61 ++
 .../615f39d7da41b15851fa3fb9.md               |  66 ++
 .../615f3b091162165948e1cb33.md               |  72 ++
 .../615f3cafd794015aa9547a6d.md               |  76 ++
 .../615f3d9e59db4b5b8e960762.md               |  70 ++
 .../615f3e1b7233ee5c7595771f.md               |  71 ++
 .../615f3e4af8008c5d494d3afe.md               |  80 ++
 .../615f3ed16592445e57941aec.md               |  96 ++
 .../615f405b89a7ec5f8e2d11f4.md               |  91 ++
 .../615f40b01f680e608d360ed4.md               |  84 ++
 .../615f4172e9eec061d6456221.md               |  91 ++
 .../615f41c979787462e76dab90.md               | 104 +++
 .../615f423cf65d5864132a0956.md               |  86 ++
 .../615f42a021625f656101ef93.md               | 100 ++
 .../615f4bfb9de4a16703b56eb6.md               |  92 ++
 .../615f4ce9d877b668417c0c42.md               | 104 +++
 .../615f4dde9d72e3694cb9ee3b.md               | 105 +++
 .../615f4ec58334106a4170c2a8.md               | 105 +++
 .../615f4f9e4a40566b776a8f38.md               | 111 +++
 .../615f50473cc0196c6dd3892a.md               | 101 ++
 .../615f51257a8a516d80b6c743.md               | 113 +++
 .../615f51e4e5b24a6e80eccce1.md               | 128 +++
 .../615f522dea4f776f64dc3e91.md               | 115 +++
 .../615f5486b8fd4b71633f69b0.md               | 143 +++
 .../615f575b50b91e72af079480.md               | 144 +++
 .../615f5af373a68e744a3c5a76.md               | 141 +++
 .../615f5fd85d0062761f288364.md               | 134 +++
 .../615f61338c8ca176d6445574.md               | 141 +++
 .../615f666ac5edea782feb7e75.md               | 142 +++
 .../615f671b6d1919792745aa5d.md               | 167 ++++
 .../615f6823d0815b7a991f2a75.md               | 157 ++++
 .../615f6b2d164f81809efd9bdc.md               | 182 ++++
 .../615f6cc778f7698258467596.md               | 172 ++++
 .../615f6fddaac1e083502d3e6a.md               | 148 +++
 .../615f70077a4ff98424236c1e.md               | 163 ++++
 .../615f72a872354a850d4f533e.md               | 160 ++++
 .../615f74a71f1e498619e38ee8.md               | 166 ++++
 .../615f7ad94380408d971d14f6.md               | 181 ++++
 .../615f7bc680f7168ea01ebf99.md               | 165 ++++
 .../615f7c71eab8218f846e4503.md               | 196 ++++
 .../615f7d489a581590d1350288.md               | 165 ++++
 .../615f7de4487b64919bb4aa5e.md               | 215 +++++
 .../615f7e7281626a92bbd62da8.md               | 205 +++++
 .../615f7ecb09de9a938ef94756.md               | 210 +++++
 .../615f7fa959ab75948f96a0d6.md               | 183 ++++
 .../615f808d85793195b0f53be9.md               | 185 ++++
 .../615f829d07b18f96f6f6684b.md               | 169 ++++
 .../615f83ef928ec9982b785b6a.md               | 182 ++++
 .../615f84f246e8ba98e3cd97be.md               | 211 +++++
 .../615f887466db4ba14b5342cc.md               | 208 +++++
 .../615f89e055040ba294719d2f.md               | 195 ++++
 .../615f8bfe0f30a1a3c340356b.md               | 219 +++++
 .../615f8f1223601fa546e93f31.md               | 202 ++++
 .../615f905fbd1017a65ca224eb.md               | 211 +++++
 .../615f94786869e1a7fec54375.md               | 196 ++++
 .../615f951dff9317a900ef683f.md               | 365 ++++++++
 .../635bde33c91c80540eae239b.md               | 153 ++++
 .../6395d33ab5d91bf317107c48.md               | 117 +++
 .../6396e33fe478dd264ebbf278.md               | 135 +++
 .../667d1bb875f5961913176069.md               | 147 +++
 .../612e78af05201622d4bab8aa.md               |  58 ++
 .../612e7d1c29fb872d6384379c.md               |  60 ++
 .../612e804c54d5e7308d7ebe56.md               |  60 ++
 .../612e813b3ba67633222cbe54.md               |  95 ++
 .../612e8279827a28352ce83a72.md               |  74 ++
 .../612e83ec2eca1e370f830511.md               | 107 +++
 .../612e89562043183c86df287c.md               |  77 ++
 .../612e89d254fe5d3df7d6693d.md               |  83 ++
 .../612e8eebe3a6dc3fcc33a66f.md               |  95 ++
 .../612e95ef2e4bdf41f69067f9.md               |  81 ++
 .../612e96fc87fe8e44f69f7ec5.md               | 102 +++
 .../612e98f3245c98475e49cfc6.md               |  88 ++
 .../612e9a21381a1949327512e6.md               |  89 ++
 .../612e9d142affc44a453655db.md               | 117 +++
 .../612e9f1e7e5ccd4fa9ada0be.md               | 103 +++
 .../612ea4c4993aba52ab4aa32e.md               | 119 +++
 .../612ea97df5742154772f312e.md               | 110 +++
 .../612ead8788d28655ef8db056.md               | 112 +++
 .../612eaf56b7ba3257fdbfb0db.md               | 144 +++
 .../612eb4893b63c75bb9251ddf.md               | 129 +++
 .../612eb75153591b5e3b1ab65e.md               | 115 +++
 .../612eb7ca8c275d5f89c73333.md               | 116 +++
 .../612eb8e984cd73677a92b7e9.md               | 117 +++
 .../612eb934f64a4d6890a45518.md               | 118 +++
 .../612ebcba99bfa46a15370b11.md               | 139 +++
 .../612ebe7fe6d07e6b76d1cae2.md               | 133 +++
 .../612ebedec97e096c8bf64999.md               | 136 +++
 .../612ebf9a210f2b6d77001e68.md               | 139 +++
 .../612ec0490ae8626e9adf82e4.md               | 133 +++
 .../612ec19d5268da7074941f84.md               | 154 ++++
 .../612ec29c84b9a6718b1f5cec.md               | 288 ++++++
 .../66fbcdfed6848e48947dbbc9.md               |  36 +
 .../66fbcf750a62784cf11f562d.md               |  81 ++
 .../66fbcf750a62784cf11f562e.md               | 152 +++
 .../66fbcf750a62784cf11f5630.md               |  98 ++
 .../66fbcf750a62784cf11f5631.md               | 104 +++
 .../66fbcf750a62784cf11f5632.md               | 105 +++
 .../66fbcf750a62784cf11f5633.md               | 106 +++
 .../66fbcf750a62784cf11f5634.md               | 133 +++
 .../66fbcf750a62784cf11f5635.md               | 124 +++
 .../66fbcf750a62784cf11f5636.md               | 124 +++
 .../66fbcf750a62784cf11f5637.md               | 186 ++++
 .../66ff02792b3042a2b811f475.md               |  86 ++
 .../670e4f45f7116c0f216a5177.md               | 135 +++
 .../60a3e3396c7b40068ad6996b.md               |  43 +
 .../60a3e3396c7b40068ad6996c.md               |  42 +
 .../60a3e3396c7b40068ad6996d.md               |  41 +
 .../60a3e3396c7b40068ad6996e.md               |  43 +
 .../60a3e3396c7b40068ad6996f.md               |  47 +
 .../60a3e3396c7b40068ad69970.md               |  53 ++
 .../60a3e3396c7b40068ad69971.md               |  67 ++
 .../60a3e3396c7b40068ad69972.md               |  54 ++
 .../60a3e3396c7b40068ad69973.md               |  55 ++
 .../60a3e3396c7b40068ad69974.md               |  67 ++
 .../60a3e3396c7b40068ad69975.md               |  67 ++
 .../60a3e3396c7b40068ad69976.md               |  64 ++
 .../60a3e3396c7b40068ad69977.md               |  65 ++
 .../60a3e3396c7b40068ad69978.md               |  66 ++
 .../60a3e3396c7b40068ad69979.md               |  71 ++
 .../60a3e3396c7b40068ad6997a.md               |  74 ++
 .../60a3e3396c7b40068ad6997b.md               |  70 ++
 .../60a3e3396c7b40068ad6997c.md               |  71 ++
 .../60a3e3396c7b40068ad6997d.md               |  74 ++
 .../60a3e3396c7b40068ad6997e.md               |  75 ++
 .../60a3e3396c7b40068ad6997f.md               |  82 ++
 .../60a3e3396c7b40068ad69980.md               |  84 ++
 .../60a3e3396c7b40068ad69981.md               |  84 ++
 .../60a3e3396c7b40068ad69982.md               |  79 ++
 .../60a3e3396c7b40068ad69983.md               |  80 ++
 .../60a3e3396c7b40068ad69984.md               |  81 ++
 .../60a3e3396c7b40068ad69986.md               |  93 ++
 .../60a3e3396c7b40068ad69987.md               |  94 ++
 .../60a3e3396c7b40068ad69988.md               |  87 ++
 .../60a3e3396c7b40068ad69989.md               |  88 ++
 .../60a3e3396c7b40068ad6998a.md               |  89 ++
 .../60a3e3396c7b40068ad6998b.md               |  93 ++
 .../60a3e3396c7b40068ad6998c.md               | 100 ++
 .../60a3e3396c7b40068ad6998d.md               | 108 +++
 .../60a3e3396c7b40068ad6998e.md               |  95 ++
 .../60a3e3396c7b40068ad6998f.md               |  98 ++
 .../60a3e3396c7b40068ad69990.md               |  97 ++
 .../60a3e3396c7b40068ad69991.md               |  98 ++
 .../60a3e3396c7b40068ad69992.md               | 101 ++
 .../60a3e3396c7b40068ad69993.md               | 100 ++
 .../60a3e3396c7b40068ad69994.md               | 103 +++
 .../60a3e3396c7b40068ad69995.md               | 104 +++
 .../60a3e3396c7b40068ad69996.md               | 103 +++
 .../60a3e3396c7b40068ad69997.md               | 180 ++++
 .../5d822fd413a79914d39e9904.md               |  16 +-
 .../5dc17d3bf86c76b9248c6eb4.md               |   6 +-
 .../5dc17dc8f86c76b9248c6eb5.md               |  11 +-
 .../5dc2385ff86c76b9248c6eb7.md               |   8 +-
 .../5dc23991f86c76b9248c6eb8.md               |  12 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../5dc24073f86c76b9248c6ebb.md               |   8 +-
 .../5dc24165f86c76b9248c6ebc.md               |   2 +-
 .../5dc24614f86c76b9248c6ebd.md               |   2 +-
 .../5ddbd81294d8ddc1510a8e56.md               |  12 +-
 .../5dfa2407b521be39a3de7be1.md               |  15 +-
 .../5dfa30b9eacea3f48c6300ad.md               |  10 +-
 .../5dfa3589eacea3f48c6300ae.md               |   6 +-
 .../5dfa371beacea3f48c6300af.md               |   6 +-
 .../5dfa37b9eacea3f48c6300b0.md               |   6 +-
 .../5dfb5ecbeacea3f48c6300b1.md               |   6 +-
 .../5dfb6250eacea3f48c6300b2.md               |   6 +-
 .../5dfb655eeacea3f48c6300b3.md               |  12 +-
 .../5dfb6a35eacea3f48c6300b4.md               |   6 +-
 .../5ef9b03c81a63668521804d0.md               |   6 +-
 .../5ef9b03c81a63668521804d1.md               |   6 +-
 .../5ef9b03c81a63668521804d2.md               |   6 +-
 .../5ef9b03c81a63668521804d3.md               |   6 +-
 .../5ef9b03c81a63668521804d4.md               |   6 +-
 .../5ef9b03c81a63668521804d5.md               |   6 +-
 .../5ef9b03c81a63668521804d6.md               |   6 +-
 .../5ef9b03c81a63668521804d7.md               |   6 +-
 .../5ef9b03c81a63668521804d8.md               |   6 +-
 .../5ef9b03c81a63668521804d9.md               |   6 +-
 .../5ef9b03c81a63668521804da.md               |   6 +-
 .../5ef9b03c81a63668521804db.md               |   6 +-
 .../5ef9b03c81a63668521804dc.md               |   6 +-
 .../5ef9b03c81a63668521804dd.md               |   6 +-
 .../5ef9b03c81a63668521804de.md               |   7 +-
 .../5ef9b03c81a63668521804df.md               |   6 +-
 .../5ef9b03c81a63668521804e1.md               |   6 +-
 .../5ef9b03c81a63668521804e2.md               |   6 +-
 .../5ef9b03c81a63668521804e3.md               |   6 +-
 .../5ef9b03c81a63668521804e5.md               |   6 +-
 .../5ef9b03c81a63668521804e7.md               |   6 +-
 .../5ef9b03c81a63668521804e8.md               |  10 +-
 .../5ef9b03c81a63668521804e9.md               |   8 +-
 .../5ef9b03c81a63668521804ea.md               |   6 +-
 .../5ef9b03c81a63668521804eb.md               |   6 +-
 .../5ef9b03c81a63668521804ec.md               |   6 +-
 .../5ef9b03c81a63668521804ee.md               |   6 +-
 .../5efada803cbd2bbdab94e332.md               |  13 +-
 .../5efae0543cbd2bbdab94e333.md               |   6 +-
 .../5efae16e3cbd2bbdab94e334.md               |   6 +-
 .../5efb23e70dc218d6c85f89b1.md               |   6 +-
 .../5efb2c990dc218d6c85f89b2.md               |   6 +-
 .../5efc4f528d6a74d05e68af74.md               |   6 +-
 .../5efc518e8d6a74d05e68af75.md               |   6 +-
 .../5efc54138d6a74d05e68af76.md               |   6 +-
 .../5efc575c8d6a74d05e68af77.md               |   6 +-
 .../5f05a1d8e233dff4a68508d8.md               |   6 +-
 .../5f07be6ef7412fbad0c5626b.md               |  12 +-
 .../5f07c98cdb9413cbd4b16750.md               |   6 +-
 .../5f07fb1579dc934717801375.md               |   6 +-
 .../5f0d48e7b435f13ab6550051.md               |   6 +-
 .../5f0d4ab1b435f13ab6550052.md               |   6 +-
 .../5f0d4d04b435f13ab6550053.md               |   6 +-
 .../5f1a80975fc4bcae0edb3497.md               |   7 +-
 .../5f1a89f1190aff21ae42105a.md               |   6 +-
 .../62bb4009e3458a128ff57d5d.md               |   8 +-
 .../671141d8e32fe934c26fa1be.md               |  57 ++
 .../671141f948cbab359e74cc93.md               |  48 +
 .../671141feba228a35cefba82d.md               |  57 ++
 .../671144cdcc01d73f7dd79dc9.md               |  47 +
 .../7cf9b03d81a65668421804c3.md               |   6 +-
 .../657ddcd61f516cacdc7a04ca.md               |  30 +-
 .../657e4e3b02a2128049c344c8.md               |  30 +-
 .../66b205e6eacba4c4e54ea434.md               |   4 +-
 .../66c06fad3475cd92421b9ac2.md               |   4 +-
 .../587d78af367417b2b2512b04.md               |   2 +-
 .../669e2f60e83c011754f711f9.md               |   2 +-
 .../bd7158d8c442eddfaeb5bd18.md               |   2 +-
 .../670803abcb3e980233da4768.md               | 121 +++
 .../6708143cab2b583ecd3324f5.md               | 121 +++
 .../6708382cf088b216580a9ff1.md               | 125 +++
 .../67083868d5fdcb17bf8c14bd.md               | 121 +++
 .../670838977810401844af6fe0.md               | 121 +++
 .../670838b10ee87a18e5faff62.md               | 121 +++
 .../670838e914096b194b0c51aa.md               | 121 +++
 .../670839051794aa19fcef6dc8.md               | 120 +++
 .../67083952f800051a8a21fcfd.md               | 121 +++
 .../6708396caa00e11b597b3365.md               | 121 +++
 .../66edd630f7666cfa54b404d0.md               | 200 ++--
 .../66ed8fa2f45ce3ece4053eab.md               |   2 +-
 .../66ed8ff4f45ce3ece4053eb4.md               | 200 ++--
 .../66edd3403d7077eece6dc4b6.md               | 200 ++--
 .../66edd4bc0ce399f475ad6f9b.md               | 200 ++--
 .../quiz-nano/66f1b03b922a53cb231e1c0d.md     |   2 +-
 .../66f1a2009e65c9a40a26d51e.md               | 201 ++--
 .../66f1af82732957c895f0b21a.md               | 200 ++--
 .../66ed9034f45ce3ece4053ebd.md               | 200 ++--
 .../66ed9043f45ce3ece4053ebf.md               | 200 ++--
 .../61fd5a93fd62bb35968adeab.md               |  61 ++
 .../61fd6343fb42013d99bcd7f3.md               |  48 +
 .../61fd66c687e610436494c6f1.md               |  52 ++
 .../61fd67a656743144844941cb.md               |  78 ++
 .../61fd6ab779390f49148773bb.md               |  65 ++
 .../61fd6b7c83dbf54a08cf0498.md               |  79 ++
 .../61fd6cc9475a784b7776233e.md               |  80 ++
 .../61fd70336ebb3e4f62ee81ba.md               |  73 ++
 .../61fd719788899952e67692b9.md               |  86 ++
 .../61fd71d596e8f253b9408b39.md               |  86 ++
 .../61fd75ea7f663457612dba02.md               | 125 +++
 .../61fd7648a7ba2e5882436831.md               |  96 ++
 .../61fd778081276b59d59abad6.md               | 134 +++
 .../61fd77f7ad2aeb5ae34d07d6.md               | 138 +++
 .../61fd78621573aa5e8b512f5e.md               | 142 +++
 .../61fd7a160ed17960e971f28b.md               | 146 +++
 .../61fd7b3fcaa5406257abc5d1.md               | 130 +++
 .../61fd8e491324ce717da97ffe.md               | 119 +++
 .../61fd8fd08af43372f02952d0.md               | 149 +++
 .../61fd9126aa72a474301fc49f.md               | 131 +++
 .../61fd933ba685de776a94997e.md               | 169 ++++
 .../61fd94056e0355785fbba4d3.md               | 173 ++++
 .../61fd986ddbcbd47ba8fbc5ec.md               | 177 ++++
 .../61fd990577d8227dd93fbeeb.md               | 181 ++++
 .../61fd9a4ff2fc4481b9157bd7.md               | 165 ++++
 .../61fd9ad665a4a282c8106be3.md               | 198 ++++
 .../61fd9b7285bde783ad5b8aac.md               | 208 +++++
 .../61fd9d9fbdfe078800317055.md               | 158 ++++
 .../61fda307bde0b091cf7d884a.md               | 168 ++++
 .../61fda339eadcfd92a6812bed.md               | 171 ++++
 .../61fdac1e31692f9a9ad97295.md               | 172 ++++
 .../61fdaea3999cb19d76ce717b.md               | 172 ++++
 .../61fdaf9ff894b6a084ecdc1b.md               | 174 ++++
 .../61fdafe6f07fd7a1c6785bc2.md               | 182 ++++
 .../61fdb04d9939f0a26ca51c2b.md               | 192 ++++
 .../620159cd5431aa34bc6a4c9c.md               | 198 ++++
 .../62015a5da1c95c358f079ebb.md               | 194 ++++
 .../62015cd2654a1139321a89d2.md               | 196 ++++
 .../62015d8942384c3aed48329e.md               | 212 +++++
 .../620167374bb8b4455cd11125.md               | 224 +++++
 .../620174ed519dd7506c1a4b61.md               | 212 +++++
 .../620175b3710a0951cfa86edf.md               | 223 +++++
 .../6201782cc420715562f36271.md               | 232 +++++
 .../620179bc0a6a2358c72b90ad.md               | 224 +++++
 .../62017b6f47454059bf2d3bd1.md               | 230 +++++
 .../62017f47c87be96457c49f46.md               | 291 ++++++
 .../62017fa5bbef406580ceb44f.md               | 236 +++++
 .../62018243f046a368fab8ffb6.md               | 238 +++++
 .../6201830cb0c74b69f1b41635.md               | 242 +++++
 .../620186f4b6b8356d2def576b.md               | 252 +++++
 .../62018ba1aa263770c953be66.md               | 251 +++++
 .../62018c3e94434a71af1d5eaa.md               | 261 ++++++
 .../62018ec29b3ae674f40bef31.md               | 255 ++++++
 .../62019093fe30e278e797d2f6.md               | 265 ++++++
 .../620191707bc65579ddd3ce15.md               | 270 ++++++
 .../620192a767533a7ad19d96d7.md               | 277 ++++++
 .../6201995d9ab88e80f1989dce.md               | 274 ++++++
 .../620199c7a7a32c81d4db3410.md               | 278 ++++++
 .../6201a1a7af32c287bd6b8183.md               | 284 ++++++
 .../6201a1cc668a34888f5b2f52.md               | 288 ++++++
 .../6201a20d742f5c89736c8cfb.md               | 302 ++++++
 .../6201a42e39bf3b95b6a33bf3.md               | 320 +++++++
 .../6201a4adcc6414968b391592.md               | 296 ++++++
 .../6201a5258af7b398b030bfaf.md               | 312 +++++++
 .../6201a59be346d399c21d10b1.md               | 589 ++++++++++++
 .../64076bbeba941114b0027b6a.md               | 209 +++++
 .../5d822fd413a79914d39e98cc.md               |  76 ++
 .../5d822fd413a79914d39e98cd.md               |  56 ++
 .../5d822fd413a79914d39e98ce.md               |  61 ++
 .../5d822fd413a79914d39e98cf.md               |  69 ++
 .../5d822fd413a79914d39e98d0.md               |  65 ++
 .../5d822fd413a79914d39e98d1.md               |  68 ++
 .../5d822fd413a79914d39e98d2.md               |  83 ++
 .../5d822fd413a79914d39e98d3.md               | 105 +++
 .../5d822fd413a79914d39e98d4.md               | 138 +++
 .../5d822fd413a79914d39e98d5.md               | 112 +++
 .../5d822fd413a79914d39e98d6.md               | 103 +++
 .../5d822fd413a79914d39e98d7.md               | 100 ++
 .../5d822fd413a79914d39e98d8.md               | 124 +++
 .../5d822fd413a79914d39e98d9.md               |  99 ++
 .../5d822fd413a79914d39e98da.md               | 133 +++
 .../5d822fd413a79914d39e98db.md               | 133 +++
 .../5d822fd413a79914d39e98dc.md               | 127 +++
 .../5d822fd413a79914d39e98dd.md               | 142 +++
 .../5d822fd413a79914d39e98de.md               | 140 +++
 .../5d822fd413a79914d39e98df.md               | 124 +++
 .../5d822fd413a79914d39e98e0.md               | 142 +++
 .../5d822fd413a79914d39e98e1.md               | 155 ++++
 .../5d822fd413a79914d39e98e2.md               | 135 +++
 .../5d822fd413a79914d39e98e3.md               | 144 +++
 .../5d822fd413a79914d39e98e4.md               | 147 +++
 .../5d822fd413a79914d39e98e5.md               | 161 ++++
 .../5d822fd413a79914d39e98e6.md               | 192 ++++
 .../5d822fd413a79914d39e98e7.md               | 253 +++++
 .../5d822fd413a79914d39e98e8.md               | 190 ++++
 .../5d822fd413a79914d39e98e9.md               | 223 +++++
 .../5d822fd413a79914d39e98ea.md               | 181 ++++
 .../5d822fd413a79914d39e98eb.md               | 203 +++++
 .../5d822fd413a79914d39e98ec.md               | 203 +++++
 .../5d822fd413a79914d39e98ed.md               | 202 ++++
 .../5d822fd413a79914d39e98ee.md               | 196 ++++
 .../5d822fd413a79914d39e98ef.md               | 197 ++++
 .../5d822fd413a79914d39e98f0.md               | 218 +++++
 .../5d822fd413a79914d39e98f1.md               | 223 +++++
 .../5d822fd413a79914d39e98f2.md               | 237 +++++
 .../5d822fd413a79914d39e98f3.md               | 222 +++++
 .../5d822fd413a79914d39e98f4.md               | 227 +++++
 .../5d822fd413a79914d39e98f5.md               | 198 ++++
 .../5d822fd413a79914d39e98f6.md               | 207 +++++
 .../5d822fd413a79914d39e98f7.md               | 203 +++++
 .../5d822fd413a79914d39e98f8.md               | 210 +++++
 .../5d822fd413a79914d39e98f9.md               | 207 +++++
 .../5d822fd413a79914d39e98fa.md               | 211 +++++
 .../5d822fd413a79914d39e98fb.md               | 240 +++++
 .../5d822fd413a79914d39e98fc.md               | 211 +++++
 .../5d822fd413a79914d39e98fd.md               | 209 +++++
 .../5d822fd413a79914d39e98fe.md               | 260 ++++++
 .../5d822fd413a79914d39e98ff.md               | 238 +++++
 .../5d822fd413a79914d39e9900.md               | 224 +++++
 .../5d822fd413a79914d39e9901.md               | 224 +++++
 .../5d822fd413a79914d39e9902.md               | 227 +++++
 .../5d822fd413a79914d39e9903.md               | 223 +++++
 .../5d822fd413a79914d39e9904.md               | 245 +++++
 .../5d822fd413a79914d39e9905.md               | 223 +++++
 .../5d822fd413a79914d39e9906.md               | 249 +++++
 .../5d822fd413a79914d39e9907.md               | 258 ++++++
 .../5d822fd413a79914d39e9908.md               | 258 ++++++
 .../5d822fd413a79914d39e9909.md               | 245 +++++
 .../5d822fd413a79914d39e990a.md               | 277 ++++++
 .../5d822fd413a79914d39e990b.md               | 254 ++++++
 .../5d822fd413a79914d39e990c.md               | 253 +++++
 .../5d822fd413a79914d39e990d.md               | 255 ++++++
 .../5d822fd413a79914d39e990e.md               | 265 ++++++
 .../5d822fd413a79914d39e990f.md               | 279 ++++++
 .../5d822fd413a79914d39e9910.md               | 266 ++++++
 .../5d822fd413a79914d39e9911.md               | 291 ++++++
 .../5d822fd413a79914d39e9912.md               | 287 ++++++
 .../5d822fd413a79914d39e9913.md               | 280 ++++++
 .../5d822fd413a79914d39e9914.md               | 284 ++++++
 .../5d822fd413a79914d39e9915.md               | 391 ++++++++
 .../5d822fd413a79914d39e9916.md               | 297 ++++++
 .../5d822fd413a79914d39e9917.md               | 307 +++++++
 .../5d822fd413a79914d39e9918.md               | 298 ++++++
 .../5d822fd413a79914d39e9919.md               | 301 ++++++
 .../5d822fd413a79914d39e991a.md               | 312 +++++++
 .../5d822fd413a79914d39e991b.md               | 314 +++++++
 .../5d822fd413a79914d39e991c.md               | 317 +++++++
 .../5d822fd413a79914d39e991d.md               | 315 +++++++
 .../5d822fd413a79914d39e991e.md               | 326 +++++++
 .../5d822fd413a79914d39e991f.md               | 324 +++++++
 .../5d822fd413a79914d39e9920.md               | 330 +++++++
 .../5d822fd413a79914d39e9921.md               | 348 +++++++
 .../5d822fd413a79914d39e9922.md               | 347 +++++++
 .../5d822fd413a79914d39e9923.md               | 348 +++++++
 .../5d822fd413a79914d39e9924.md               | 340 +++++++
 .../5d822fd413a79914d39e9925.md               | 346 +++++++
 .../5d822fd413a79914d39e9926.md               | 355 ++++++++
 .../5d822fd413a79914d39e9927.md               | 350 +++++++
 .../5d822fd413a79914d39e9928.md               | 349 +++++++
 .../5d822fd413a79914d39e9929.md               | 362 ++++++++
 .../5d822fd413a79914d39e992a.md               | 359 ++++++++
 .../5d822fd413a79914d39e992b.md               | 361 ++++++++
 .../5d822fd413a79914d39e992c.md               | 364 ++++++++
 .../5d822fd413a79914d39e992d.md               | 377 ++++++++
 .../5d822fd413a79914d39e992e.md               | 374 ++++++++
 .../5d822fd413a79914d39e992f.md               | 377 ++++++++
 .../5d822fd413a79914d39e9930.md               | 381 ++++++++
 .../5d822fd413a79914d39e9931.md               | 404 ++++++++
 .../5d822fd413a79914d39e9932.md               | 396 ++++++++
 .../5d822fd413a79914d39e9933.md               | 402 ++++++++
 .../5d822fd413a79914d39e9934.md               | 409 +++++++++
 .../5d822fd413a79914d39e9935.md               | 409 +++++++++
 .../5d822fd413a79914d39e9936.md               | 402 ++++++++
 .../5d822fd413a79914d39e9937.md               | 403 ++++++++
 .../5d822fd413a79914d39e9938.md               | 421 +++++++++
 .../5d822fd413a79914d39e9939.md               | 410 +++++++++
 .../5d822fd413a79914d39e993a.md               | 422 +++++++++
 .../5d822fd413a79914d39e993b.md               | 424 +++++++++
 .../5d822fd413a79914d39e993c.md               | 437 +++++++++
 .../5d822fd413a79914d39e993d.md               | 450 +++++++++
 .../5d822fd413a79914d39e993e.md               | 862 ++++++++++++++++++
 .../619665c9abd72906f3ad30f9.md               |  65 ++
 .../61967e74a8e3690ab6292daa.md               |  56 ++
 .../61968df2acd5550bf1616c34.md               |  53 ++
 .../61968e9243a4090cc805531c.md               |  51 ++
 .../61968f8877c6720d6d61aaf5.md               |  64 ++
 .../619691693bc14b0e528f5a20.md               |  66 ++
 .../6196928658b6010f28c39484.md               |  58 ++
 .../619692ff79f5770fc6d8c0b4.md               |  73 ++
 .../6196990f966e8f10a40094f6.md               |  75 ++
 .../619699c10a0f6e11591d73c4.md               |  74 ++
 .../61969aa6acef5b12200f672e.md               |  83 ++
 .../61969c487ced6f12db8fef94.md               |  89 ++
 .../61969d66cfcdba137d021558.md               |  76 ++
 .../61969e7451455614217e901b.md               |  91 ++
 .../6196adc17f77a714d51485f2.md               |  90 ++
 .../6196aead7ac7bf1584b17a7f.md               |  86 ++
 .../6196ce0415498d2463989e84.md               |  92 ++
 .../6196cee94c6da1253809dff9.md               | 100 ++
 .../6196d00a5d7292262bc02f4c.md               |  87 ++
 .../6196d0cda039d026f7f78d1e.md               | 100 ++
 .../6196d1ac33c68d27dcda5796.md               | 131 +++
 .../6196d213d99f16287bff22ae.md               | 104 +++
 .../6196d2c0f22ca0293107c048.md               | 112 +++
 .../6196d32d1340d829f0f6f57d.md               | 105 +++
 .../6196d41d40bf9b2aaea5d520.md               | 107 +++
 .../6197cff995d03905b0cca8ad.md               | 118 +++
 .../6197f40a16afea068c7e60c8.md               | 125 +++
 .../6197f667297bb30a552ce017.md               |  65 ++
 .../61993b72e874e709b8dfd666.md               | 128 +++
 .../61993cf26a8e0f0a553db223.md               | 122 +++
 .../61993dbb35adf30b10d49e38.md               | 139 +++
 .../61993e9adc9e9a0bb4d28fff.md               | 133 +++
 .../6199409834ccaf0d10736596.md               | 139 +++
 .../6199429802b7c10dc79ff871.md               | 154 ++++
 .../619943285a41720e6370d985.md               | 156 ++++
 .../619943876b706d0f35c01dbc.md               | 146 +++
 .../6199442866286d0ff421a4fc.md               | 148 +++
 .../619bcf239fc15905ecd66fce.md               | 145 +++
 .../619be73b3c806006ccc00bb0.md               | 158 ++++
 .../619be7af7b0bf60770f5d2a4.md               | 155 ++++
 .../619be80062551a080e32c821.md               | 160 ++++
 .../619be8ce4ea49008c5bfbc30.md               | 152 +++
 .../619be946958c6009844f1dee.md               | 166 ++++
 .../619c155df0063a0a3fec0e32.md               | 193 ++++
 .../619c16debd0c270b01c5ce38.md               | 165 ++++
 .../619cfdf2e63ddf05feab86ad.md               | 169 ++++
 .../619d019488f98c06acbbb71a.md               | 171 ++++
 .../619d022dc8400c0763829a17.md               | 177 ++++
 .../619d02c7bc95bf0827a5d296.md               | 181 ++++
 .../619d033915012509031f309a.md               | 184 ++++
 .../619d03dadadb6509a16f4f5f.md               | 210 +++++
 .../619d0503e03a790a4179d463.md               | 206 +++++
 .../619d05c54dabca0b10058235.md               | 197 ++++
 .../619d0882f54bf40bdc4671ed.md               | 197 ++++
 .../619d090cd8d6db0c93dc5087.md               | 222 +++++
 .../619d0b51ca42ed0d74582186.md               | 207 +++++
 .../619d0bc9cb05360e1bf549c3.md               | 200 ++++
 .../619d0c1594c38c0ebae75878.md               | 215 +++++
 .../619d0d18ca99870f884a7bff.md               | 225 +++++
 .../619d0daf214542102739b0da.md               | 227 +++++
 .../619d0e56f9ca9710fcb974e3.md               | 226 +++++
 .../619d0eec0ac40611b41e2ccc.md               | 247 +++++
 .../619d0fc9825c271253df28d4.md               | 238 +++++
 .../619d102d786c3d13124c37c6.md               | 231 +++++
 .../619d107edf7ddf13cc77106a.md               | 246 +++++
 .../619d10cc98145f14820399c5.md               | 271 ++++++
 .../619d115e2adcd71538e82ebb.md               | 256 ++++++
 .../619d11e6d5ef9515d2a16033.md               | 262 ++++++
 .../619d129a417d0716a94de913.md               | 267 ++++++
 .../619d1340361095175f4b5115.md               | 267 ++++++
 .../619d15797b580c1828b05426.md               | 263 ++++++
 .../619d15d955d9d418c4487bbc.md               | 264 ++++++
 .../619d1629a8adc61960ca8b40.md               | 278 ++++++
 .../619d1c5fc9f8941a400955da.md               | 272 ++++++
 .../619d1dab9ff3421ae1976991.md               | 273 ++++++
 .../619d1deb8b04811b8839ffe4.md               | 281 ++++++
 .../619d1e7a8e81a61c5a819dc4.md               | 272 ++++++
 .../619d1ed33c9a071cf657a0d6.md               | 306 +++++++
 .../619d1fb5d244c31db8a7fdb7.md               | 295 ++++++
 .../619d204bd73ae51e743b8e94.md               | 288 ++++++
 .../619d20b12996101f430920fb.md               | 304 ++++++
 .../619d21fe6a3f9b2016be9d9d.md               | 304 ++++++
 .../619d229b0e542520cd91c685.md               | 312 +++++++
 .../619d23089e787e216a7043d6.md               | 295 ++++++
 .../619d237a107c10221ed743fa.md               | 328 +++++++
 .../619d26b12e651022d80cd017.md               | 317 +++++++
 .../619d2712853306238f41828e.md               | 332 +++++++
 .../619d2b7a84e78b246f2d17a2.md               | 340 +++++++
 .../619d2bd9c1d43c2526e96f1f.md               | 325 +++++++
 .../619d2d4e80400325ff89664a.md               | 326 +++++++
 .../619d2ebc81ba81271460850d.md               | 326 +++++++
 .../619d2f0e9440bc27caee1cec.md               | 327 +++++++
 .../619d2fd3ff4f772882e3d998.md               | 323 +++++++
 .../619d30350883802921bfcccc.md               | 333 +++++++
 .../619d324f5915c929f36ae91d.md               | 351 +++++++
 .../619d32c7fa21f32aaa91d499.md               | 347 +++++++
 .../619d333b738e3c2b5d58b095.md               | 347 +++++++
 .../619d337765b9f02c10e93722.md               | 362 ++++++++
 .../619d33c51140292cc5a21742.md               | 357 ++++++++
 .../619d3482f505452d861d0f62.md               | 347 +++++++
 .../619d3561a951bf2e41a24f10.md               | 346 +++++++
 .../619d36103839c82efa95dd34.md               | 357 ++++++++
 .../619d3711d04d623000013e9e.md               | 670 ++++++++++++++
 .../61a8fe15a6a31306e60d1e89.md               |  55 ++
 .../61537bb9b1a29430ac15ad38.md               |  43 +
 .../61537c5f81f0cf325b4a854c.md               |  62 ++
 .../61537c9eecea6a335db6da79.md               |  65 ++
 .../61537d86bdc3dd343688fceb.md               | 111 +++
 .../615380dff67172357fcf0425.md               |  83 ++
 .../6153893900438b4643590367.md               | 112 +++
 .../6153897c27f6334716ee5abe.md               |  93 ++
 .../6153908a366afb4d57185c8d.md               |  94 ++
 .../615392916d83fa4f02f7e2cf.md               |  88 ++
 .../6153938dce8b294ff8f5a4e9.md               |  87 ++
 .../6153947986535e5117e60615.md               |  88 ++
 .../61539e07e7430b528fbffe21.md               | 104 +++
 .../61539f32a206bd53ec116465.md               |  92 ++
 .../6153a04847abee57a3a406ac.md               |  95 ++
 .../6153a3485f0b20591d26d2a1.md               |  92 ++
 .../6153a3952facd25a83fe8083.md               | 112 +++
 .../6153a3ebb4f7f05b8401b716.md               | 181 ++++
 .../615f171d05def3218035dc85.md               |  92 ++
 .../6493bc0d99879635209565aa.md               |  75 ++
 .../6494da0daf5df5197963671d.md               |  83 ++
 .../64dd076a1b33c86d84b4232f.md               | 126 +++
 .../64dd136e4e8b0894f9c70d86.md               |  79 ++
 .../66c8ba975ee7230e29f6c4ad.md               |   2 +-
 .../615f2abbe7d18d49a1e0e1c8.md               |  58 ++
 .../615f2d4150fe0d4cbd0f2628.md               |  62 ++
 .../615f34948891834dd77655a6.md               |  63 ++
 .../615f34ecc1091b4fd5a8a484.md               |  88 ++
 .../615f357957e370510f21ea16.md               |  55 ++
 .../615f378014c2da526a109c81.md               |  57 ++
 .../615f38279e5c3d53692ea441.md               |  66 ++
 .../615f38cabc64e3556f98cc1a.md               |  65 ++
 .../615f3949f58e12577dcefb00.md               |  61 ++
 .../615f39d7da41b15851fa3fb9.md               |  66 ++
 .../615f3b091162165948e1cb33.md               |  72 ++
 .../615f3cafd794015aa9547a6d.md               |  76 ++
 .../615f3d9e59db4b5b8e960762.md               |  70 ++
 .../615f3e1b7233ee5c7595771f.md               |  71 ++
 .../615f3e4af8008c5d494d3afe.md               |  80 ++
 .../615f3ed16592445e57941aec.md               |  96 ++
 .../615f405b89a7ec5f8e2d11f4.md               |  91 ++
 .../615f40b01f680e608d360ed4.md               |  84 ++
 .../615f4172e9eec061d6456221.md               |  91 ++
 .../615f41c979787462e76dab90.md               | 104 +++
 .../615f423cf65d5864132a0956.md               |  86 ++
 .../615f42a021625f656101ef93.md               | 100 ++
 .../615f4bfb9de4a16703b56eb6.md               |  92 ++
 .../615f4ce9d877b668417c0c42.md               | 104 +++
 .../615f4dde9d72e3694cb9ee3b.md               | 105 +++
 .../615f4ec58334106a4170c2a8.md               | 105 +++
 .../615f4f9e4a40566b776a8f38.md               | 111 +++
 .../615f50473cc0196c6dd3892a.md               | 101 ++
 .../615f51257a8a516d80b6c743.md               | 113 +++
 .../615f51e4e5b24a6e80eccce1.md               | 128 +++
 .../615f522dea4f776f64dc3e91.md               | 115 +++
 .../615f5486b8fd4b71633f69b0.md               | 143 +++
 .../615f575b50b91e72af079480.md               | 144 +++
 .../615f5af373a68e744a3c5a76.md               | 141 +++
 .../615f5fd85d0062761f288364.md               | 134 +++
 .../615f61338c8ca176d6445574.md               | 141 +++
 .../615f666ac5edea782feb7e75.md               | 142 +++
 .../615f671b6d1919792745aa5d.md               | 167 ++++
 .../615f6823d0815b7a991f2a75.md               | 157 ++++
 .../615f6b2d164f81809efd9bdc.md               | 182 ++++
 .../615f6cc778f7698258467596.md               | 172 ++++
 .../615f6fddaac1e083502d3e6a.md               | 148 +++
 .../615f70077a4ff98424236c1e.md               | 163 ++++
 .../615f72a872354a850d4f533e.md               | 160 ++++
 .../615f74a71f1e498619e38ee8.md               | 166 ++++
 .../615f7ad94380408d971d14f6.md               | 181 ++++
 .../615f7bc680f7168ea01ebf99.md               | 165 ++++
 .../615f7c71eab8218f846e4503.md               | 196 ++++
 .../615f7d489a581590d1350288.md               | 165 ++++
 .../615f7de4487b64919bb4aa5e.md               | 215 +++++
 .../615f7e7281626a92bbd62da8.md               | 205 +++++
 .../615f7ecb09de9a938ef94756.md               | 210 +++++
 .../615f7fa959ab75948f96a0d6.md               | 183 ++++
 .../615f808d85793195b0f53be9.md               | 185 ++++
 .../615f829d07b18f96f6f6684b.md               | 169 ++++
 .../615f83ef928ec9982b785b6a.md               | 182 ++++
 .../615f84f246e8ba98e3cd97be.md               | 211 +++++
 .../615f887466db4ba14b5342cc.md               | 208 +++++
 .../615f89e055040ba294719d2f.md               | 195 ++++
 .../615f8bfe0f30a1a3c340356b.md               | 219 +++++
 .../615f8f1223601fa546e93f31.md               | 202 ++++
 .../615f905fbd1017a65ca224eb.md               | 211 +++++
 .../615f94786869e1a7fec54375.md               | 196 ++++
 .../615f951dff9317a900ef683f.md               | 365 ++++++++
 .../635bde33c91c80540eae239b.md               | 153 ++++
 .../6395d33ab5d91bf317107c48.md               | 117 +++
 .../6396e33fe478dd264ebbf278.md               | 135 +++
 .../667d1bb875f5961913176069.md               | 147 +++
 .../612e78af05201622d4bab8aa.md               |  58 ++
 .../612e7d1c29fb872d6384379c.md               |  60 ++
 .../612e804c54d5e7308d7ebe56.md               |  60 ++
 .../612e813b3ba67633222cbe54.md               |  95 ++
 .../612e8279827a28352ce83a72.md               |  74 ++
 .../612e83ec2eca1e370f830511.md               | 107 +++
 .../612e89562043183c86df287c.md               |  77 ++
 .../612e89d254fe5d3df7d6693d.md               |  83 ++
 .../612e8eebe3a6dc3fcc33a66f.md               |  95 ++
 .../612e95ef2e4bdf41f69067f9.md               |  81 ++
 .../612e96fc87fe8e44f69f7ec5.md               | 102 +++
 .../612e98f3245c98475e49cfc6.md               |  88 ++
 .../612e9a21381a1949327512e6.md               |  89 ++
 .../612e9d142affc44a453655db.md               | 117 +++
 .../612e9f1e7e5ccd4fa9ada0be.md               | 103 +++
 .../612ea4c4993aba52ab4aa32e.md               | 119 +++
 .../612ea97df5742154772f312e.md               | 110 +++
 .../612ead8788d28655ef8db056.md               | 112 +++
 .../612eaf56b7ba3257fdbfb0db.md               | 144 +++
 .../612eb4893b63c75bb9251ddf.md               | 129 +++
 .../612eb75153591b5e3b1ab65e.md               | 115 +++
 .../612eb7ca8c275d5f89c73333.md               | 116 +++
 .../612eb8e984cd73677a92b7e9.md               | 117 +++
 .../612eb934f64a4d6890a45518.md               | 118 +++
 .../612ebcba99bfa46a15370b11.md               | 139 +++
 .../612ebe7fe6d07e6b76d1cae2.md               | 133 +++
 .../612ebedec97e096c8bf64999.md               | 136 +++
 .../612ebf9a210f2b6d77001e68.md               | 139 +++
 .../612ec0490ae8626e9adf82e4.md               | 133 +++
 .../612ec19d5268da7074941f84.md               | 154 ++++
 .../612ec29c84b9a6718b1f5cec.md               | 288 ++++++
 .../66fbcdfed6848e48947dbbc9.md               |  36 +
 .../66fbcf750a62784cf11f562d.md               |  81 ++
 .../66fbcf750a62784cf11f562e.md               | 152 +++
 .../66fbcf750a62784cf11f5630.md               |  98 ++
 .../66fbcf750a62784cf11f5631.md               | 104 +++
 .../66fbcf750a62784cf11f5632.md               | 105 +++
 .../66fbcf750a62784cf11f5633.md               | 106 +++
 .../66fbcf750a62784cf11f5634.md               | 133 +++
 .../66fbcf750a62784cf11f5635.md               | 124 +++
 .../66fbcf750a62784cf11f5636.md               | 124 +++
 .../66fbcf750a62784cf11f5637.md               | 186 ++++
 .../66ff02792b3042a2b811f475.md               |  86 ++
 .../670e4f45f7116c0f216a5177.md               | 135 +++
 .../60a3e3396c7b40068ad6996b.md               |  43 +
 .../60a3e3396c7b40068ad6996c.md               |  42 +
 .../60a3e3396c7b40068ad6996d.md               |  41 +
 .../60a3e3396c7b40068ad6996e.md               |  43 +
 .../60a3e3396c7b40068ad6996f.md               |  47 +
 .../60a3e3396c7b40068ad69970.md               |  53 ++
 .../60a3e3396c7b40068ad69971.md               |  67 ++
 .../60a3e3396c7b40068ad69972.md               |  54 ++
 .../60a3e3396c7b40068ad69973.md               |  55 ++
 .../60a3e3396c7b40068ad69974.md               |  67 ++
 .../60a3e3396c7b40068ad69975.md               |  67 ++
 .../60a3e3396c7b40068ad69976.md               |  64 ++
 .../60a3e3396c7b40068ad69977.md               |  65 ++
 .../60a3e3396c7b40068ad69978.md               |  66 ++
 .../60a3e3396c7b40068ad69979.md               |  71 ++
 .../60a3e3396c7b40068ad6997a.md               |  74 ++
 .../60a3e3396c7b40068ad6997b.md               |  70 ++
 .../60a3e3396c7b40068ad6997c.md               |  71 ++
 .../60a3e3396c7b40068ad6997d.md               |  74 ++
 .../60a3e3396c7b40068ad6997e.md               |  75 ++
 .../60a3e3396c7b40068ad6997f.md               |  82 ++
 .../60a3e3396c7b40068ad69980.md               |  84 ++
 .../60a3e3396c7b40068ad69981.md               |  84 ++
 .../60a3e3396c7b40068ad69982.md               |  79 ++
 .../60a3e3396c7b40068ad69983.md               |  80 ++
 .../60a3e3396c7b40068ad69984.md               |  81 ++
 .../60a3e3396c7b40068ad69986.md               |  93 ++
 .../60a3e3396c7b40068ad69987.md               |  94 ++
 .../60a3e3396c7b40068ad69988.md               |  87 ++
 .../60a3e3396c7b40068ad69989.md               |  88 ++
 .../60a3e3396c7b40068ad6998a.md               |  89 ++
 .../60a3e3396c7b40068ad6998b.md               |  93 ++
 .../60a3e3396c7b40068ad6998c.md               | 100 ++
 .../60a3e3396c7b40068ad6998d.md               | 108 +++
 .../60a3e3396c7b40068ad6998e.md               |  95 ++
 .../60a3e3396c7b40068ad6998f.md               |  98 ++
 .../60a3e3396c7b40068ad69990.md               |  97 ++
 .../60a3e3396c7b40068ad69991.md               |  98 ++
 .../60a3e3396c7b40068ad69992.md               | 101 ++
 .../60a3e3396c7b40068ad69993.md               | 100 ++
 .../60a3e3396c7b40068ad69994.md               | 103 +++
 .../60a3e3396c7b40068ad69995.md               | 104 +++
 .../60a3e3396c7b40068ad69996.md               | 103 +++
 .../60a3e3396c7b40068ad69997.md               | 180 ++++
 .../5dc17d3bf86c76b9248c6eb4.md               |   6 +-
 .../5dc17dc8f86c76b9248c6eb5.md               |  11 +-
 .../5dc2385ff86c76b9248c6eb7.md               |   8 +-
 .../5dc23991f86c76b9248c6eb8.md               |  12 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../5dc24073f86c76b9248c6ebb.md               |   8 +-
 .../5dc24165f86c76b9248c6ebc.md               |   2 +-
 .../5dc24614f86c76b9248c6ebd.md               |   2 +-
 .../5ddbd81294d8ddc1510a8e56.md               |  12 +-
 .../5dfa2407b521be39a3de7be1.md               |  15 +-
 .../5dfa30b9eacea3f48c6300ad.md               |  10 +-
 .../5dfa3589eacea3f48c6300ae.md               |   6 +-
 .../5dfa371beacea3f48c6300af.md               |   6 +-
 .../5dfa37b9eacea3f48c6300b0.md               |   6 +-
 .../5dfb5ecbeacea3f48c6300b1.md               |   6 +-
 .../5dfb6250eacea3f48c6300b2.md               |   6 +-
 .../5dfb655eeacea3f48c6300b3.md               |  12 +-
 .../5dfb6a35eacea3f48c6300b4.md               |   6 +-
 .../5ef9b03c81a63668521804d0.md               |   6 +-
 .../5ef9b03c81a63668521804d1.md               |   6 +-
 .../5ef9b03c81a63668521804d2.md               |   6 +-
 .../5ef9b03c81a63668521804d3.md               |   6 +-
 .../5ef9b03c81a63668521804d4.md               |   6 +-
 .../5ef9b03c81a63668521804d5.md               |   6 +-
 .../5ef9b03c81a63668521804d6.md               |   6 +-
 .../5ef9b03c81a63668521804d7.md               |   6 +-
 .../5ef9b03c81a63668521804d8.md               |   6 +-
 .../5ef9b03c81a63668521804d9.md               |   6 +-
 .../5ef9b03c81a63668521804da.md               |   6 +-
 .../5ef9b03c81a63668521804db.md               |   6 +-
 .../5ef9b03c81a63668521804dc.md               |   6 +-
 .../5ef9b03c81a63668521804dd.md               |   6 +-
 .../5ef9b03c81a63668521804de.md               |   7 +-
 .../5ef9b03c81a63668521804df.md               |   6 +-
 .../5ef9b03c81a63668521804e1.md               |   6 +-
 .../5ef9b03c81a63668521804e2.md               |   6 +-
 .../5ef9b03c81a63668521804e3.md               |   6 +-
 .../5ef9b03c81a63668521804e5.md               |   6 +-
 .../5ef9b03c81a63668521804e7.md               |   6 +-
 .../5ef9b03c81a63668521804e8.md               |  10 +-
 .../5ef9b03c81a63668521804e9.md               |   8 +-
 .../5ef9b03c81a63668521804ea.md               |   6 +-
 .../5ef9b03c81a63668521804eb.md               |   6 +-
 .../5ef9b03c81a63668521804ec.md               |   6 +-
 .../5ef9b03c81a63668521804ee.md               |   6 +-
 .../5efada803cbd2bbdab94e332.md               |  13 +-
 .../5efae0543cbd2bbdab94e333.md               |   6 +-
 .../5efae16e3cbd2bbdab94e334.md               |   6 +-
 .../5efb23e70dc218d6c85f89b1.md               |   6 +-
 .../5efb2c990dc218d6c85f89b2.md               |   6 +-
 .../5efc4f528d6a74d05e68af74.md               |   6 +-
 .../5efc518e8d6a74d05e68af75.md               |   6 +-
 .../5efc54138d6a74d05e68af76.md               |   6 +-
 .../5efc575c8d6a74d05e68af77.md               |   6 +-
 .../5f05a1d8e233dff4a68508d8.md               |   6 +-
 .../5f07be6ef7412fbad0c5626b.md               |  12 +-
 .../5f07c98cdb9413cbd4b16750.md               |   6 +-
 .../5f07fb1579dc934717801375.md               |   6 +-
 .../5f0d48e7b435f13ab6550051.md               |   6 +-
 .../5f0d4ab1b435f13ab6550052.md               |   6 +-
 .../5f0d4d04b435f13ab6550053.md               |   6 +-
 .../5f1a80975fc4bcae0edb3497.md               |   7 +-
 .../5f1a89f1190aff21ae42105a.md               |   6 +-
 .../62bb4009e3458a128ff57d5d.md               |   8 +-
 .../671141d8e32fe934c26fa1be.md               |  57 ++
 .../671141f948cbab359e74cc93.md               |  48 +
 .../671141feba228a35cefba82d.md               |  57 ++
 .../671144cdcc01d73f7dd79dc9.md               |  47 +
 .../7cf9b03d81a65668421804c3.md               |   6 +-
 .../657cd5bac0e2df08b433b29d.md               |  20 +-
 .../66edd630f7666cfa54b404d0.md               | 200 ++--
 .../66ed8ff4f45ce3ece4053eb4.md               | 200 ++--
 .../66f1af82732957c895f0b21a.md               | 200 ++--
 .../619665c9abd72906f3ad30f9.md               |  65 ++
 .../61967e74a8e3690ab6292daa.md               |  56 ++
 .../61968df2acd5550bf1616c34.md               |  53 ++
 .../61968e9243a4090cc805531c.md               |  51 ++
 .../61968f8877c6720d6d61aaf5.md               |  64 ++
 .../619691693bc14b0e528f5a20.md               |  66 ++
 .../6196928658b6010f28c39484.md               |  58 ++
 .../619692ff79f5770fc6d8c0b4.md               |  73 ++
 .../6196990f966e8f10a40094f6.md               |  75 ++
 .../619699c10a0f6e11591d73c4.md               |  74 ++
 .../61969aa6acef5b12200f672e.md               |  83 ++
 .../61969c487ced6f12db8fef94.md               |  89 ++
 .../61969d66cfcdba137d021558.md               |  76 ++
 .../61969e7451455614217e901b.md               |  91 ++
 .../6196adc17f77a714d51485f2.md               |  90 ++
 .../6196aead7ac7bf1584b17a7f.md               |  86 ++
 .../6196ce0415498d2463989e84.md               |  92 ++
 .../6196cee94c6da1253809dff9.md               | 100 ++
 .../6196d00a5d7292262bc02f4c.md               |  87 ++
 .../6196d0cda039d026f7f78d1e.md               | 100 ++
 .../6196d1ac33c68d27dcda5796.md               | 131 +++
 .../6196d213d99f16287bff22ae.md               | 104 +++
 .../6196d2c0f22ca0293107c048.md               | 112 +++
 .../6196d32d1340d829f0f6f57d.md               | 105 +++
 .../6196d41d40bf9b2aaea5d520.md               | 107 +++
 .../6197cff995d03905b0cca8ad.md               | 118 +++
 .../6197f40a16afea068c7e60c8.md               | 125 +++
 .../6197f667297bb30a552ce017.md               |  65 ++
 .../61993b72e874e709b8dfd666.md               | 128 +++
 .../61993cf26a8e0f0a553db223.md               | 122 +++
 .../61993dbb35adf30b10d49e38.md               | 139 +++
 .../61993e9adc9e9a0bb4d28fff.md               | 133 +++
 .../6199409834ccaf0d10736596.md               | 139 +++
 .../6199429802b7c10dc79ff871.md               | 154 ++++
 .../619943285a41720e6370d985.md               | 156 ++++
 .../619943876b706d0f35c01dbc.md               | 146 +++
 .../6199442866286d0ff421a4fc.md               | 148 +++
 .../619bcf239fc15905ecd66fce.md               | 145 +++
 .../619be73b3c806006ccc00bb0.md               | 158 ++++
 .../619be7af7b0bf60770f5d2a4.md               | 155 ++++
 .../619be80062551a080e32c821.md               | 160 ++++
 .../619be8ce4ea49008c5bfbc30.md               | 152 +++
 .../619be946958c6009844f1dee.md               | 166 ++++
 .../619c155df0063a0a3fec0e32.md               | 193 ++++
 .../619c16debd0c270b01c5ce38.md               | 165 ++++
 .../619cfdf2e63ddf05feab86ad.md               | 169 ++++
 .../619d019488f98c06acbbb71a.md               | 171 ++++
 .../619d022dc8400c0763829a17.md               | 177 ++++
 .../619d02c7bc95bf0827a5d296.md               | 181 ++++
 .../619d033915012509031f309a.md               | 184 ++++
 .../619d03dadadb6509a16f4f5f.md               | 210 +++++
 .../619d0503e03a790a4179d463.md               | 206 +++++
 .../619d05c54dabca0b10058235.md               | 197 ++++
 .../619d0882f54bf40bdc4671ed.md               | 197 ++++
 .../619d090cd8d6db0c93dc5087.md               | 222 +++++
 .../619d0b51ca42ed0d74582186.md               | 207 +++++
 .../619d0bc9cb05360e1bf549c3.md               | 200 ++++
 .../619d0c1594c38c0ebae75878.md               | 215 +++++
 .../619d0d18ca99870f884a7bff.md               | 225 +++++
 .../619d0daf214542102739b0da.md               | 227 +++++
 .../619d0e56f9ca9710fcb974e3.md               | 226 +++++
 .../619d0eec0ac40611b41e2ccc.md               | 247 +++++
 .../619d0fc9825c271253df28d4.md               | 238 +++++
 .../619d102d786c3d13124c37c6.md               | 231 +++++
 .../619d107edf7ddf13cc77106a.md               | 246 +++++
 .../619d10cc98145f14820399c5.md               | 271 ++++++
 .../619d115e2adcd71538e82ebb.md               | 256 ++++++
 .../619d11e6d5ef9515d2a16033.md               | 262 ++++++
 .../619d129a417d0716a94de913.md               | 267 ++++++
 .../619d1340361095175f4b5115.md               | 267 ++++++
 .../619d15797b580c1828b05426.md               | 263 ++++++
 .../619d15d955d9d418c4487bbc.md               | 264 ++++++
 .../619d1629a8adc61960ca8b40.md               | 278 ++++++
 .../619d1c5fc9f8941a400955da.md               | 272 ++++++
 .../619d1dab9ff3421ae1976991.md               | 273 ++++++
 .../619d1deb8b04811b8839ffe4.md               | 281 ++++++
 .../619d1e7a8e81a61c5a819dc4.md               | 272 ++++++
 .../619d1ed33c9a071cf657a0d6.md               | 306 +++++++
 .../619d1fb5d244c31db8a7fdb7.md               | 295 ++++++
 .../619d204bd73ae51e743b8e94.md               | 288 ++++++
 .../619d20b12996101f430920fb.md               | 304 ++++++
 .../619d21fe6a3f9b2016be9d9d.md               | 304 ++++++
 .../619d229b0e542520cd91c685.md               | 312 +++++++
 .../619d23089e787e216a7043d6.md               | 295 ++++++
 .../619d237a107c10221ed743fa.md               | 328 +++++++
 .../619d26b12e651022d80cd017.md               | 317 +++++++
 .../619d2712853306238f41828e.md               | 332 +++++++
 .../619d2b7a84e78b246f2d17a2.md               | 340 +++++++
 .../619d2bd9c1d43c2526e96f1f.md               | 325 +++++++
 .../619d2d4e80400325ff89664a.md               | 326 +++++++
 .../619d2ebc81ba81271460850d.md               | 326 +++++++
 .../619d2f0e9440bc27caee1cec.md               | 327 +++++++
 .../619d2fd3ff4f772882e3d998.md               | 323 +++++++
 .../619d30350883802921bfcccc.md               | 333 +++++++
 .../619d324f5915c929f36ae91d.md               | 351 +++++++
 .../619d32c7fa21f32aaa91d499.md               | 347 +++++++
 .../619d333b738e3c2b5d58b095.md               | 347 +++++++
 .../619d337765b9f02c10e93722.md               | 362 ++++++++
 .../619d33c51140292cc5a21742.md               | 357 ++++++++
 .../619d3482f505452d861d0f62.md               | 347 +++++++
 .../619d3561a951bf2e41a24f10.md               | 346 +++++++
 .../619d36103839c82efa95dd34.md               | 357 ++++++++
 .../619d3711d04d623000013e9e.md               | 670 ++++++++++++++
 .../61a8fe15a6a31306e60d1e89.md               |  55 ++
 .../5d822fd413a79914d39e9904.md               |  20 +-
 .../5dc17d3bf86c76b9248c6eb4.md               |   6 +-
 .../5dc17dc8f86c76b9248c6eb5.md               |  11 +-
 .../5dc2385ff86c76b9248c6eb7.md               |   8 +-
 .../5dc23991f86c76b9248c6eb8.md               |  12 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../5dc24073f86c76b9248c6ebb.md               |   8 +-
 .../5dc24165f86c76b9248c6ebc.md               |   2 +-
 .../5dc24614f86c76b9248c6ebd.md               |   2 +-
 .../5ddbd81294d8ddc1510a8e56.md               |  12 +-
 .../5dfa2407b521be39a3de7be1.md               |  15 +-
 .../5dfa30b9eacea3f48c6300ad.md               |  10 +-
 .../5dfa3589eacea3f48c6300ae.md               |   6 +-
 .../5dfa371beacea3f48c6300af.md               |   6 +-
 .../5dfa37b9eacea3f48c6300b0.md               |   6 +-
 .../5dfb5ecbeacea3f48c6300b1.md               |   6 +-
 .../5dfb6250eacea3f48c6300b2.md               |   6 +-
 .../5dfb655eeacea3f48c6300b3.md               |  12 +-
 .../5dfb6a35eacea3f48c6300b4.md               |   6 +-
 .../5ef9b03c81a63668521804d0.md               |   6 +-
 .../5ef9b03c81a63668521804d1.md               |   6 +-
 .../5ef9b03c81a63668521804d2.md               |   6 +-
 .../5ef9b03c81a63668521804d3.md               |   6 +-
 .../5ef9b03c81a63668521804d4.md               |   6 +-
 .../5ef9b03c81a63668521804d5.md               |   6 +-
 .../5ef9b03c81a63668521804d6.md               |   6 +-
 .../5ef9b03c81a63668521804d7.md               |   6 +-
 .../5ef9b03c81a63668521804d8.md               |   6 +-
 .../5ef9b03c81a63668521804d9.md               |   6 +-
 .../5ef9b03c81a63668521804da.md               |   6 +-
 .../5ef9b03c81a63668521804db.md               |   6 +-
 .../5ef9b03c81a63668521804dc.md               |   6 +-
 .../5ef9b03c81a63668521804dd.md               |   6 +-
 .../5ef9b03c81a63668521804de.md               |   7 +-
 .../5ef9b03c81a63668521804df.md               |   6 +-
 .../5ef9b03c81a63668521804e1.md               |   6 +-
 .../5ef9b03c81a63668521804e2.md               |   6 +-
 .../5ef9b03c81a63668521804e3.md               |   6 +-
 .../5ef9b03c81a63668521804e5.md               |   6 +-
 .../5ef9b03c81a63668521804e7.md               |   6 +-
 .../5ef9b03c81a63668521804e8.md               |  10 +-
 .../5ef9b03c81a63668521804e9.md               |   8 +-
 .../5ef9b03c81a63668521804ea.md               |   6 +-
 .../5ef9b03c81a63668521804eb.md               |   6 +-
 .../5ef9b03c81a63668521804ec.md               |   6 +-
 .../5ef9b03c81a63668521804ee.md               |   6 +-
 .../5efada803cbd2bbdab94e332.md               |  13 +-
 .../5efae0543cbd2bbdab94e333.md               |   6 +-
 .../5efae16e3cbd2bbdab94e334.md               |   6 +-
 .../5efb23e70dc218d6c85f89b1.md               |   6 +-
 .../5efb2c990dc218d6c85f89b2.md               |   6 +-
 .../5efc4f528d6a74d05e68af74.md               |   6 +-
 .../5efc518e8d6a74d05e68af75.md               |   6 +-
 .../5efc54138d6a74d05e68af76.md               |   6 +-
 .../5efc575c8d6a74d05e68af77.md               |   6 +-
 .../5f05a1d8e233dff4a68508d8.md               |   6 +-
 .../5f07be6ef7412fbad0c5626b.md               |  12 +-
 .../5f07c98cdb9413cbd4b16750.md               |   6 +-
 .../5f07fb1579dc934717801375.md               |   6 +-
 .../5f0d48e7b435f13ab6550051.md               |   6 +-
 .../5f0d4ab1b435f13ab6550052.md               |   6 +-
 .../5f0d4d04b435f13ab6550053.md               |   6 +-
 .../5f1a80975fc4bcae0edb3497.md               |   7 +-
 .../5f1a89f1190aff21ae42105a.md               |   6 +-
 .../62bb4009e3458a128ff57d5d.md               |   8 +-
 .../671141d8e32fe934c26fa1be.md               |  57 ++
 .../671141f948cbab359e74cc93.md               |  48 +
 .../671141feba228a35cefba82d.md               |  57 ++
 .../671144cdcc01d73f7dd79dc9.md               |  47 +
 .../7cf9b03d81a65668421804c3.md               |   6 +-
 .../657ddcd61f516cacdc7a04ca.md               |  30 +-
 .../657e4e3b02a2128049c344c8.md               |  30 +-
 .../66b205e6eacba4c4e54ea434.md               |   4 +-
 .../66c06fad3475cd92421b9ac2.md               |   4 +-
 .../587d78af367417b2b2512b04.md               |   2 +-
 .../669e2f60e83c011754f711f9.md               |   2 +-
 .../bd7158d8c442eddfaeb5bd18.md               |   2 +-
 .../670803abcb3e980233da4768.md               | 121 +++
 .../6708143cab2b583ecd3324f5.md               | 121 +++
 .../6708382cf088b216580a9ff1.md               | 125 +++
 .../67083868d5fdcb17bf8c14bd.md               | 121 +++
 .../670838977810401844af6fe0.md               | 121 +++
 .../670838b10ee87a18e5faff62.md               | 121 +++
 .../670838e914096b194b0c51aa.md               | 121 +++
 .../670839051794aa19fcef6dc8.md               | 120 +++
 .../67083952f800051a8a21fcfd.md               | 121 +++
 .../6708396caa00e11b597b3365.md               | 121 +++
 .../66edd630f7666cfa54b404d0.md               | 200 ++--
 .../66ed8fa2f45ce3ece4053eab.md               |   2 +-
 .../66ed8ff4f45ce3ece4053eb4.md               | 200 ++--
 .../66edd3403d7077eece6dc4b6.md               | 200 ++--
 .../66edd4bc0ce399f475ad6f9b.md               | 200 ++--
 .../quiz-nano/66f1b03b922a53cb231e1c0d.md     |   2 +-
 .../66f1a2009e65c9a40a26d51e.md               | 201 ++--
 .../66f1af82732957c895f0b21a.md               | 200 ++--
 .../66ed9034f45ce3ece4053ebd.md               | 200 ++--
 .../66ed9043f45ce3ece4053ebf.md               | 200 ++--
 .../61fd5a93fd62bb35968adeab.md               |  61 ++
 .../61fd6343fb42013d99bcd7f3.md               |  48 +
 .../61fd66c687e610436494c6f1.md               |  52 ++
 .../61fd67a656743144844941cb.md               |  78 ++
 .../61fd6ab779390f49148773bb.md               |  65 ++
 .../61fd6b7c83dbf54a08cf0498.md               |  79 ++
 .../61fd6cc9475a784b7776233e.md               |  80 ++
 .../61fd70336ebb3e4f62ee81ba.md               |  73 ++
 .../61fd719788899952e67692b9.md               |  86 ++
 .../61fd71d596e8f253b9408b39.md               |  86 ++
 .../61fd75ea7f663457612dba02.md               | 125 +++
 .../61fd7648a7ba2e5882436831.md               |  96 ++
 .../61fd778081276b59d59abad6.md               | 134 +++
 .../61fd77f7ad2aeb5ae34d07d6.md               | 138 +++
 .../61fd78621573aa5e8b512f5e.md               | 142 +++
 .../61fd7a160ed17960e971f28b.md               | 146 +++
 .../61fd7b3fcaa5406257abc5d1.md               | 130 +++
 .../61fd8e491324ce717da97ffe.md               | 119 +++
 .../61fd8fd08af43372f02952d0.md               | 149 +++
 .../61fd9126aa72a474301fc49f.md               | 131 +++
 .../61fd933ba685de776a94997e.md               | 169 ++++
 .../61fd94056e0355785fbba4d3.md               | 173 ++++
 .../61fd986ddbcbd47ba8fbc5ec.md               | 177 ++++
 .../61fd990577d8227dd93fbeeb.md               | 181 ++++
 .../61fd9a4ff2fc4481b9157bd7.md               | 165 ++++
 .../61fd9ad665a4a282c8106be3.md               | 198 ++++
 .../61fd9b7285bde783ad5b8aac.md               | 208 +++++
 .../61fd9d9fbdfe078800317055.md               | 158 ++++
 .../61fda307bde0b091cf7d884a.md               | 168 ++++
 .../61fda339eadcfd92a6812bed.md               | 171 ++++
 .../61fdac1e31692f9a9ad97295.md               | 172 ++++
 .../61fdaea3999cb19d76ce717b.md               | 172 ++++
 .../61fdaf9ff894b6a084ecdc1b.md               | 174 ++++
 .../61fdafe6f07fd7a1c6785bc2.md               | 182 ++++
 .../61fdb04d9939f0a26ca51c2b.md               | 192 ++++
 .../620159cd5431aa34bc6a4c9c.md               | 198 ++++
 .../62015a5da1c95c358f079ebb.md               | 194 ++++
 .../62015cd2654a1139321a89d2.md               | 196 ++++
 .../62015d8942384c3aed48329e.md               | 212 +++++
 .../620167374bb8b4455cd11125.md               | 224 +++++
 .../620174ed519dd7506c1a4b61.md               | 212 +++++
 .../620175b3710a0951cfa86edf.md               | 223 +++++
 .../6201782cc420715562f36271.md               | 232 +++++
 .../620179bc0a6a2358c72b90ad.md               | 224 +++++
 .../62017b6f47454059bf2d3bd1.md               | 230 +++++
 .../62017f47c87be96457c49f46.md               | 291 ++++++
 .../62017fa5bbef406580ceb44f.md               | 236 +++++
 .../62018243f046a368fab8ffb6.md               | 238 +++++
 .../6201830cb0c74b69f1b41635.md               | 242 +++++
 .../620186f4b6b8356d2def576b.md               | 252 +++++
 .../62018ba1aa263770c953be66.md               | 251 +++++
 .../62018c3e94434a71af1d5eaa.md               | 261 ++++++
 .../62018ec29b3ae674f40bef31.md               | 255 ++++++
 .../62019093fe30e278e797d2f6.md               | 265 ++++++
 .../620191707bc65579ddd3ce15.md               | 270 ++++++
 .../620192a767533a7ad19d96d7.md               | 277 ++++++
 .../6201995d9ab88e80f1989dce.md               | 274 ++++++
 .../620199c7a7a32c81d4db3410.md               | 278 ++++++
 .../6201a1a7af32c287bd6b8183.md               | 284 ++++++
 .../6201a1cc668a34888f5b2f52.md               | 288 ++++++
 .../6201a20d742f5c89736c8cfb.md               | 302 ++++++
 .../6201a42e39bf3b95b6a33bf3.md               | 320 +++++++
 .../6201a4adcc6414968b391592.md               | 296 ++++++
 .../6201a5258af7b398b030bfaf.md               | 312 +++++++
 .../6201a59be346d399c21d10b1.md               | 589 ++++++++++++
 .../64076bbeba941114b0027b6a.md               | 209 +++++
 .../5d822fd413a79914d39e98cc.md               |  76 ++
 .../5d822fd413a79914d39e98cd.md               |  56 ++
 .../5d822fd413a79914d39e98ce.md               |  61 ++
 .../5d822fd413a79914d39e98cf.md               |  69 ++
 .../5d822fd413a79914d39e98d0.md               |  65 ++
 .../5d822fd413a79914d39e98d1.md               |  68 ++
 .../5d822fd413a79914d39e98d2.md               |  83 ++
 .../5d822fd413a79914d39e98d3.md               | 105 +++
 .../5d822fd413a79914d39e98d4.md               | 138 +++
 .../5d822fd413a79914d39e98d5.md               | 112 +++
 .../5d822fd413a79914d39e98d6.md               | 103 +++
 .../5d822fd413a79914d39e98d7.md               | 100 ++
 .../5d822fd413a79914d39e98d8.md               | 124 +++
 .../5d822fd413a79914d39e98d9.md               |  99 ++
 .../5d822fd413a79914d39e98da.md               | 133 +++
 .../5d822fd413a79914d39e98db.md               | 133 +++
 .../5d822fd413a79914d39e98dc.md               | 127 +++
 .../5d822fd413a79914d39e98dd.md               | 142 +++
 .../5d822fd413a79914d39e98de.md               | 140 +++
 .../5d822fd413a79914d39e98df.md               | 124 +++
 .../5d822fd413a79914d39e98e0.md               | 142 +++
 .../5d822fd413a79914d39e98e1.md               | 155 ++++
 .../5d822fd413a79914d39e98e2.md               | 135 +++
 .../5d822fd413a79914d39e98e3.md               | 144 +++
 .../5d822fd413a79914d39e98e4.md               | 147 +++
 .../5d822fd413a79914d39e98e5.md               | 161 ++++
 .../5d822fd413a79914d39e98e6.md               | 192 ++++
 .../5d822fd413a79914d39e98e7.md               | 253 +++++
 .../5d822fd413a79914d39e98e8.md               | 190 ++++
 .../5d822fd413a79914d39e98e9.md               | 223 +++++
 .../5d822fd413a79914d39e98ea.md               | 181 ++++
 .../5d822fd413a79914d39e98eb.md               | 203 +++++
 .../5d822fd413a79914d39e98ec.md               | 203 +++++
 .../5d822fd413a79914d39e98ed.md               | 202 ++++
 .../5d822fd413a79914d39e98ee.md               | 196 ++++
 .../5d822fd413a79914d39e98ef.md               | 197 ++++
 .../5d822fd413a79914d39e98f0.md               | 218 +++++
 .../5d822fd413a79914d39e98f1.md               | 223 +++++
 .../5d822fd413a79914d39e98f2.md               | 237 +++++
 .../5d822fd413a79914d39e98f3.md               | 222 +++++
 .../5d822fd413a79914d39e98f4.md               | 227 +++++
 .../5d822fd413a79914d39e98f5.md               | 198 ++++
 .../5d822fd413a79914d39e98f6.md               | 207 +++++
 .../5d822fd413a79914d39e98f7.md               | 203 +++++
 .../5d822fd413a79914d39e98f8.md               | 210 +++++
 .../5d822fd413a79914d39e98f9.md               | 207 +++++
 .../5d822fd413a79914d39e98fa.md               | 211 +++++
 .../5d822fd413a79914d39e98fb.md               | 240 +++++
 .../5d822fd413a79914d39e98fc.md               | 211 +++++
 .../5d822fd413a79914d39e98fd.md               | 209 +++++
 .../5d822fd413a79914d39e98fe.md               | 260 ++++++
 .../5d822fd413a79914d39e98ff.md               | 238 +++++
 .../5d822fd413a79914d39e9900.md               | 224 +++++
 .../5d822fd413a79914d39e9901.md               | 224 +++++
 .../5d822fd413a79914d39e9902.md               | 227 +++++
 .../5d822fd413a79914d39e9903.md               | 223 +++++
 .../5d822fd413a79914d39e9904.md               | 245 +++++
 .../5d822fd413a79914d39e9905.md               | 223 +++++
 .../5d822fd413a79914d39e9906.md               | 249 +++++
 .../5d822fd413a79914d39e9907.md               | 258 ++++++
 .../5d822fd413a79914d39e9908.md               | 258 ++++++
 .../5d822fd413a79914d39e9909.md               | 245 +++++
 .../5d822fd413a79914d39e990a.md               | 277 ++++++
 .../5d822fd413a79914d39e990b.md               | 254 ++++++
 .../5d822fd413a79914d39e990c.md               | 253 +++++
 .../5d822fd413a79914d39e990d.md               | 255 ++++++
 .../5d822fd413a79914d39e990e.md               | 265 ++++++
 .../5d822fd413a79914d39e990f.md               | 279 ++++++
 .../5d822fd413a79914d39e9910.md               | 266 ++++++
 .../5d822fd413a79914d39e9911.md               | 291 ++++++
 .../5d822fd413a79914d39e9912.md               | 287 ++++++
 .../5d822fd413a79914d39e9913.md               | 280 ++++++
 .../5d822fd413a79914d39e9914.md               | 284 ++++++
 .../5d822fd413a79914d39e9915.md               | 391 ++++++++
 .../5d822fd413a79914d39e9916.md               | 297 ++++++
 .../5d822fd413a79914d39e9917.md               | 307 +++++++
 .../5d822fd413a79914d39e9918.md               | 298 ++++++
 .../5d822fd413a79914d39e9919.md               | 301 ++++++
 .../5d822fd413a79914d39e991a.md               | 312 +++++++
 .../5d822fd413a79914d39e991b.md               | 314 +++++++
 .../5d822fd413a79914d39e991c.md               | 317 +++++++
 .../5d822fd413a79914d39e991d.md               | 315 +++++++
 .../5d822fd413a79914d39e991e.md               | 326 +++++++
 .../5d822fd413a79914d39e991f.md               | 324 +++++++
 .../5d822fd413a79914d39e9920.md               | 330 +++++++
 .../5d822fd413a79914d39e9921.md               | 348 +++++++
 .../5d822fd413a79914d39e9922.md               | 347 +++++++
 .../5d822fd413a79914d39e9923.md               | 348 +++++++
 .../5d822fd413a79914d39e9924.md               | 340 +++++++
 .../5d822fd413a79914d39e9925.md               | 346 +++++++
 .../5d822fd413a79914d39e9926.md               | 355 ++++++++
 .../5d822fd413a79914d39e9927.md               | 350 +++++++
 .../5d822fd413a79914d39e9928.md               | 349 +++++++
 .../5d822fd413a79914d39e9929.md               | 362 ++++++++
 .../5d822fd413a79914d39e992a.md               | 359 ++++++++
 .../5d822fd413a79914d39e992b.md               | 361 ++++++++
 .../5d822fd413a79914d39e992c.md               | 364 ++++++++
 .../5d822fd413a79914d39e992d.md               | 377 ++++++++
 .../5d822fd413a79914d39e992e.md               | 374 ++++++++
 .../5d822fd413a79914d39e992f.md               | 377 ++++++++
 .../5d822fd413a79914d39e9930.md               | 381 ++++++++
 .../5d822fd413a79914d39e9931.md               | 404 ++++++++
 .../5d822fd413a79914d39e9932.md               | 396 ++++++++
 .../5d822fd413a79914d39e9933.md               | 402 ++++++++
 .../5d822fd413a79914d39e9934.md               | 409 +++++++++
 .../5d822fd413a79914d39e9935.md               | 409 +++++++++
 .../5d822fd413a79914d39e9936.md               | 402 ++++++++
 .../5d822fd413a79914d39e9937.md               | 403 ++++++++
 .../5d822fd413a79914d39e9938.md               | 421 +++++++++
 .../5d822fd413a79914d39e9939.md               | 410 +++++++++
 .../5d822fd413a79914d39e993a.md               | 422 +++++++++
 .../5d822fd413a79914d39e993b.md               | 424 +++++++++
 .../5d822fd413a79914d39e993c.md               | 437 +++++++++
 .../5d822fd413a79914d39e993d.md               | 450 +++++++++
 .../5d822fd413a79914d39e993e.md               | 862 ++++++++++++++++++
 .../619665c9abd72906f3ad30f9.md               |  65 ++
 .../61967e74a8e3690ab6292daa.md               |  56 ++
 .../61968df2acd5550bf1616c34.md               |  53 ++
 .../61968e9243a4090cc805531c.md               |  51 ++
 .../61968f8877c6720d6d61aaf5.md               |  64 ++
 .../619691693bc14b0e528f5a20.md               |  66 ++
 .../6196928658b6010f28c39484.md               |  58 ++
 .../619692ff79f5770fc6d8c0b4.md               |  73 ++
 .../6196990f966e8f10a40094f6.md               |  75 ++
 .../619699c10a0f6e11591d73c4.md               |  74 ++
 .../61969aa6acef5b12200f672e.md               |  83 ++
 .../61969c487ced6f12db8fef94.md               |  89 ++
 .../61969d66cfcdba137d021558.md               |  76 ++
 .../61969e7451455614217e901b.md               |  91 ++
 .../6196adc17f77a714d51485f2.md               |  90 ++
 .../6196aead7ac7bf1584b17a7f.md               |  86 ++
 .../6196ce0415498d2463989e84.md               |  92 ++
 .../6196cee94c6da1253809dff9.md               | 100 ++
 .../6196d00a5d7292262bc02f4c.md               |  87 ++
 .../6196d0cda039d026f7f78d1e.md               | 100 ++
 .../6196d1ac33c68d27dcda5796.md               | 131 +++
 .../6196d213d99f16287bff22ae.md               | 104 +++
 .../6196d2c0f22ca0293107c048.md               | 112 +++
 .../6196d32d1340d829f0f6f57d.md               | 105 +++
 .../6196d41d40bf9b2aaea5d520.md               | 107 +++
 .../6197cff995d03905b0cca8ad.md               | 118 +++
 .../6197f40a16afea068c7e60c8.md               | 125 +++
 .../6197f667297bb30a552ce017.md               |  65 ++
 .../61993b72e874e709b8dfd666.md               | 128 +++
 .../61993cf26a8e0f0a553db223.md               | 122 +++
 .../61993dbb35adf30b10d49e38.md               | 139 +++
 .../61993e9adc9e9a0bb4d28fff.md               | 133 +++
 .../6199409834ccaf0d10736596.md               | 139 +++
 .../6199429802b7c10dc79ff871.md               | 154 ++++
 .../619943285a41720e6370d985.md               | 156 ++++
 .../619943876b706d0f35c01dbc.md               | 146 +++
 .../6199442866286d0ff421a4fc.md               | 148 +++
 .../619bcf239fc15905ecd66fce.md               | 145 +++
 .../619be73b3c806006ccc00bb0.md               | 158 ++++
 .../619be7af7b0bf60770f5d2a4.md               | 155 ++++
 .../619be80062551a080e32c821.md               | 160 ++++
 .../619be8ce4ea49008c5bfbc30.md               | 152 +++
 .../619be946958c6009844f1dee.md               | 166 ++++
 .../619c155df0063a0a3fec0e32.md               | 193 ++++
 .../619c16debd0c270b01c5ce38.md               | 165 ++++
 .../619cfdf2e63ddf05feab86ad.md               | 169 ++++
 .../619d019488f98c06acbbb71a.md               | 171 ++++
 .../619d022dc8400c0763829a17.md               | 177 ++++
 .../619d02c7bc95bf0827a5d296.md               | 181 ++++
 .../619d033915012509031f309a.md               | 184 ++++
 .../619d03dadadb6509a16f4f5f.md               | 210 +++++
 .../619d0503e03a790a4179d463.md               | 206 +++++
 .../619d05c54dabca0b10058235.md               | 197 ++++
 .../619d0882f54bf40bdc4671ed.md               | 197 ++++
 .../619d090cd8d6db0c93dc5087.md               | 222 +++++
 .../619d0b51ca42ed0d74582186.md               | 207 +++++
 .../619d0bc9cb05360e1bf549c3.md               | 200 ++++
 .../619d0c1594c38c0ebae75878.md               | 215 +++++
 .../619d0d18ca99870f884a7bff.md               | 225 +++++
 .../619d0daf214542102739b0da.md               | 227 +++++
 .../619d0e56f9ca9710fcb974e3.md               | 226 +++++
 .../619d0eec0ac40611b41e2ccc.md               | 247 +++++
 .../619d0fc9825c271253df28d4.md               | 238 +++++
 .../619d102d786c3d13124c37c6.md               | 231 +++++
 .../619d107edf7ddf13cc77106a.md               | 246 +++++
 .../619d10cc98145f14820399c5.md               | 271 ++++++
 .../619d115e2adcd71538e82ebb.md               | 256 ++++++
 .../619d11e6d5ef9515d2a16033.md               | 262 ++++++
 .../619d129a417d0716a94de913.md               | 267 ++++++
 .../619d1340361095175f4b5115.md               | 267 ++++++
 .../619d15797b580c1828b05426.md               | 263 ++++++
 .../619d15d955d9d418c4487bbc.md               | 264 ++++++
 .../619d1629a8adc61960ca8b40.md               | 278 ++++++
 .../619d1c5fc9f8941a400955da.md               | 272 ++++++
 .../619d1dab9ff3421ae1976991.md               | 273 ++++++
 .../619d1deb8b04811b8839ffe4.md               | 281 ++++++
 .../619d1e7a8e81a61c5a819dc4.md               | 272 ++++++
 .../619d1ed33c9a071cf657a0d6.md               | 306 +++++++
 .../619d1fb5d244c31db8a7fdb7.md               | 295 ++++++
 .../619d204bd73ae51e743b8e94.md               | 288 ++++++
 .../619d20b12996101f430920fb.md               | 304 ++++++
 .../619d21fe6a3f9b2016be9d9d.md               | 304 ++++++
 .../619d229b0e542520cd91c685.md               | 312 +++++++
 .../619d23089e787e216a7043d6.md               | 295 ++++++
 .../619d237a107c10221ed743fa.md               | 328 +++++++
 .../619d26b12e651022d80cd017.md               | 317 +++++++
 .../619d2712853306238f41828e.md               | 332 +++++++
 .../619d2b7a84e78b246f2d17a2.md               | 340 +++++++
 .../619d2bd9c1d43c2526e96f1f.md               | 325 +++++++
 .../619d2d4e80400325ff89664a.md               | 326 +++++++
 .../619d2ebc81ba81271460850d.md               | 326 +++++++
 .../619d2f0e9440bc27caee1cec.md               | 327 +++++++
 .../619d2fd3ff4f772882e3d998.md               | 323 +++++++
 .../619d30350883802921bfcccc.md               | 333 +++++++
 .../619d324f5915c929f36ae91d.md               | 351 +++++++
 .../619d32c7fa21f32aaa91d499.md               | 347 +++++++
 .../619d333b738e3c2b5d58b095.md               | 347 +++++++
 .../619d337765b9f02c10e93722.md               | 362 ++++++++
 .../619d33c51140292cc5a21742.md               | 357 ++++++++
 .../619d3482f505452d861d0f62.md               | 347 +++++++
 .../619d3561a951bf2e41a24f10.md               | 346 +++++++
 .../619d36103839c82efa95dd34.md               | 357 ++++++++
 .../619d3711d04d623000013e9e.md               | 670 ++++++++++++++
 .../61a8fe15a6a31306e60d1e89.md               |  55 ++
 .../61537bb9b1a29430ac15ad38.md               |  43 +
 .../61537c5f81f0cf325b4a854c.md               |  62 ++
 .../61537c9eecea6a335db6da79.md               |  65 ++
 .../61537d86bdc3dd343688fceb.md               | 111 +++
 .../615380dff67172357fcf0425.md               |  83 ++
 .../6153893900438b4643590367.md               | 112 +++
 .../6153897c27f6334716ee5abe.md               |  93 ++
 .../6153908a366afb4d57185c8d.md               |  94 ++
 .../615392916d83fa4f02f7e2cf.md               |  88 ++
 .../6153938dce8b294ff8f5a4e9.md               |  87 ++
 .../6153947986535e5117e60615.md               |  88 ++
 .../61539e07e7430b528fbffe21.md               | 104 +++
 .../61539f32a206bd53ec116465.md               |  92 ++
 .../6153a04847abee57a3a406ac.md               |  95 ++
 .../6153a3485f0b20591d26d2a1.md               |  92 ++
 .../6153a3952facd25a83fe8083.md               | 112 +++
 .../6153a3ebb4f7f05b8401b716.md               | 181 ++++
 .../615f171d05def3218035dc85.md               |  92 ++
 .../6493bc0d99879635209565aa.md               |  75 ++
 .../6494da0daf5df5197963671d.md               |  83 ++
 .../64dd076a1b33c86d84b4232f.md               | 126 +++
 .../64dd136e4e8b0894f9c70d86.md               |  79 ++
 .../66c8ba975ee7230e29f6c4ad.md               |   2 +-
 .../615f2abbe7d18d49a1e0e1c8.md               |  58 ++
 .../615f2d4150fe0d4cbd0f2628.md               |  62 ++
 .../615f34948891834dd77655a6.md               |  63 ++
 .../615f34ecc1091b4fd5a8a484.md               |  88 ++
 .../615f357957e370510f21ea16.md               |  55 ++
 .../615f378014c2da526a109c81.md               |  57 ++
 .../615f38279e5c3d53692ea441.md               |  66 ++
 .../615f38cabc64e3556f98cc1a.md               |  65 ++
 .../615f3949f58e12577dcefb00.md               |  61 ++
 .../615f39d7da41b15851fa3fb9.md               |  66 ++
 .../615f3b091162165948e1cb33.md               |  72 ++
 .../615f3cafd794015aa9547a6d.md               |  76 ++
 .../615f3d9e59db4b5b8e960762.md               |  70 ++
 .../615f3e1b7233ee5c7595771f.md               |  71 ++
 .../615f3e4af8008c5d494d3afe.md               |  80 ++
 .../615f3ed16592445e57941aec.md               |  96 ++
 .../615f405b89a7ec5f8e2d11f4.md               |  91 ++
 .../615f40b01f680e608d360ed4.md               |  84 ++
 .../615f4172e9eec061d6456221.md               |  91 ++
 .../615f41c979787462e76dab90.md               | 104 +++
 .../615f423cf65d5864132a0956.md               |  86 ++
 .../615f42a021625f656101ef93.md               | 100 ++
 .../615f4bfb9de4a16703b56eb6.md               |  92 ++
 .../615f4ce9d877b668417c0c42.md               | 104 +++
 .../615f4dde9d72e3694cb9ee3b.md               | 105 +++
 .../615f4ec58334106a4170c2a8.md               | 105 +++
 .../615f4f9e4a40566b776a8f38.md               | 111 +++
 .../615f50473cc0196c6dd3892a.md               | 101 ++
 .../615f51257a8a516d80b6c743.md               | 113 +++
 .../615f51e4e5b24a6e80eccce1.md               | 128 +++
 .../615f522dea4f776f64dc3e91.md               | 115 +++
 .../615f5486b8fd4b71633f69b0.md               | 143 +++
 .../615f575b50b91e72af079480.md               | 144 +++
 .../615f5af373a68e744a3c5a76.md               | 141 +++
 .../615f5fd85d0062761f288364.md               | 134 +++
 .../615f61338c8ca176d6445574.md               | 141 +++
 .../615f666ac5edea782feb7e75.md               | 142 +++
 .../615f671b6d1919792745aa5d.md               | 167 ++++
 .../615f6823d0815b7a991f2a75.md               | 157 ++++
 .../615f6b2d164f81809efd9bdc.md               | 182 ++++
 .../615f6cc778f7698258467596.md               | 172 ++++
 .../615f6fddaac1e083502d3e6a.md               | 148 +++
 .../615f70077a4ff98424236c1e.md               | 163 ++++
 .../615f72a872354a850d4f533e.md               | 160 ++++
 .../615f74a71f1e498619e38ee8.md               | 166 ++++
 .../615f7ad94380408d971d14f6.md               | 181 ++++
 .../615f7bc680f7168ea01ebf99.md               | 165 ++++
 .../615f7c71eab8218f846e4503.md               | 196 ++++
 .../615f7d489a581590d1350288.md               | 165 ++++
 .../615f7de4487b64919bb4aa5e.md               | 215 +++++
 .../615f7e7281626a92bbd62da8.md               | 205 +++++
 .../615f7ecb09de9a938ef94756.md               | 210 +++++
 .../615f7fa959ab75948f96a0d6.md               | 183 ++++
 .../615f808d85793195b0f53be9.md               | 185 ++++
 .../615f829d07b18f96f6f6684b.md               | 169 ++++
 .../615f83ef928ec9982b785b6a.md               | 182 ++++
 .../615f84f246e8ba98e3cd97be.md               | 211 +++++
 .../615f887466db4ba14b5342cc.md               | 208 +++++
 .../615f89e055040ba294719d2f.md               | 195 ++++
 .../615f8bfe0f30a1a3c340356b.md               | 219 +++++
 .../615f8f1223601fa546e93f31.md               | 202 ++++
 .../615f905fbd1017a65ca224eb.md               | 211 +++++
 .../615f94786869e1a7fec54375.md               | 196 ++++
 .../615f951dff9317a900ef683f.md               | 365 ++++++++
 .../635bde33c91c80540eae239b.md               | 153 ++++
 .../6395d33ab5d91bf317107c48.md               | 117 +++
 .../6396e33fe478dd264ebbf278.md               | 135 +++
 .../667d1bb875f5961913176069.md               | 147 +++
 .../612e78af05201622d4bab8aa.md               |  58 ++
 .../612e7d1c29fb872d6384379c.md               |  60 ++
 .../612e804c54d5e7308d7ebe56.md               |  60 ++
 .../612e813b3ba67633222cbe54.md               |  95 ++
 .../612e8279827a28352ce83a72.md               |  74 ++
 .../612e83ec2eca1e370f830511.md               | 107 +++
 .../612e89562043183c86df287c.md               |  77 ++
 .../612e89d254fe5d3df7d6693d.md               |  83 ++
 .../612e8eebe3a6dc3fcc33a66f.md               |  95 ++
 .../612e95ef2e4bdf41f69067f9.md               |  81 ++
 .../612e96fc87fe8e44f69f7ec5.md               | 102 +++
 .../612e98f3245c98475e49cfc6.md               |  88 ++
 .../612e9a21381a1949327512e6.md               |  89 ++
 .../612e9d142affc44a453655db.md               | 117 +++
 .../612e9f1e7e5ccd4fa9ada0be.md               | 103 +++
 .../612ea4c4993aba52ab4aa32e.md               | 119 +++
 .../612ea97df5742154772f312e.md               | 110 +++
 .../612ead8788d28655ef8db056.md               | 112 +++
 .../612eaf56b7ba3257fdbfb0db.md               | 144 +++
 .../612eb4893b63c75bb9251ddf.md               | 129 +++
 .../612eb75153591b5e3b1ab65e.md               | 115 +++
 .../612eb7ca8c275d5f89c73333.md               | 116 +++
 .../612eb8e984cd73677a92b7e9.md               | 117 +++
 .../612eb934f64a4d6890a45518.md               | 118 +++
 .../612ebcba99bfa46a15370b11.md               | 139 +++
 .../612ebe7fe6d07e6b76d1cae2.md               | 133 +++
 .../612ebedec97e096c8bf64999.md               | 136 +++
 .../612ebf9a210f2b6d77001e68.md               | 139 +++
 .../612ec0490ae8626e9adf82e4.md               | 133 +++
 .../612ec19d5268da7074941f84.md               | 154 ++++
 .../612ec29c84b9a6718b1f5cec.md               | 288 ++++++
 .../66fbcdfed6848e48947dbbc9.md               |  36 +
 .../66fbcf750a62784cf11f562d.md               |  81 ++
 .../66fbcf750a62784cf11f562e.md               | 152 +++
 .../66fbcf750a62784cf11f5630.md               |  98 ++
 .../66fbcf750a62784cf11f5631.md               | 104 +++
 .../66fbcf750a62784cf11f5632.md               | 105 +++
 .../66fbcf750a62784cf11f5633.md               | 106 +++
 .../66fbcf750a62784cf11f5634.md               | 133 +++
 .../66fbcf750a62784cf11f5635.md               | 124 +++
 .../66fbcf750a62784cf11f5636.md               | 124 +++
 .../66fbcf750a62784cf11f5637.md               | 186 ++++
 .../66ff02792b3042a2b811f475.md               |  86 ++
 .../670e4f45f7116c0f216a5177.md               | 135 +++
 .../60a3e3396c7b40068ad6996b.md               |  43 +
 .../60a3e3396c7b40068ad6996c.md               |  42 +
 .../60a3e3396c7b40068ad6996d.md               |  41 +
 .../60a3e3396c7b40068ad6996e.md               |  43 +
 .../60a3e3396c7b40068ad6996f.md               |  47 +
 .../60a3e3396c7b40068ad69970.md               |  53 ++
 .../60a3e3396c7b40068ad69971.md               |  67 ++
 .../60a3e3396c7b40068ad69972.md               |  54 ++
 .../60a3e3396c7b40068ad69973.md               |  55 ++
 .../60a3e3396c7b40068ad69974.md               |  67 ++
 .../60a3e3396c7b40068ad69975.md               |  67 ++
 .../60a3e3396c7b40068ad69976.md               |  64 ++
 .../60a3e3396c7b40068ad69977.md               |  65 ++
 .../60a3e3396c7b40068ad69978.md               |  66 ++
 .../60a3e3396c7b40068ad69979.md               |  71 ++
 .../60a3e3396c7b40068ad6997a.md               |  74 ++
 .../60a3e3396c7b40068ad6997b.md               |  70 ++
 .../60a3e3396c7b40068ad6997c.md               |  71 ++
 .../60a3e3396c7b40068ad6997d.md               |  74 ++
 .../60a3e3396c7b40068ad6997e.md               |  75 ++
 .../60a3e3396c7b40068ad6997f.md               |  82 ++
 .../60a3e3396c7b40068ad69980.md               |  84 ++
 .../60a3e3396c7b40068ad69981.md               |  84 ++
 .../60a3e3396c7b40068ad69982.md               |  79 ++
 .../60a3e3396c7b40068ad69983.md               |  80 ++
 .../60a3e3396c7b40068ad69984.md               |  81 ++
 .../60a3e3396c7b40068ad69986.md               |  93 ++
 .../60a3e3396c7b40068ad69987.md               |  94 ++
 .../60a3e3396c7b40068ad69988.md               |  87 ++
 .../60a3e3396c7b40068ad69989.md               |  88 ++
 .../60a3e3396c7b40068ad6998a.md               |  89 ++
 .../60a3e3396c7b40068ad6998b.md               |  93 ++
 .../60a3e3396c7b40068ad6998c.md               | 100 ++
 .../60a3e3396c7b40068ad6998d.md               | 108 +++
 .../60a3e3396c7b40068ad6998e.md               |  95 ++
 .../60a3e3396c7b40068ad6998f.md               |  98 ++
 .../60a3e3396c7b40068ad69990.md               |  97 ++
 .../60a3e3396c7b40068ad69991.md               |  98 ++
 .../60a3e3396c7b40068ad69992.md               | 101 ++
 .../60a3e3396c7b40068ad69993.md               | 100 ++
 .../60a3e3396c7b40068ad69994.md               | 103 +++
 .../60a3e3396c7b40068ad69995.md               | 104 +++
 .../60a3e3396c7b40068ad69996.md               | 103 +++
 .../60a3e3396c7b40068ad69997.md               | 180 ++++
 ...2-english-for-developers-certification.yml |   2 +-
 ...1-english-for-developers-certification.yml |   2 +-
 ...end-development-and-apis-certification.yml |  12 +-
 ...lege-algebra-with-python-certification.yml |  12 +-
 ...ata-analysis-with-python-certification.yml |  12 +-
 .../data-visualization-certification.yml      |  12 +-
 .../foundational-c-sharp-with-microsoft.yml   |   4 +-
 ...nd-development-libraries-certification.yml |  12 +-
 .../information-security-certification.yml    |  12 +-
 ...thms-and-data-structures-certification.yml |  12 +-
 ...s-and-data-structures-certification-v8.yml |   4 +-
 .../legacy-back-end-certification.yml         |  22 +-
 ...egacy-data-visualization-certification.yml |  22 +-
 .../legacy-front-end-certification.yml        |  22 +-
 .../legacy-full-stack-certification.yml       |  14 +-
 ...ty-and-quality-assurance-certification.yml |  12 +-
 ...ine-learning-with-python-certification.yml |  12 +-
 .../quality-assurance-certification.yml       |  12 +-
 .../relational-database-certification.yml     |  12 +-
 .../responsive-web-design-certification.yml   |  12 +-
 ...ic-computing-with-python-certification.yml |  12 +-
 .../upcoming-python-certification.yml         |   4 +-
 .../deep-learning-demystified.md              |  12 +-
 .../how-convolutional-neural-networks-work.md |   2 +-
 .../how-deep-neural-networks-work.md          |   2 +-
 ...rks-rnn-and-long-short-term-memory-lstm.md |  10 +-
 .../book-recommendation-engine-using-knn.md   |  28 +-
 .../cat-and-dog-image-classifier.md           |   2 +-
 ...near-regression-health-costs-calculator.md |   2 +-
 .../neural-network-sms-text-classifier.md     |   2 +-
 .../rock-paper-scissors.md                    |   6 +-
 .../tensorflow/conclusion.md                  |   2 +-
 ...al-neural-networks-evaluating-the-model.md |   2 +-
 ...ral-networks-picking-a-pretrained-model.md |   4 +-
 ...neural-networks-the-convolutional-layer.md |  10 +-
 .../convolutional-neural-networks.md          |  10 +-
 ...-learning-algorithms-building-the-model.md |   2 +-
 ...core-learning-algorithms-classification.md |   2 +-
 .../core-learning-algorithms-clustering.md    |   2 +-
 ...earning-algorithms-hidden-markov-models.md |   2 +-
 ...earning-algorithms-the-training-process.md |   2 +-
 ...ng-algorithms-training-and-testing-data.md |   2 +-
 ...using-probabilities-to-make-predictions.md |   2 +-
 ...e-learning-algorithms-working-with-data.md |   2 +-
 .../tensorflow/core-learning-algorithms.md    |  14 +-
 ...creating-a-convolutional-neural-network.md |   2 +-
 ...roduction-machine-learning-fundamentals.md |   2 +-
 .../tensorflow/introduction-to-tensorflow.md  |  14 +-
 ...processing-with-rnns-building-the-model.md |   2 +-
 ...ssing-with-rnns-create-a-play-generator.md |   2 +-
 ...processing-with-rnns-making-predictions.md |   2 +-
 ...al-language-processing-with-rnns-part-2.md |   2 +-
 ...ing-with-rnns-recurring-neural-networks.md |   2 +-
 ...ocessing-with-rnns-sentimental-analysis.md |   2 +-
 ...processing-with-rnns-training-the-model.md |   2 +-
 .../natural-language-processing-with-rnns.md  |  10 +-
 .../neural-networks-activation-functions.md   |   2 +-
 .../neural-networks-creating-a-model.md       |   2 +-
 .../tensorflow/neural-networks-optimizers.md  |   2 +-
 .../neural-networks-with-tensorflow.md        |  10 +-
 ...cement-learning-with-q-learning-example.md |   2 +-
 ...rcement-learning-with-q-learning-part-2.md |   2 +-
 .../reinforcement-learning-with-q-learning.md |  10 +-
 .../build-a-celestial-bodies-database.md      |   8 +-
 .../build-a-number-guessing-game.md           |   2 +-
 .../build-a-periodic-table-database.md        |   2 +-
 .../build-a-salon-appointment-scheduler.md    |   2 +-
 .../build-a-world-cup-database.md             |   2 +-
 .../build-a-student-database-part-1.md        |   4 +-
 .../build-a-student-database-part-2.md        |   4 +-
 .../build-a-product-landing-page.md           |   2 +-
 .../build-a-survey-form.md                    |   2 +-
 .../61435e3c0679a306c20f1acc.md               |   2 +-
 .../61695ab9f6ffe951c16d03dd.md               |   2 +-
 .../619b7c3c83de403126b69c1e.md               |   2 +-
 .../61a5d79c858bef560e26c685.md               |   2 +-
 .../61add929e41980b1edbdba7e.md               |   2 +-
 .../6153897c27f6334716ee5abe.md               |   2 +-
 .../615392916d83fa4f02f7e2cf.md               |   2 +-
 .../6143a1a228f7d068ab16a130.md               |   2 +-
 .../6148e62a6f768f71c4f04828.md               |   2 +-
 .../61969aa6acef5b12200f672e.md               |   2 +-
 .../6196aead7ac7bf1584b17a7f.md               |   2 +-
 .../6196d00a5d7292262bc02f4c.md               |   2 +-
 .../619d019488f98c06acbbb71a.md               |   2 +-
 .../619d0e56f9ca9710fcb974e3.md               |   2 +-
 .../619d2ebc81ba81271460850d.md               |   2 +-
 .../5d822fd413a79914d39e98c9.md               |   2 +-
 .../5d822fd413a79914d39e98ce.md               |   2 +-
 .../5d822fd413a79914d39e98d0.md               |   2 +-
 .../5d822fd413a79914d39e98d6.md               |   2 +-
 .../5d822fd413a79914d39e98e2.md               |   2 +-
 .../5d822fd413a79914d39e98f4.md               |   2 +-
 .../5d822fd413a79914d39e9904.md               |  20 +-
 .../5d822fd413a79914d39e9907.md               |   2 +-
 .../5d822fd413a79914d39e990c.md               |   2 +-
 .../5d822fd413a79914d39e9919.md               |   2 +-
 .../5d822fd413a79914d39e9920.md               |   2 +-
 .../5dc17d3bf86c76b9248c6eb4.md               |   6 +-
 .../5dc17dc8f86c76b9248c6eb5.md               |  11 +-
 .../5dc2385ff86c76b9248c6eb7.md               |   8 +-
 .../5dc23991f86c76b9248c6eb8.md               |  12 +-
 .../5dc23f9bf86c76b9248c6eba.md               |   2 +-
 .../5dc24073f86c76b9248c6ebb.md               |   8 +-
 .../5dc24165f86c76b9248c6ebc.md               |   2 +-
 .../5dc24614f86c76b9248c6ebd.md               |   2 +-
 .../5ddbd81294d8ddc1510a8e56.md               |  12 +-
 .../5dfa2407b521be39a3de7be1.md               |  15 +-
 .../5dfa30b9eacea3f48c6300ad.md               |  10 +-
 .../5dfa3589eacea3f48c6300ae.md               |   6 +-
 .../5dfa371beacea3f48c6300af.md               |   6 +-
 .../5dfa37b9eacea3f48c6300b0.md               |   6 +-
 .../5dfb5ecbeacea3f48c6300b1.md               |   6 +-
 .../5dfb6250eacea3f48c6300b2.md               |   6 +-
 .../5dfb655eeacea3f48c6300b3.md               |  12 +-
 .../5dfb6a35eacea3f48c6300b4.md               |   6 +-
 .../5ef9b03c81a63668521804d0.md               |   6 +-
 .../5ef9b03c81a63668521804d1.md               |   6 +-
 .../5ef9b03c81a63668521804d2.md               |   6 +-
 .../5ef9b03c81a63668521804d3.md               |   6 +-
 .../5ef9b03c81a63668521804d4.md               |   6 +-
 .../5ef9b03c81a63668521804d5.md               |   6 +-
 .../5ef9b03c81a63668521804d6.md               |   6 +-
 .../5ef9b03c81a63668521804d7.md               |   6 +-
 .../5ef9b03c81a63668521804d8.md               |   6 +-
 .../5ef9b03c81a63668521804d9.md               |   6 +-
 .../5ef9b03c81a63668521804da.md               |   6 +-
 .../5ef9b03c81a63668521804db.md               |   6 +-
 .../5ef9b03c81a63668521804dc.md               |   6 +-
 .../5ef9b03c81a63668521804dd.md               |   6 +-
 .../5ef9b03c81a63668521804de.md               |   7 +-
 .../5ef9b03c81a63668521804df.md               |   6 +-
 .../5ef9b03c81a63668521804e1.md               |   6 +-
 .../5ef9b03c81a63668521804e2.md               |   6 +-
 .../5ef9b03c81a63668521804e3.md               |   6 +-
 .../5ef9b03c81a63668521804e5.md               |   6 +-
 .../5ef9b03c81a63668521804e7.md               |   6 +-
 .../5ef9b03c81a63668521804e8.md               |  10 +-
 .../5ef9b03c81a63668521804e9.md               |   8 +-
 .../5ef9b03c81a63668521804ea.md               |   6 +-
 .../5ef9b03c81a63668521804eb.md               |   6 +-
 .../5ef9b03c81a63668521804ec.md               |   6 +-
 .../5ef9b03c81a63668521804ee.md               |   6 +-
 .../5efada803cbd2bbdab94e332.md               |  13 +-
 .../5efae0543cbd2bbdab94e333.md               |   6 +-
 .../5efae16e3cbd2bbdab94e334.md               |   6 +-
 .../5efb23e70dc218d6c85f89b1.md               |   6 +-
 .../5efb2c990dc218d6c85f89b2.md               |   6 +-
 .../5efc4f528d6a74d05e68af74.md               |   6 +-
 .../5efc518e8d6a74d05e68af75.md               |   6 +-
 .../5efc54138d6a74d05e68af76.md               |   6 +-
 .../5efc575c8d6a74d05e68af77.md               |   6 +-
 .../5f05a1d8e233dff4a68508d8.md               |   6 +-
 .../5f07be6ef7412fbad0c5626b.md               |  12 +-
 .../5f07c98cdb9413cbd4b16750.md               |   6 +-
 .../5f07fb1579dc934717801375.md               |   6 +-
 .../5f0d48e7b435f13ab6550051.md               |   6 +-
 .../5f0d4ab1b435f13ab6550052.md               |   6 +-
 .../5f0d4d04b435f13ab6550053.md               |   6 +-
 .../5f1a80975fc4bcae0edb3497.md               |   7 +-
 .../5f1a89f1190aff21ae42105a.md               |   6 +-
 .../62bb4009e3458a128ff57d5d.md               |   8 +-
 .../671141d8e32fe934c26fa1be.md               |  57 ++
 .../671141f948cbab359e74cc93.md               |  48 +
 .../671141feba228a35cefba82d.md               |  57 ++
 .../671144cdcc01d73f7dd79dc9.md               |  47 +
 .../7cf9b03d81a65668421804c3.md               |   6 +-
 .../60f81616cff80508badf9ad5.md               |   2 +-
 .../60f84ec41116b209c280ba91.md               |   2 +-
 .../62015cd2654a1139321a89d2.md               |   2 +-
 .../620174ed519dd7506c1a4b61.md               |   2 +-
 .../6201a20d742f5c89736c8cfb.md               |   2 +-
 .../612e804c54d5e7308d7ebe56.md               |   2 +-
 .../60a3e3396c7b40068ad69974.md               |   2 +-
 .../615f378014c2da526a109c81.md               |   2 +-
 .../615f4dde9d72e3694cb9ee3b.md               |   2 +-
 .../introduction-flexbox-lesson-g.md          |  22 +-
 .../learn-arrays-and-loops-lesson-b.md        |  10 +-
 .../learn-arrays-and-loops-lesson-g.md        |   8 +-
 .../learn-block-and-inline-lesson-i.md        |  12 +-
 .../css-foundations-exercise-e.md             |  22 +-
 .../css-foundations-lesson-c.md               |  10 +-
 .../css-foundations-lesson-d.md               |   2 +-
 .../css-foundations-lesson-f.md               |   4 +-
 .../css-foundations-lesson-h.md               |  18 +-
 .../the-cascade-of-css-lesson-f.md            |   4 +-
 ...rn-data-types-and-conditionals-lesson-i.md |  10 +-
 .../learn-function-basics-lesson-a.md         |  18 +-
 .../html-foundations-lesson-b.md              |  18 +-
 .../html-foundations-lesson-h.md              |  12 +-
 .../learn-variables-and-operators-lesson-c.md |  18 +-
 .../links-and-images-lesson-c.md              |  30 +-
 .../links-and-images-lesson-d.md              |  50 +-
 .../links-and-images-lesson-e.md              |   2 +-
 .../links-and-images-lesson-f.md              |   2 +-
 .../links-and-images-lesson-g.md              |   2 +-
 .../links-and-images-lesson-h.md              |   2 +-
 .../working-with-text-lesson-i.md             |  18 +-
 .../build-a-graphing-calculator.md            |  24 +-
 .../build-a-multi-function-calculator.md      |  24 +-
 .../spreadsheets-and-additional-resources.md  |   6 +-
 .../fractions-and-decimals-extra.md           |  16 +-
 .../657ddcd61f516cacdc7a04ca.md               |  30 +-
 .../657e4e3b02a2128049c344c8.md               |  30 +-
 .../66b205e6eacba4c4e54ea434.md               |   4 +-
 .../66c06fad3475cd92421b9ac2.md               |   4 +-
 .../587d78af367417b2b2512b04.md               |   2 +-
 .../669e2f60e83c011754f711f9.md               |   2 +-
 .../bd7158d8c442eddfaeb5bd18.md               |   2 +-
 .../670803abcb3e980233da4768.md               | 121 +++
 .../6708143cab2b583ecd3324f5.md               | 121 +++
 .../6708382cf088b216580a9ff1.md               | 125 +++
 .../67083868d5fdcb17bf8c14bd.md               | 121 +++
 .../670838977810401844af6fe0.md               | 121 +++
 .../670838b10ee87a18e5faff62.md               | 121 +++
 .../670838e914096b194b0c51aa.md               | 121 +++
 .../670839051794aa19fcef6dc8.md               | 120 +++
 .../67083952f800051a8a21fcfd.md               | 121 +++
 .../6708396caa00e11b597b3365.md               | 121 +++
 .../66edd630f7666cfa54b404d0.md               | 200 ++--
 .../66ed8fa2f45ce3ece4053eab.md               |   2 +-
 .../66ed8ff4f45ce3ece4053eb4.md               | 200 ++--
 .../66edd3403d7077eece6dc4b6.md               | 200 ++--
 .../66edd4bc0ce399f475ad6f9b.md               | 200 ++--
 .../quiz-nano/66f1b03b922a53cb231e1c0d.md     |   2 +-
 .../66f1a2009e65c9a40a26d51e.md               | 201 ++--
 .../66f1af82732957c895f0b21a.md               | 200 ++--
 .../66ed9034f45ce3ece4053ebd.md               | 200 ++--
 .../66ed9043f45ce3ece4053ebf.md               | 200 ++--
 .../61fd5a93fd62bb35968adeab.md               |  61 ++
 .../61fd6343fb42013d99bcd7f3.md               |  48 +
 .../61fd66c687e610436494c6f1.md               |  52 ++
 .../61fd67a656743144844941cb.md               |  78 ++
 .../61fd6ab779390f49148773bb.md               |  65 ++
 .../61fd6b7c83dbf54a08cf0498.md               |  79 ++
 .../61fd6cc9475a784b7776233e.md               |  80 ++
 .../61fd70336ebb3e4f62ee81ba.md               |  73 ++
 .../61fd719788899952e67692b9.md               |  86 ++
 .../61fd71d596e8f253b9408b39.md               |  86 ++
 .../61fd75ea7f663457612dba02.md               | 125 +++
 .../61fd7648a7ba2e5882436831.md               |  96 ++
 .../61fd778081276b59d59abad6.md               | 134 +++
 .../61fd77f7ad2aeb5ae34d07d6.md               | 138 +++
 .../61fd78621573aa5e8b512f5e.md               | 142 +++
 .../61fd7a160ed17960e971f28b.md               | 146 +++
 .../61fd7b3fcaa5406257abc5d1.md               | 130 +++
 .../61fd8e491324ce717da97ffe.md               | 119 +++
 .../61fd8fd08af43372f02952d0.md               | 149 +++
 .../61fd9126aa72a474301fc49f.md               | 131 +++
 .../61fd933ba685de776a94997e.md               | 169 ++++
 .../61fd94056e0355785fbba4d3.md               | 173 ++++
 .../61fd986ddbcbd47ba8fbc5ec.md               | 177 ++++
 .../61fd990577d8227dd93fbeeb.md               | 181 ++++
 .../61fd9a4ff2fc4481b9157bd7.md               | 165 ++++
 .../61fd9ad665a4a282c8106be3.md               | 198 ++++
 .../61fd9b7285bde783ad5b8aac.md               | 208 +++++
 .../61fd9d9fbdfe078800317055.md               | 158 ++++
 .../61fda307bde0b091cf7d884a.md               | 168 ++++
 .../61fda339eadcfd92a6812bed.md               | 171 ++++
 .../61fdac1e31692f9a9ad97295.md               | 172 ++++
 .../61fdaea3999cb19d76ce717b.md               | 172 ++++
 .../61fdaf9ff894b6a084ecdc1b.md               | 174 ++++
 .../61fdafe6f07fd7a1c6785bc2.md               | 182 ++++
 .../61fdb04d9939f0a26ca51c2b.md               | 192 ++++
 .../620159cd5431aa34bc6a4c9c.md               | 198 ++++
 .../62015a5da1c95c358f079ebb.md               | 194 ++++
 .../62015cd2654a1139321a89d2.md               | 196 ++++
 .../62015d8942384c3aed48329e.md               | 212 +++++
 .../620167374bb8b4455cd11125.md               | 224 +++++
 .../620174ed519dd7506c1a4b61.md               | 212 +++++
 .../620175b3710a0951cfa86edf.md               | 223 +++++
 .../6201782cc420715562f36271.md               | 232 +++++
 .../620179bc0a6a2358c72b90ad.md               | 224 +++++
 .../62017b6f47454059bf2d3bd1.md               | 230 +++++
 .../62017f47c87be96457c49f46.md               | 291 ++++++
 .../62017fa5bbef406580ceb44f.md               | 236 +++++
 .../62018243f046a368fab8ffb6.md               | 238 +++++
 .../6201830cb0c74b69f1b41635.md               | 242 +++++
 .../620186f4b6b8356d2def576b.md               | 252 +++++
 .../62018ba1aa263770c953be66.md               | 251 +++++
 .../62018c3e94434a71af1d5eaa.md               | 261 ++++++
 .../62018ec29b3ae674f40bef31.md               | 255 ++++++
 .../62019093fe30e278e797d2f6.md               | 265 ++++++
 .../620191707bc65579ddd3ce15.md               | 270 ++++++
 .../620192a767533a7ad19d96d7.md               | 277 ++++++
 .../6201995d9ab88e80f1989dce.md               | 274 ++++++
 .../620199c7a7a32c81d4db3410.md               | 278 ++++++
 .../6201a1a7af32c287bd6b8183.md               | 284 ++++++
 .../6201a1cc668a34888f5b2f52.md               | 288 ++++++
 .../6201a20d742f5c89736c8cfb.md               | 302 ++++++
 .../6201a42e39bf3b95b6a33bf3.md               | 320 +++++++
 .../6201a4adcc6414968b391592.md               | 296 ++++++
 .../6201a5258af7b398b030bfaf.md               | 312 +++++++
 .../6201a59be346d399c21d10b1.md               | 589 ++++++++++++
 .../64076bbeba941114b0027b6a.md               | 209 +++++
 .../5d822fd413a79914d39e98cc.md               |  76 ++
 .../5d822fd413a79914d39e98cd.md               |  56 ++
 .../5d822fd413a79914d39e98ce.md               |  61 ++
 .../5d822fd413a79914d39e98cf.md               |  69 ++
 .../5d822fd413a79914d39e98d0.md               |  65 ++
 .../5d822fd413a79914d39e98d1.md               |  68 ++
 .../5d822fd413a79914d39e98d2.md               |  83 ++
 .../5d822fd413a79914d39e98d3.md               | 105 +++
 .../5d822fd413a79914d39e98d4.md               | 138 +++
 .../5d822fd413a79914d39e98d5.md               | 112 +++
 .../5d822fd413a79914d39e98d6.md               | 103 +++
 .../5d822fd413a79914d39e98d7.md               | 100 ++
 .../5d822fd413a79914d39e98d8.md               | 124 +++
 .../5d822fd413a79914d39e98d9.md               |  99 ++
 .../5d822fd413a79914d39e98da.md               | 133 +++
 .../5d822fd413a79914d39e98db.md               | 133 +++
 .../5d822fd413a79914d39e98dc.md               | 127 +++
 .../5d822fd413a79914d39e98dd.md               | 142 +++
 .../5d822fd413a79914d39e98de.md               | 140 +++
 .../5d822fd413a79914d39e98df.md               | 124 +++
 .../5d822fd413a79914d39e98e0.md               | 142 +++
 .../5d822fd413a79914d39e98e1.md               | 155 ++++
 .../5d822fd413a79914d39e98e2.md               | 135 +++
 .../5d822fd413a79914d39e98e3.md               | 144 +++
 .../5d822fd413a79914d39e98e4.md               | 147 +++
 .../5d822fd413a79914d39e98e5.md               | 161 ++++
 .../5d822fd413a79914d39e98e6.md               | 192 ++++
 .../5d822fd413a79914d39e98e7.md               | 253 +++++
 .../5d822fd413a79914d39e98e8.md               | 190 ++++
 .../5d822fd413a79914d39e98e9.md               | 223 +++++
 .../5d822fd413a79914d39e98ea.md               | 181 ++++
 .../5d822fd413a79914d39e98eb.md               | 203 +++++
 .../5d822fd413a79914d39e98ec.md               | 203 +++++
 .../5d822fd413a79914d39e98ed.md               | 202 ++++
 .../5d822fd413a79914d39e98ee.md               | 196 ++++
 .../5d822fd413a79914d39e98ef.md               | 197 ++++
 .../5d822fd413a79914d39e98f0.md               | 218 +++++
 .../5d822fd413a79914d39e98f1.md               | 223 +++++
 .../5d822fd413a79914d39e98f2.md               | 237 +++++
 .../5d822fd413a79914d39e98f3.md               | 222 +++++
 .../5d822fd413a79914d39e98f4.md               | 227 +++++
 .../5d822fd413a79914d39e98f5.md               | 198 ++++
 .../5d822fd413a79914d39e98f6.md               | 207 +++++
 .../5d822fd413a79914d39e98f7.md               | 203 +++++
 .../5d822fd413a79914d39e98f8.md               | 210 +++++
 .../5d822fd413a79914d39e98f9.md               | 207 +++++
 .../5d822fd413a79914d39e98fa.md               | 211 +++++
 .../5d822fd413a79914d39e98fb.md               | 240 +++++
 .../5d822fd413a79914d39e98fc.md               | 211 +++++
 .../5d822fd413a79914d39e98fd.md               | 209 +++++
 .../5d822fd413a79914d39e98fe.md               | 260 ++++++
 .../5d822fd413a79914d39e98ff.md               | 238 +++++
 .../5d822fd413a79914d39e9900.md               | 224 +++++
 .../5d822fd413a79914d39e9901.md               | 224 +++++
 .../5d822fd413a79914d39e9902.md               | 227 +++++
 .../5d822fd413a79914d39e9903.md               | 223 +++++
 .../5d822fd413a79914d39e9904.md               | 245 +++++
 .../5d822fd413a79914d39e9905.md               | 223 +++++
 .../5d822fd413a79914d39e9906.md               | 249 +++++
 .../5d822fd413a79914d39e9907.md               | 258 ++++++
 .../5d822fd413a79914d39e9908.md               | 258 ++++++
 .../5d822fd413a79914d39e9909.md               | 245 +++++
 .../5d822fd413a79914d39e990a.md               | 277 ++++++
 .../5d822fd413a79914d39e990b.md               | 254 ++++++
 .../5d822fd413a79914d39e990c.md               | 253 +++++
 .../5d822fd413a79914d39e990d.md               | 255 ++++++
 .../5d822fd413a79914d39e990e.md               | 265 ++++++
 .../5d822fd413a79914d39e990f.md               | 279 ++++++
 .../5d822fd413a79914d39e9910.md               | 266 ++++++
 .../5d822fd413a79914d39e9911.md               | 291 ++++++
 .../5d822fd413a79914d39e9912.md               | 287 ++++++
 .../5d822fd413a79914d39e9913.md               | 280 ++++++
 .../5d822fd413a79914d39e9914.md               | 284 ++++++
 .../5d822fd413a79914d39e9915.md               | 391 ++++++++
 .../5d822fd413a79914d39e9916.md               | 297 ++++++
 .../5d822fd413a79914d39e9917.md               | 307 +++++++
 .../5d822fd413a79914d39e9918.md               | 298 ++++++
 .../5d822fd413a79914d39e9919.md               | 301 ++++++
 .../5d822fd413a79914d39e991a.md               | 312 +++++++
 .../5d822fd413a79914d39e991b.md               | 314 +++++++
 .../5d822fd413a79914d39e991c.md               | 317 +++++++
 .../5d822fd413a79914d39e991d.md               | 315 +++++++
 .../5d822fd413a79914d39e991e.md               | 326 +++++++
 .../5d822fd413a79914d39e991f.md               | 324 +++++++
 .../5d822fd413a79914d39e9920.md               | 330 +++++++
 .../5d822fd413a79914d39e9921.md               | 348 +++++++
 .../5d822fd413a79914d39e9922.md               | 347 +++++++
 .../5d822fd413a79914d39e9923.md               | 348 +++++++
 .../5d822fd413a79914d39e9924.md               | 340 +++++++
 .../5d822fd413a79914d39e9925.md               | 346 +++++++
 .../5d822fd413a79914d39e9926.md               | 355 ++++++++
 .../5d822fd413a79914d39e9927.md               | 350 +++++++
 .../5d822fd413a79914d39e9928.md               | 349 +++++++
 .../5d822fd413a79914d39e9929.md               | 362 ++++++++
 .../5d822fd413a79914d39e992a.md               | 359 ++++++++
 .../5d822fd413a79914d39e992b.md               | 361 ++++++++
 .../5d822fd413a79914d39e992c.md               | 364 ++++++++
 .../5d822fd413a79914d39e992d.md               | 377 ++++++++
 .../5d822fd413a79914d39e992e.md               | 374 ++++++++
 .../5d822fd413a79914d39e992f.md               | 377 ++++++++
 .../5d822fd413a79914d39e9930.md               | 381 ++++++++
 .../5d822fd413a79914d39e9931.md               | 404 ++++++++
 .../5d822fd413a79914d39e9932.md               | 396 ++++++++
 .../5d822fd413a79914d39e9933.md               | 402 ++++++++
 .../5d822fd413a79914d39e9934.md               | 409 +++++++++
 .../5d822fd413a79914d39e9935.md               | 409 +++++++++
 .../5d822fd413a79914d39e9936.md               | 402 ++++++++
 .../5d822fd413a79914d39e9937.md               | 403 ++++++++
 .../5d822fd413a79914d39e9938.md               | 421 +++++++++
 .../5d822fd413a79914d39e9939.md               | 410 +++++++++
 .../5d822fd413a79914d39e993a.md               | 422 +++++++++
 .../5d822fd413a79914d39e993b.md               | 424 +++++++++
 .../5d822fd413a79914d39e993c.md               | 437 +++++++++
 .../5d822fd413a79914d39e993d.md               | 450 +++++++++
 .../5d822fd413a79914d39e993e.md               | 862 ++++++++++++++++++
 .../619665c9abd72906f3ad30f9.md               |  65 ++
 .../61967e74a8e3690ab6292daa.md               |  56 ++
 .../61968df2acd5550bf1616c34.md               |  53 ++
 .../61968e9243a4090cc805531c.md               |  51 ++
 .../61968f8877c6720d6d61aaf5.md               |  64 ++
 .../619691693bc14b0e528f5a20.md               |  66 ++
 .../6196928658b6010f28c39484.md               |  58 ++
 .../619692ff79f5770fc6d8c0b4.md               |  73 ++
 .../6196990f966e8f10a40094f6.md               |  75 ++
 .../619699c10a0f6e11591d73c4.md               |  74 ++
 .../61969aa6acef5b12200f672e.md               |  83 ++
 .../61969c487ced6f12db8fef94.md               |  89 ++
 .../61969d66cfcdba137d021558.md               |  76 ++
 .../61969e7451455614217e901b.md               |  91 ++
 .../6196adc17f77a714d51485f2.md               |  90 ++
 .../6196aead7ac7bf1584b17a7f.md               |  86 ++
 .../6196ce0415498d2463989e84.md               |  92 ++
 .../6196cee94c6da1253809dff9.md               | 100 ++
 .../6196d00a5d7292262bc02f4c.md               |  87 ++
 .../6196d0cda039d026f7f78d1e.md               | 100 ++
 .../6196d1ac33c68d27dcda5796.md               | 131 +++
 .../6196d213d99f16287bff22ae.md               | 104 +++
 .../6196d2c0f22ca0293107c048.md               | 112 +++
 .../6196d32d1340d829f0f6f57d.md               | 105 +++
 .../6196d41d40bf9b2aaea5d520.md               | 107 +++
 .../6197cff995d03905b0cca8ad.md               | 118 +++
 .../6197f40a16afea068c7e60c8.md               | 125 +++
 .../6197f667297bb30a552ce017.md               |  65 ++
 .../61993b72e874e709b8dfd666.md               | 128 +++
 .../61993cf26a8e0f0a553db223.md               | 122 +++
 .../61993dbb35adf30b10d49e38.md               | 139 +++
 .../61993e9adc9e9a0bb4d28fff.md               | 133 +++
 .../6199409834ccaf0d10736596.md               | 139 +++
 .../6199429802b7c10dc79ff871.md               | 154 ++++
 .../619943285a41720e6370d985.md               | 156 ++++
 .../619943876b706d0f35c01dbc.md               | 146 +++
 .../6199442866286d0ff421a4fc.md               | 148 +++
 .../619bcf239fc15905ecd66fce.md               | 145 +++
 .../619be73b3c806006ccc00bb0.md               | 158 ++++
 .../619be7af7b0bf60770f5d2a4.md               | 155 ++++
 .../619be80062551a080e32c821.md               | 160 ++++
 .../619be8ce4ea49008c5bfbc30.md               | 152 +++
 .../619be946958c6009844f1dee.md               | 166 ++++
 .../619c155df0063a0a3fec0e32.md               | 193 ++++
 .../619c16debd0c270b01c5ce38.md               | 165 ++++
 .../619cfdf2e63ddf05feab86ad.md               | 169 ++++
 .../619d019488f98c06acbbb71a.md               | 171 ++++
 .../619d022dc8400c0763829a17.md               | 177 ++++
 .../619d02c7bc95bf0827a5d296.md               | 181 ++++
 .../619d033915012509031f309a.md               | 184 ++++
 .../619d03dadadb6509a16f4f5f.md               | 210 +++++
 .../619d0503e03a790a4179d463.md               | 206 +++++
 .../619d05c54dabca0b10058235.md               | 197 ++++
 .../619d0882f54bf40bdc4671ed.md               | 197 ++++
 .../619d090cd8d6db0c93dc5087.md               | 222 +++++
 .../619d0b51ca42ed0d74582186.md               | 207 +++++
 .../619d0bc9cb05360e1bf549c3.md               | 200 ++++
 .../619d0c1594c38c0ebae75878.md               | 215 +++++
 .../619d0d18ca99870f884a7bff.md               | 225 +++++
 .../619d0daf214542102739b0da.md               | 227 +++++
 .../619d0e56f9ca9710fcb974e3.md               | 226 +++++
 .../619d0eec0ac40611b41e2ccc.md               | 247 +++++
 .../619d0fc9825c271253df28d4.md               | 238 +++++
 .../619d102d786c3d13124c37c6.md               | 231 +++++
 .../619d107edf7ddf13cc77106a.md               | 246 +++++
 .../619d10cc98145f14820399c5.md               | 271 ++++++
 .../619d115e2adcd71538e82ebb.md               | 256 ++++++
 .../619d11e6d5ef9515d2a16033.md               | 262 ++++++
 .../619d129a417d0716a94de913.md               | 267 ++++++
 .../619d1340361095175f4b5115.md               | 267 ++++++
 .../619d15797b580c1828b05426.md               | 263 ++++++
 .../619d15d955d9d418c4487bbc.md               | 264 ++++++
 .../619d1629a8adc61960ca8b40.md               | 278 ++++++
 .../619d1c5fc9f8941a400955da.md               | 272 ++++++
 .../619d1dab9ff3421ae1976991.md               | 273 ++++++
 .../619d1deb8b04811b8839ffe4.md               | 281 ++++++
 .../619d1e7a8e81a61c5a819dc4.md               | 272 ++++++
 .../619d1ed33c9a071cf657a0d6.md               | 306 +++++++
 .../619d1fb5d244c31db8a7fdb7.md               | 295 ++++++
 .../619d204bd73ae51e743b8e94.md               | 288 ++++++
 .../619d20b12996101f430920fb.md               | 304 ++++++
 .../619d21fe6a3f9b2016be9d9d.md               | 304 ++++++
 .../619d229b0e542520cd91c685.md               | 312 +++++++
 .../619d23089e787e216a7043d6.md               | 295 ++++++
 .../619d237a107c10221ed743fa.md               | 328 +++++++
 .../619d26b12e651022d80cd017.md               | 317 +++++++
 .../619d2712853306238f41828e.md               | 332 +++++++
 .../619d2b7a84e78b246f2d17a2.md               | 340 +++++++
 .../619d2bd9c1d43c2526e96f1f.md               | 325 +++++++
 .../619d2d4e80400325ff89664a.md               | 326 +++++++
 .../619d2ebc81ba81271460850d.md               | 326 +++++++
 .../619d2f0e9440bc27caee1cec.md               | 327 +++++++
 .../619d2fd3ff4f772882e3d998.md               | 323 +++++++
 .../619d30350883802921bfcccc.md               | 333 +++++++
 .../619d324f5915c929f36ae91d.md               | 351 +++++++
 .../619d32c7fa21f32aaa91d499.md               | 347 +++++++
 .../619d333b738e3c2b5d58b095.md               | 347 +++++++
 .../619d337765b9f02c10e93722.md               | 362 ++++++++
 .../619d33c51140292cc5a21742.md               | 357 ++++++++
 .../619d3482f505452d861d0f62.md               | 347 +++++++
 .../619d3561a951bf2e41a24f10.md               | 346 +++++++
 .../619d36103839c82efa95dd34.md               | 357 ++++++++
 .../619d3711d04d623000013e9e.md               | 670 ++++++++++++++
 .../61a8fe15a6a31306e60d1e89.md               |  55 ++
 .../61537bb9b1a29430ac15ad38.md               |  43 +
 .../61537c5f81f0cf325b4a854c.md               |  62 ++
 .../61537c9eecea6a335db6da79.md               |  65 ++
 .../61537d86bdc3dd343688fceb.md               | 111 +++
 .../615380dff67172357fcf0425.md               |  83 ++
 .../6153893900438b4643590367.md               | 112 +++
 .../6153897c27f6334716ee5abe.md               |  93 ++
 .../6153908a366afb4d57185c8d.md               |  94 ++
 .../615392916d83fa4f02f7e2cf.md               |  88 ++
 .../6153938dce8b294ff8f5a4e9.md               |  87 ++
 .../6153947986535e5117e60615.md               |  88 ++
 .../61539e07e7430b528fbffe21.md               | 104 +++
 .../61539f32a206bd53ec116465.md               |  92 ++
 .../6153a04847abee57a3a406ac.md               |  95 ++
 .../6153a3485f0b20591d26d2a1.md               |  92 ++
 .../6153a3952facd25a83fe8083.md               | 112 +++
 .../6153a3ebb4f7f05b8401b716.md               | 181 ++++
 .../615f171d05def3218035dc85.md               |  92 ++
 .../6493bc0d99879635209565aa.md               |  75 ++
 .../6494da0daf5df5197963671d.md               |  83 ++
 .../64dd076a1b33c86d84b4232f.md               | 126 +++
 .../64dd136e4e8b0894f9c70d86.md               |  79 ++
 .../66c8ba975ee7230e29f6c4ad.md               |   2 +-
 .../615f2abbe7d18d49a1e0e1c8.md               |  58 ++
 .../615f2d4150fe0d4cbd0f2628.md               |  62 ++
 .../615f34948891834dd77655a6.md               |  63 ++
 .../615f34ecc1091b4fd5a8a484.md               |  88 ++
 .../615f357957e370510f21ea16.md               |  55 ++
 .../615f378014c2da526a109c81.md               |  57 ++
 .../615f38279e5c3d53692ea441.md               |  66 ++
 .../615f38cabc64e3556f98cc1a.md               |  65 ++
 .../615f3949f58e12577dcefb00.md               |  61 ++
 .../615f39d7da41b15851fa3fb9.md               |  66 ++
 .../615f3b091162165948e1cb33.md               |  72 ++
 .../615f3cafd794015aa9547a6d.md               |  76 ++
 .../615f3d9e59db4b5b8e960762.md               |  70 ++
 .../615f3e1b7233ee5c7595771f.md               |  71 ++
 .../615f3e4af8008c5d494d3afe.md               |  80 ++
 .../615f3ed16592445e57941aec.md               |  96 ++
 .../615f405b89a7ec5f8e2d11f4.md               |  91 ++
 .../615f40b01f680e608d360ed4.md               |  84 ++
 .../615f4172e9eec061d6456221.md               |  91 ++
 .../615f41c979787462e76dab90.md               | 104 +++
 .../615f423cf65d5864132a0956.md               |  86 ++
 .../615f42a021625f656101ef93.md               | 100 ++
 .../615f4bfb9de4a16703b56eb6.md               |  92 ++
 .../615f4ce9d877b668417c0c42.md               | 104 +++
 .../615f4dde9d72e3694cb9ee3b.md               | 105 +++
 .../615f4ec58334106a4170c2a8.md               | 105 +++
 .../615f4f9e4a40566b776a8f38.md               | 111 +++
 .../615f50473cc0196c6dd3892a.md               | 101 ++
 .../615f51257a8a516d80b6c743.md               | 113 +++
 .../615f51e4e5b24a6e80eccce1.md               | 128 +++
 .../615f522dea4f776f64dc3e91.md               | 115 +++
 .../615f5486b8fd4b71633f69b0.md               | 143 +++
 .../615f575b50b91e72af079480.md               | 144 +++
 .../615f5af373a68e744a3c5a76.md               | 141 +++
 .../615f5fd85d0062761f288364.md               | 134 +++
 .../615f61338c8ca176d6445574.md               | 141 +++
 .../615f666ac5edea782feb7e75.md               | 142 +++
 .../615f671b6d1919792745aa5d.md               | 167 ++++
 .../615f6823d0815b7a991f2a75.md               | 157 ++++
 .../615f6b2d164f81809efd9bdc.md               | 182 ++++
 .../615f6cc778f7698258467596.md               | 172 ++++
 .../615f6fddaac1e083502d3e6a.md               | 148 +++
 .../615f70077a4ff98424236c1e.md               | 163 ++++
 .../615f72a872354a850d4f533e.md               | 160 ++++
 .../615f74a71f1e498619e38ee8.md               | 166 ++++
 .../615f7ad94380408d971d14f6.md               | 181 ++++
 .../615f7bc680f7168ea01ebf99.md               | 165 ++++
 .../615f7c71eab8218f846e4503.md               | 196 ++++
 .../615f7d489a581590d1350288.md               | 165 ++++
 .../615f7de4487b64919bb4aa5e.md               | 215 +++++
 .../615f7e7281626a92bbd62da8.md               | 205 +++++
 .../615f7ecb09de9a938ef94756.md               | 210 +++++
 .../615f7fa959ab75948f96a0d6.md               | 183 ++++
 .../615f808d85793195b0f53be9.md               | 185 ++++
 .../615f829d07b18f96f6f6684b.md               | 169 ++++
 .../615f83ef928ec9982b785b6a.md               | 182 ++++
 .../615f84f246e8ba98e3cd97be.md               | 211 +++++
 .../615f887466db4ba14b5342cc.md               | 208 +++++
 .../615f89e055040ba294719d2f.md               | 195 ++++
 .../615f8bfe0f30a1a3c340356b.md               | 219 +++++
 .../615f8f1223601fa546e93f31.md               | 202 ++++
 .../615f905fbd1017a65ca224eb.md               | 211 +++++
 .../615f94786869e1a7fec54375.md               | 196 ++++
 .../615f951dff9317a900ef683f.md               | 365 ++++++++
 .../635bde33c91c80540eae239b.md               | 153 ++++
 .../6395d33ab5d91bf317107c48.md               | 117 +++
 .../6396e33fe478dd264ebbf278.md               | 135 +++
 .../667d1bb875f5961913176069.md               | 147 +++
 .../612e78af05201622d4bab8aa.md               |  58 ++
 .../612e7d1c29fb872d6384379c.md               |  60 ++
 .../612e804c54d5e7308d7ebe56.md               |  60 ++
 .../612e813b3ba67633222cbe54.md               |  95 ++
 .../612e8279827a28352ce83a72.md               |  74 ++
 .../612e83ec2eca1e370f830511.md               | 107 +++
 .../612e89562043183c86df287c.md               |  77 ++
 .../612e89d254fe5d3df7d6693d.md               |  83 ++
 .../612e8eebe3a6dc3fcc33a66f.md               |  95 ++
 .../612e95ef2e4bdf41f69067f9.md               |  81 ++
 .../612e96fc87fe8e44f69f7ec5.md               | 102 +++
 .../612e98f3245c98475e49cfc6.md               |  88 ++
 .../612e9a21381a1949327512e6.md               |  89 ++
 .../612e9d142affc44a453655db.md               | 117 +++
 .../612e9f1e7e5ccd4fa9ada0be.md               | 103 +++
 .../612ea4c4993aba52ab4aa32e.md               | 119 +++
 .../612ea97df5742154772f312e.md               | 110 +++
 .../612ead8788d28655ef8db056.md               | 112 +++
 .../612eaf56b7ba3257fdbfb0db.md               | 144 +++
 .../612eb4893b63c75bb9251ddf.md               | 129 +++
 .../612eb75153591b5e3b1ab65e.md               | 115 +++
 .../612eb7ca8c275d5f89c73333.md               | 116 +++
 .../612eb8e984cd73677a92b7e9.md               | 117 +++
 .../612eb934f64a4d6890a45518.md               | 118 +++
 .../612ebcba99bfa46a15370b11.md               | 139 +++
 .../612ebe7fe6d07e6b76d1cae2.md               | 133 +++
 .../612ebedec97e096c8bf64999.md               | 136 +++
 .../612ebf9a210f2b6d77001e68.md               | 139 +++
 .../612ec0490ae8626e9adf82e4.md               | 133 +++
 .../612ec19d5268da7074941f84.md               | 154 ++++
 .../612ec29c84b9a6718b1f5cec.md               | 288 ++++++
 .../66fbcdfed6848e48947dbbc9.md               |  36 +
 .../66fbcf750a62784cf11f562d.md               |  81 ++
 .../66fbcf750a62784cf11f562e.md               | 152 +++
 .../66fbcf750a62784cf11f5630.md               |  98 ++
 .../66fbcf750a62784cf11f5631.md               | 104 +++
 .../66fbcf750a62784cf11f5632.md               | 105 +++
 .../66fbcf750a62784cf11f5633.md               | 106 +++
 .../66fbcf750a62784cf11f5634.md               | 133 +++
 .../66fbcf750a62784cf11f5635.md               | 124 +++
 .../66fbcf750a62784cf11f5636.md               | 124 +++
 .../66fbcf750a62784cf11f5637.md               | 186 ++++
 .../66ff02792b3042a2b811f475.md               |  86 ++
 .../670e4f45f7116c0f216a5177.md               | 135 +++
 .../60a3e3396c7b40068ad6996b.md               |  43 +
 .../60a3e3396c7b40068ad6996c.md               |  42 +
 .../60a3e3396c7b40068ad6996d.md               |  41 +
 .../60a3e3396c7b40068ad6996e.md               |  43 +
 .../60a3e3396c7b40068ad6996f.md               |  47 +
 .../60a3e3396c7b40068ad69970.md               |  53 ++
 .../60a3e3396c7b40068ad69971.md               |  67 ++
 .../60a3e3396c7b40068ad69972.md               |  54 ++
 .../60a3e3396c7b40068ad69973.md               |  55 ++
 .../60a3e3396c7b40068ad69974.md               |  67 ++
 .../60a3e3396c7b40068ad69975.md               |  67 ++
 .../60a3e3396c7b40068ad69976.md               |  64 ++
 .../60a3e3396c7b40068ad69977.md               |  65 ++
 .../60a3e3396c7b40068ad69978.md               |  66 ++
 .../60a3e3396c7b40068ad69979.md               |  71 ++
 .../60a3e3396c7b40068ad6997a.md               |  74 ++
 .../60a3e3396c7b40068ad6997b.md               |  70 ++
 .../60a3e3396c7b40068ad6997c.md               |  71 ++
 .../60a3e3396c7b40068ad6997d.md               |  74 ++
 .../60a3e3396c7b40068ad6997e.md               |  75 ++
 .../60a3e3396c7b40068ad6997f.md               |  82 ++
 .../60a3e3396c7b40068ad69980.md               |  84 ++
 .../60a3e3396c7b40068ad69981.md               |  84 ++
 .../60a3e3396c7b40068ad69982.md               |  79 ++
 .../60a3e3396c7b40068ad69983.md               |  80 ++
 .../60a3e3396c7b40068ad69984.md               |  81 ++
 .../60a3e3396c7b40068ad69986.md               |  93 ++
 .../60a3e3396c7b40068ad69987.md               |  94 ++
 .../60a3e3396c7b40068ad69988.md               |  87 ++
 .../60a3e3396c7b40068ad69989.md               |  88 ++
 .../60a3e3396c7b40068ad6998a.md               |  89 ++
 .../60a3e3396c7b40068ad6998b.md               |  93 ++
 .../60a3e3396c7b40068ad6998c.md               | 100 ++
 .../60a3e3396c7b40068ad6998d.md               | 108 +++
 .../60a3e3396c7b40068ad6998e.md               |  95 ++
 .../60a3e3396c7b40068ad6998f.md               |  98 ++
 .../60a3e3396c7b40068ad69990.md               |  97 ++
 .../60a3e3396c7b40068ad69991.md               |  98 ++
 .../60a3e3396c7b40068ad69992.md               | 101 ++
 .../60a3e3396c7b40068ad69993.md               | 100 ++
 .../60a3e3396c7b40068ad69994.md               | 103 +++
 .../60a3e3396c7b40068ad69995.md               | 104 +++
 .../60a3e3396c7b40068ad69996.md               | 103 +++
 .../60a3e3396c7b40068ad69997.md               | 180 ++++
 curriculum/dictionaries/korean/comments.json  |   2 +-
 4208 files changed, 604827 insertions(+), 8847 deletions(-)
 create mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
 create mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
 create mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
 create mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
 create mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
 create mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
 create mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
 create mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
 create mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
 create mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
 create mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
 create mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
 create mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
 create mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
 create mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
 create mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
 create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
 create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
 create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
 create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
 create mode 100644 curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
 create mode 100644 curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
 create mode 100644 curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
 create mode 100644 curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
 create mode 100644 curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
 create mode 100644 curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
 create mode 100644 curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
 create mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
 create mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
 create mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
 create mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
 create mode 100644 curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
 create mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
 create mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
 create mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
 create mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
 create mode 100644 curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
 create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
 create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
 create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
 create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md

diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
index c7f55a6c9b..e6ed9a7be0 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
@@ -9,7 +9,7 @@ dashedName: step-3
 
 The `p` element is used to create a paragraph of text on websites. Create a `p` element below your `h2` element and give it the following text:
 
-`See more cat photos in our gallery.`
+`Everyone loves cute cats online!`
 
 # --hints--
 
@@ -25,13 +25,13 @@ assert(document.querySelector('p'));
 assert(code.match(/<\/p\>/));
 ```
 
-Your `p` element's text should be `See more cat photos in our gallery.` You have either omitted the text or have a typo.
+Your `p` element's text should be `Everyone loves cute cats online!` You have either omitted the text or have a typo.
 
 ```js
 const extraSpacesRemoved = document
   .querySelector('p')
   .innerText.replace(/\s+/g, ' ');
-assert(extraSpacesRemoved.match(/see more cat photos in our gallery\.?$/i));
+assert.match(extraSpacesRemoved, /everyone loves cute cats online!$/i);
 ```
 
 你的 `p` 元素應該在 `h2` 元素的下方。 你把順序寫錯了。
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
index 0eadb75402..0cc0deffe3 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
@@ -49,12 +49,9 @@ assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/i));
 Your comment should be above the `p` element. 你把順序寫錯了。
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
-    )
+assert.match(
+  code.replace(/\s/g, ''),
+  /<!--todo:addlinktocatphotos--><p>everyonelovescutecatsonline!<\/p>/i
 );
 ```
 
@@ -69,7 +66,7 @@ assert(
     <h2>Cat Photos</h2>
 --fcc-editable-region--
 
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
index 3e710f73d4..29ad7e119d 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -55,10 +55,8 @@ Your `main` element's closing tag should be below the `p` element. 你的順序
 ```js
 const mainNode = document.querySelector('main');
 const pNode = document.querySelector('p');
-assert(
-  mainNode.contains(pNode) &&
-    pNode.textContent.toLowerCase().match(/see more cat photos in our gallery/)
-);
+assert.isTrue(mainNode.contains(pNode));
+assert.match(pNode.textContent.toLowerCase(), /everyone loves cute cats online!/);
 ```
 
 # --seed--
@@ -73,7 +71,7 @@ assert(
     <h1>CatPhotoApp</h1>
     <h2>Cat Photos</h2>
     <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 09cecd6482..b33cdfbb71 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -74,14 +74,14 @@ Your code should have a `p` element. You have removed the `p` element from an ea
 assert(document.querySelector('p'));
 ```
 
-The text of the `p` element should be `See more cat photos in our gallery.` Do not change the text, spacing, or punctuation of the `p` element.
+The text of the `p` element should be `Everyone loves cute cats online!` Do not change the text, spacing, or punctuation of the `p` element.
 
 ```js
-assert(
+assert.match(
   document
     .querySelector('p')
-    .innerText.toLowerCase()
-    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
+    .innerText.toLowerCase(),
+    /everyone\s+loves\s+cute\s+cats\s+online!$/
 );
 ```
 
@@ -98,12 +98,12 @@ assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
     </main>
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index cd2c23bebf..9ab6d500a4 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -52,7 +52,7 @@ assert(collection.indexOf('P') < collection.indexOf('IMG'));
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
     </main>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
index 01bde7e19a..daaaff0d3b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
@@ -36,19 +36,19 @@ assert(document.querySelector('img').src);
 你的 `img` 元素的 `src` 屬性應設置爲 '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'。 你可能忽略了 URL 或者有拼寫錯誤。 URL 的大小寫很重要。
 
 ```js
-assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
+assert.strictEqual(document.querySelector('img').src, 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
 ```
 
 儘管你已將 `img` 元素的 `src` 設置爲正確的 URL，但建議始終用引號將屬性的值括起來。
 
 ```js
-assert(!/\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/);
 ```
 
 你的 `img` 元素應該以 `>` 或 `/>` 結束。
 
 ```js
-assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\1\s*\/?>/.test(code));
+assert.match(code, /<img\s+src\s*=\s*("|')\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\s*\1\s*\/?>/);
 ```
 
 # --seed--
@@ -62,7 +62,7 @@ assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img>
 --fcc-editable-region--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
index 284f4ed174..59443cbc7c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
@@ -54,7 +54,7 @@ assert(altText.match(/A cute orange cat lying on its back\.?$/i));
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
 --fcc-editable-region--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index e000a39ad0..1f916c9f7d 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -75,7 +75,7 @@ assert(
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index 3103c1f7f9..b61d79186a 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -15,7 +15,7 @@ A link's text must be placed between the opening and closing tags of an anchor (
 <a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>
 ```
 
-Add the anchor text `link to cat pictures` to the anchor element. This will become the link's text.
+Add the anchor text `cat photos` to the anchor element. This will become the link's text.
 
 # --hints--
 
@@ -31,12 +31,12 @@ assert(document.querySelector('a'));
 assert(code.match(/<\/a\>/));
 ```
 
-Your anchor (`a`) element's text should be `link to cat pictures`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag.
+Your anchor (`a`) element's text should be `cat photos`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag.
 
 ```js
-assert(
-  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
-    'link to cat pictures'
+assert.strictEqual(
+  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' '),
+    'cat photos'
 );
 ```
 
@@ -51,7 +51,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <a href="https://freecatphotoapp.com"></a>
 --fcc-editable-region--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
index 137ff28d52..733b899568 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa2407b521be39a3de7be1
-title: 第 14 步
+title: Step 15
 challengeType: 0
-dashedName: step-14
+dashedName: step-15
 ---
 
 # --description--
@@ -25,22 +25,20 @@ Your `p` element should have a nested anchor (`a`) element with the text `cat ph
 
 ```js
 const anchor = document.querySelectorAll('p > a');
-assert(
-  anchor.length &&
-    anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+assert.isNotEmpty(anchor);
+assert.strictEqual(anchor[1]?.innerText?.toLowerCase().replace(/\s+/g, ' '), 'cat photos')
 ```
 
 Your anchor (`a`) element does not have a `target` attribute. 請檢查在開始標籤的名稱後面要有一個空格，且/或所有的屬性名稱前面也要有一個空格。
 
 ```js
-assert(document.querySelector('a').hasAttribute('target'));
+assert.isTrue(document.querySelectorAll('a')[1]?.hasAttribute('target'));
 ```
 
 The value of the `target` attribute should be `_blank`. 你可能落下了這個值或者有拼寫錯誤。 所有屬性的值都應該放在引號中。
 
 ```js
-assert(document.querySelector('a').getAttribute('target') === '_blank');
+assert.strictEqual(document.querySelectorAll('a')[1]?.getAttribute('target'), '_blank');
 ```
 
 # --seed--
@@ -54,6 +52,7 @@ assert(document.querySelector('a').getAttribute('target') === '_blank');
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
 --fcc-editable-region--
       <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
index 2efb1bacd1..a95dffc4ca 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa30b9eacea3f48c6300ad
-title: Step 15
+title: Step 17
 challengeType: 0
-dashedName: step-15
+dashedName: step-17
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert(document.querySelectorAll('a').length >= 2);
 You are missing a closing (`a`) tag after the image.
 
 ```js
-assert(document.querySelectorAll('a').length === 2);
+assert.lengthOf(document.querySelectorAll('a'), 3);
 ```
 
 Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
@@ -52,7 +52,7 @@ assert(code.match(/<\/a>/g).length >= 2);
 You should only add one closing anchor (`a`) tag. Please remove any extras.
 
 ```js
-assert(code.match(/<\/a>/g).length === 2);
+assert.lengthOf(code.match(/<\/a>/g), 3);
 ```
 
 Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
@@ -86,7 +86,7 @@ assert(document.querySelector('img').parentNode.nodeName === 'A');
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
index d1499ca8fe..6eee2b9dc3 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa3589eacea3f48c6300ae
-title: 步驟 18
+title: Step 20
 challengeType: 0
-dashedName: step-18
+dashedName: step-20
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
index f502541c38..e1ca1cdc40 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa371beacea3f48c6300af
-title: 步驟 19
+title: Step 21
 challengeType: 0
-dashedName: step-19
+dashedName: step-21
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index 34852639d4..ee4361ce55 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa37b9eacea3f48c6300b0
-title: 步驟 20
+title: Step 22
 challengeType: 0
-dashedName: step-20
+dashedName: step-22
 ---
 
 # --description--
@@ -43,7 +43,7 @@ assert.equal(secondSectionLastElemNode?.nodeName , 'UL');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
index 0195c9c8dc..08b909e3b1 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb5ecbeacea3f48c6300b1
-title: 步驟21
+title: Step 23
 challengeType: 0
-dashedName: step-21
+dashedName: step-23
 ---
 
 # --description--
@@ -63,7 +63,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
index 63e0d7b823..83b959c518 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6250eacea3f48c6300b2
-title: 步驟 22
+title: Step 24
 challengeType: 0
-dashedName: step-22
+dashedName: step-24
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert.isTrue(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curricu
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
index 91c4070666..cb7917aa1f 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb655eeacea3f48c6300b3
-title: 步驟-23
+title: Step 25
 challengeType: 0
-dashedName: step-23
+dashedName: step-25
 ---
 
 # --description--
@@ -34,11 +34,7 @@ assert.equal(document.querySelectorAll('section')?.[1]?.lastElementChild?.nodeNa
 Lasagna `img` 元素應該嵌套在 `figure` 元素中。
 
 ```js
-assert(
-  document.querySelector('figure > img') &&
-    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
-      'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
-);
+assert.strictEqual(document.querySelector('figure > img')?.src.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg');
 ```
 
 # --seed--
@@ -52,7 +48,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
index 9ddfdfdb47..df2143a3c8 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6a35eacea3f48c6300b4
-title: 步驟 24
+title: Step 26
 challengeType: 0
-dashedName: step-24
+dashedName: step-26
 ---
 
 # --description--
@@ -82,7 +82,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
index 78837c395e..156244440b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d0
-title: 步驟 25
+title: Step 27
 challengeType: 0
-dashedName: step-25
+dashedName: step-27
 ---
 
 # --description--
@@ -61,7 +61,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
index ea02258a5a..91b8f92706 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d1
-title: 步驟 26
+title: Step 28
 challengeType: 0
-dashedName: step-26
+dashedName: step-28
 ---
 
 # --description--
@@ -55,7 +55,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
index 19589a8162..618c9b57b1 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d2
-title: 步驟 27
+title: Step 29
 challengeType: 0
-dashedName: step-27
+dashedName: step-29
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert([...document.querySelectorAll('ol')].length == 1);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
index f72a986e4b..63019b4a21 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d3
-title: 第 28 步
+title: Step 30
 challengeType: 0
-dashedName: step-28
+dashedName: step-30
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert.equal(document.querySelectorAll('main > section')?.[1]?.lastElementChild?
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
index e353a8d674..df5c2229d2 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d4
-title: 步驟 32
+title: Step 34
 challengeType: 0
-dashedName: step-32
+dashedName: step-34
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
index e0647f83df..86826cee01 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d5
-title: 步驟 34
+title: Step 36
 challengeType: 0
-dashedName: step-34
+dashedName: step-36
 ---
 
 # --description--
@@ -67,7 +67,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
index b60e630441..c864b3a04b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d6
-title: 步驟 35
+title: Step 37
 challengeType: 0
-dashedName: step-35
+dashedName: step-37
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
index 0a2d7287a0..75755a060a 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d7
-title: 步驟 36
+title: Step 38
 challengeType: 0
-dashedName: step-36
+dashedName: step-38
 ---
 
 # --description--
@@ -83,7 +83,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
index a7db9d704e..a8a5f7d8d2 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d8
-title: 步驟 37
+title: Step 39
 challengeType: 0
-dashedName: step-37
+dashedName: step-39
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.isTrue(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
index 40cdb779bf..eef8ea547a 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d9
-title: 步驟 40
+title: Step 42
 challengeType: 0
-dashedName: step-40
+dashedName: step-42
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
index 7e2fed5489..fb41cc672e 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804da
-title: 步驟 42
+title: Step 44
 challengeType: 0
-dashedName: step-42
+dashedName: step-44
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
index 5d4dd3bfd8..da647b6739 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804db
-title: 步驟 41
+title: Step 43
 challengeType: 0
-dashedName: step-41
+dashedName: step-43
 ---
 
 # --description--
@@ -49,7 +49,7 @@ assert.strictEqual(document.querySelector('input')?.getAttribute('required'), ''
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
index dd1c7d639e..ae0d869a5b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dc
-title: 步驟 44
+title: Step 46
 challengeType: 0
-dashedName: step-44
+dashedName: step-46
 ---
 
 # --description--
@@ -107,7 +107,7 @@ assert.match(radioInputElem?.nextSibling?.nodeValue?.replace(/\s+/g, ' '), /\s*I
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
index 29bb269f15..7ce824716c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dd
-title: 步驟 45
+title: Step 47
 challengeType: 0
-dashedName: step-45
+dashedName: step-47
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
index b8c3e957bd..afd140ebae 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804de
-title: 步驟 48
+title: Step 50
 challengeType: 0
-dashedName: step-48
+dashedName: step-50
 ---
 
 # --description--
@@ -68,9 +68,10 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
index af74cde24b..72acd416e9 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804df
-title: 步驟46
+title: Step 48
 challengeType: 0
-dashedName: step-46
+dashedName: step-48
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert.match(document.querySelector('input')?.id, /^indoor$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
index 60fb1c52de..3ca36eb48c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e1
-title: 步驟 50
+title: Step 52
 challengeType: 0
-dashedName: step-50
+dashedName: step-52
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
index d5175cc85d..58cff081bf 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e2
-title: 第 54 步
+title: Step 56
 challengeType: 0
-dashedName: step-54
+dashedName: step-56
 ---
 
 # --description--
@@ -76,7 +76,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
index f81356fd30..908c150091 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e3
-title: 步驟 58
+title: Step 60
 challengeType: 0
-dashedName: step-58
+dashedName: step-60
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
index fbe9446961..0482276396 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e5
-title: 步驟 61
+title: Step 63
 challengeType: 0
-dashedName: step-61
+dashedName: step-63
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.isFalse(document.querySelectorAll('input[type="checkbox"]')?.[2]?.hasAttr
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
index e61ce29ff0..52e7537492 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e7
-title: 步驟 62
+title: Step 64
 challengeType: 0
-dashedName: step-62
+dashedName: step-64
 ---
 
 # --description--
@@ -48,7 +48,7 @@ assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
index d66689b574..50355f0b23 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e8
-title: 步驟 63
+title: Step 65
 challengeType: 0
-dashedName: step-63
+dashedName: step-65
 ---
 
 # --description--
@@ -23,11 +23,11 @@ assert(document.querySelector('footer') && code.match(/<\/footer>/));
 assert(document.querySelector('footer > p'));
 ```
 
-你的 `footer` 元素應該有一個結束標籤。 結束標籤在 `<` 字符後面要有一個 `/`。
+Your `p` element should have a closing tag. 結束標籤在 `<` 字符後面要有一個 `/`。
 
 ```js
 const pElemClosingTags = code.match(/<\/p\>/g);
-assert(pElemClosingTags && pElemClosingTags.length === 2);
+assert.lengthOf(pElemClosingTags, 3);
 ```
 
 你的 `p` 元素的文本應該是 `No Copyright - freeCodeCamp.org`。 你可能忽略了文本，或者有拼寫錯誤，或沒有把它放在 `p` 元素的開始和結束標籤之間。
@@ -48,7 +48,7 @@ assert.match(extraSpacesRemoved, /No Copyright - freeCodeCamp\.org$/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
index d9898ed36e..aeb6ce9e5b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e9
-title: 步驟 64
+title: Step 66
 challengeType: 0
-dashedName: step-64
+dashedName: step-66
 ---
 
 # --description--
@@ -21,7 +21,7 @@ assert(document.querySelectorAll('footer > p > a').length);
 
 ```js
 const aElemClosingTags = code.match(/<\/a\>/g);
-assert(aElemClosingTags && aElemClosingTags.length === 3);
+assert.lengthOf(aElemClosingTags, 4);
 ```
 
 你的錨元素（`a`）應該有一個 `href` 屬性，其值爲 `https://www.freecodecamp.org`。 你可能忽略了屬性/值，或者有拼寫錯誤。
@@ -59,7 +59,7 @@ assert.match(pText, /^no copyright - freecodecamp.org$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
index cb40342d08..ff9c1de5f3 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ea
-title: 步驟 65
+title: Step 67
 challengeType: 0
-dashedName: step-65
+dashedName: step-67
 ---
 
 # --description--
@@ -54,7 +54,7 @@ assert(noSpaces.match(/\<\/head\>\<body\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
index a51070e31e..b1140e1806 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804eb
-title: 第 66 步
+title: Step 68
 challengeType: 0
-dashedName: step-66
+dashedName: step-68
 ---
 
 # --description--
@@ -56,7 +56,7 @@ assert(document.title && document.title.toLowerCase() === 'catphotoapp');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
index ea32c83d22..29e34aec27 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ec
-title: 步驟 67
+title: Step 69
 challengeType: 0
-dashedName: step-67
+dashedName: step-69
 ---
 
 # --description--
@@ -44,7 +44,7 @@ assert(extraSpacesRemoved.match(/\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
index 1a4cb1f9fb..25274b6714 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ee
-title: 步驟 68
+title: Step 70
 challengeType: 0
-dashedName: step-68
+dashedName: step-70
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\<html/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
index 39e98c7b42..e2346358b8 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
@@ -1,8 +1,8 @@
 ---
 id: 5efada803cbd2bbdab94e332
-title: 步驟 29
+title: Step 31
 challengeType: 0
-dashedName: step-29
+dashedName: step-31
 ---
 
 # --description--
@@ -42,16 +42,15 @@ assert(
 
 ```js
 const catsImg = document.querySelectorAll('figure > img')[1];
-assert(
-  catsImg &&
-    catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
+assert.strictEqual(
+  catsImg?.src?.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
 );
 ```
 
 儘管你已將新圖像的 `src` 設置爲正確的 URL，但建議始終將屬性值放在引號中。
 
 ```js
-assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/);
 ```
 
 # --seed--
@@ -65,7 +64,7 @@ assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/ca
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
index 6a4d19d2e3..370f8d0292 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae0543cbd2bbdab94e333
-title: 第 30 步
+title: Step 32
 challengeType: 0
-dashedName: step-30
+dashedName: step-32
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
index 0aea83747e..52c5eb3ac6 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae16e3cbd2bbdab94e334
-title: 步驟 31
+title: Step 33
 challengeType: 0
-dashedName: step-31
+dashedName: step-33
 ---
 
 # --description--
@@ -88,7 +88,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
index 0e631c235a..faa550375e 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb23e70dc218d6c85f89b1
-title: 步驟 38
+title: Step 40
 challengeType: 0
-dashedName: step-38
+dashedName: step-40
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(!/\<input\s+type\s*=\s*text/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
index 8af5279968..5456bc01f8 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb2c990dc218d6c85f89b2
-title: 第 43 步
+title: Step 45
 challengeType: 0
-dashedName: step-43
+dashedName: step-45
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
index 0644edbd43..fb75d5e540 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc4f528d6a74d05e68af74
-title: 步驟 56
+title: Step 58
 challengeType: 0
-dashedName: step-56
+dashedName: step-58
 ---
 
 # --description--
@@ -110,7 +110,7 @@ assert.match(code, />\s+<label\s+for\s*=\s*('|")loving/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
index e87da1bb5d..9c771a8966 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc518e8d6a74d05e68af75
-title: 步驟 57
+title: Step 59
 challengeType: 0
-dashedName: step-57
+dashedName: step-59
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
index be568dfc8c..aba11b57ba 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc54138d6a74d05e68af76
-title: 步驟 55
+title: Step 57
 challengeType: 0
-dashedName: step-55
+dashedName: step-57
 ---
 
 # --description--
@@ -34,7 +34,7 @@ assert.match(document.querySelector('input[type="checkbox"]')?.id, /^loving$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
index 7c66aa230d..44a223004d 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc575c8d6a74d05e68af77
-title: 步驟 59
+title: Step 61
 challengeType: 0
-dashedName: step-59
+dashedName: step-61
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
index d1c07690cf..0f3c4eaa26 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5f05a1d8e233dff4a68508d8
-title: 步驟 47
+title: Step 49
 challengeType: 0
-dashedName: step-47
+dashedName: step-49
 ---
 
 # --description--
@@ -92,7 +92,7 @@ assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
index 2a2308feff..8615593ee5 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07be6ef7412fbad0c5626b
-title: 步驟 16
+title: Step 18
 challengeType: 0
-dashedName: step-16
+dashedName: step-18
 ---
 
 # --description--
@@ -40,14 +40,14 @@ The entire `section` element should be between the opening and closing tags of t
 assert(document.querySelector('section').parentNode.nodeName === 'MAIN');
 ```
 
-The existing `h2`, comment, `p` element, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
+The existing `h2`, comment, two `p` elements, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
 
 ```js
 const childrenOfSection = [...document.querySelector('section').childNodes];
 const foundElements = childrenOfSection.filter((child) => {
   return ['H2', 'A', 'P'].includes(child.nodeName);
 });
-assert(foundElements.length === 3);
+assert.lengthOf(foundElements, 4);
 ```
 
 The `h1` element should not be nested in the `section` element.
@@ -65,12 +65,12 @@ assert.isFalse(includesH1);
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
 
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
       <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
index 8fc230355d..caef863bf5 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07c98cdb9413cbd4b16750
-title: Step 17
+title: Step 19
 challengeType: 0
-dashedName: step-17
+dashedName: step-19
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(foundElems.length === 2);
 --fcc-editable-region--
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
index 83801e11a9..a4e48a6dcd 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07fb1579dc934717801375
-title: 步驟 33
+title: Step 35
 challengeType: 0
-dashedName: step-33
+dashedName: step-35
 ---
 
 # --description--
@@ -62,7 +62,7 @@ assert.lengthOf(document.querySelectorAll('main > section')?.[2]?.children, 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
index caa4e9b4a9..577040ec6b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d48e7b435f13ab6550051
-title: 步驟 51
+title: Step 53
 challengeType: 0
-dashedName: step-51
+dashedName: step-53
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
index e7c8762906..83fc948a80 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4ab1b435f13ab6550052
-title: 第 52 步
+title: Step 54
 challengeType: 0
-dashedName: step-52
+dashedName: step-54
 ---
 
 # --description--
@@ -79,7 +79,7 @@ assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
index 5cea934f00..57757efa41 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4d04b435f13ab6550053
-title: Step 53
+title: Step 55
 challengeType: 0
-dashedName: step-53
+dashedName: step-55
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
index fe43ca574b..7c7263a8e3 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a80975fc4bcae0edb3497
-title: 步驟 49
+title: Step 51
 challengeType: 0
-dashedName: step-49
+dashedName: step-51
 ---
 
 # --description--
@@ -64,9 +64,10 @@ assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
index a8780d1579..30011561c1 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a89f1190aff21ae42105a
-title: 步驟 60
+title: Step 62
 challengeType: 0
-dashedName: step-60
+dashedName: step-62
 ---
 
 # --description--
@@ -52,7 +52,7 @@ assert(energeticCheckbox.getAttribute('value').match(/^energetic$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
index 57a9dcb569..2ecdd7718f 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
@@ -1,8 +1,8 @@
 ---
 id: 62bb4009e3458a128ff57d5d
-title: 步驟 69
+title: Step 71
 challengeType: 0
-dashedName: step-69
+dashedName: step-71
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
@@ -127,7 +127,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
new file mode 100644
index 0000000000..aa057f8e17
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
@@ -0,0 +1,57 @@
+---
+id: 671141d8e32fe934c26fa1be
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Add the words `See more` before the anchor element and `in our gallery` after the anchor element
+
+# --hints--
+
+You should use the existing anchor element, do not create a new one.
+
+```js
+assert.lengthOf(document.querySelectorAll('a'), 1);
+```
+
+You should have the words `See more` before the anchor element.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a>/)
+```
+
+You should have the words `in our gallery` after the anchor element.
+
+```js
+assert.match(code, /<a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+You should have `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery` in your code.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <a href="https://freecatphotoapp.com">cat photos</a>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
new file mode 100644
index 0000000000..78aae1394e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
@@ -0,0 +1,48 @@
+---
+id: 671141f948cbab359e74cc93
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Add `p` tags to turn `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.` into a paragraph.
+
+# --hints--
+
+You should add a `p` element around `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.`.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P);
+assert.strictEqual(P.innerText, "See more cat photos in our gallery.");
+```
+
+You should still have the anchor element inside the new paragraph.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P.querySelector('a'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
new file mode 100644
index 0000000000..57b4139497
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -0,0 +1,57 @@
+---
+id: 671141feba228a35cefba82d
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Turn the text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+# --hints--
+
+There should be a new anchor element in the first `p` element.
+
+```js
+assert.exists(document.querySelector('p')?.querySelector('a'));
+```
+
+The anchor text should be `cute cats`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.innerText, "cute cats");
+```
+
+The `href` attrivute of the new anchor element should be `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.href, "https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg");
+```
+
+The text of the `p` element should still be `Everyone loves cute cats online!`.
+
+```js
+assert.strictEqual(document.querySelector('p')?.innerText, "Everyone loves cute cats online!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
new file mode 100644
index 0000000000..7256f63593
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
@@ -0,0 +1,47 @@
+---
+id: 671144cdcc01d73f7dd79dc9
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have added the link you can remove the comment.
+
+# --hints--
+
+There should not be any comment in your code.
+
+```js
+assert.notMatch(code, /<!--/);
+assert.notMatch(code, /-->/);
+```
+
+The text `TODO: Add link to cat photos` should not be present anymore.
+
+```js
+assert.notMatch(code, /TODO:?/i)
+assert.notMatch(code, /Add\s*link\s*to\s*cat\s*photos/i)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+--fcc-editable-region--
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
+      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
index d1be0b0f4a..cdd5afebf3 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
@@ -1,8 +1,8 @@
 ---
 id: 7cf9b03d81a65668421804c3
-title: 步驟 39
+title: Step 41
 challengeType: 0
-dashedName: step-39
+dashedName: step-41
 ---
 
 # --description--
@@ -66,7 +66,7 @@ assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
index 692385ab63..c833584c2d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is asynchronous programming?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to execute code in a sequential order.
 
 ---
 
-Placeholder distractor 2
+A technique to handle errors in synchronous code.
 
 ---
 
-Placeholder distractor 3
+A way to guarantee task order.
 
 #### --answer--
 
-Placeholder answer
+A method to execute code concurrently without blocking the main thread.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `async` attribute do when used in a `<script>` tag?
 
 #### --distractors--
 
-Placeholder distractor 1
+It allows the script to be executed after the HTML document has been completely parsed.
 
 ---
 
-Placeholder distractor 2
+It ensures the script runs in a synchronous manner.
 
 ---
 
-Placeholder distractor 3
+It delays the script execution until the browser is idle.
 
 #### --answer--
 
-Placeholder answer
+The script is downloaded in parallel with parsing the page and executed as soon as it is available.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Fetch API in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manage asynchronous callbacks.
 
 ---
 
-Placeholder distractor 2
+To create and manage cookies.
 
 ---
 
-Placeholder distractor 3
+To render dynamic HTML content.
 
 #### --answer--
 
-Placeholder answer
+To make network requests to servers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which `HTTP` method is used to send data to a server for processing?
 
 #### --distractors--
 
-Placeholder distractor 1
+`GET`
 
 ---
 
-Placeholder distractor 2
+`DELETE`
 
 ---
 
-Placeholder distractor 3
+`HEAD`
 
 #### --answer--
 
-Placeholder answer
+`POST`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `res.json()` method do in Express.js?
 
 #### --distractors--
 
-Placeholder distractor 1
+It retrieves data from a JSON file.
 
 ---
 
-Placeholder distractor 2
+It parses a JSON string into a JavaScript object.
 
 ---
 
-Placeholder distractor 3
+It sends raw JSON as a response without any processing.
 
 #### --answer--
 
-Placeholder answer
+It converts a JavaScript object to a JSON string and sends it as a response.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a promise in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to synchronize multiple operations.
 
 ---
 
-Placeholder distractor 2
+A callback function that runs after an operation.
 
 ---
 
-Placeholder distractor 3
+A technique to handle errors in asynchronous code.
 
 #### --answer--
 
-Placeholder answer
+An object that represents the eventual completion (or failure) of an asynchronous operation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does promise chaining allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Execute multiple asynchronous operations in parallel.
 
 ---
 
-Placeholder distractor 2
+Handle synchronous operations more efficiently.
 
 ---
 
-Placeholder distractor 3
+Retry failed operations automatically.
 
 #### --answer--
 
-Placeholder answer
+Pass the result of one promise to the next.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle successful completion of a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.catch()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.then()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle errors in a promise chain?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.then()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.catch()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the use of the `.finally()` method in a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+It returns the result of the promise.
 
 ---
 
-Placeholder distractor 2
+It stops the execution of subsequent promise handlers.
 
 ---
 
-Placeholder distractor 3
+It retries the promise if it fails.
 
 #### --answer--
 
-Placeholder answer
+It executes code after a promise is fulfilled or rejected, regardless of the outcome.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the syntax for declaring an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+`function myFunction() {}`
 
 ---
 
-Placeholder distractor 2
+`function async myFunction() {}`
 
 ---
 
-Placeholder distractor 3
+`async {} => ()`
 
 #### --answer--
 
-Placeholder answer
+`async function myFunction() {}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `await` keyword do in an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+It creates a new promise.
 
 ---
 
-Placeholder distractor 2
+It executes code immediately without waiting.
 
 ---
 
-Placeholder distractor 3
+It returns the result of the promise.
 
 #### --answer--
 
-Placeholder answer
+It pauses the execution of the function until the promise is resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Geolocation API?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manipulate HTML elements.
 
 ---
 
-Placeholder distractor 2
+To create and manage map elements.
 
 ---
 
-Placeholder distractor 3
+To control the device's camera.
 
 #### --answer--
 
-Placeholder answer
+To retrieve the geographical location of a device.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method of the Geolocation API is used to get the current position of the device?
 
 #### --distractors--
 
-Placeholder distractor 1
+`getLocation()`
 
 ---
 
-Placeholder distractor 2
+`getPosition()`
 
 ---
 
-Placeholder distractor 3
+`getLatLong()`
 
 #### --answer--
 
-Placeholder answer
+`getCurrentPosition()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What parameters can be passed to the `getCurrentPosition()` method?
 
 #### --distractors--
 
-Placeholder distractor 1
+Only the success callback function.
 
 ---
 
-Placeholder distractor 2
+Only options.
 
 ---
 
-Placeholder distractor 3
+One the error callback function.
 
 #### --answer--
 
-Placeholder answer
+Success and error callback functions, along with options.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What will the following code return? `fetch('https://api.example.com/data')`
 
 #### --distractors--
 
-Placeholder distractor 1
+The JSON response directly.
 
 ---
 
-Placeholder distractor 2
+An error if the URL is not reachable.
 
 ---
 
-Placeholder distractor 3
+A synchronous response.
 
 #### --answer--
 
-Placeholder answer
+A `Promise` that resolves to a `Response` object
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default HTTP method for the Fetch API?
 
 #### --distractors--
 
-Placeholder distractor 1
+`POST`
 
 ---
 
-Placeholder distractor 2
+`PUT`
 
 ---
 
-Placeholder distractor 3
+`DELETE`
 
 #### --answer--
 
-Placeholder answer
+`GET`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `Promise.all()` method do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resolves a single promise.
 
 ---
 
-Placeholder distractor 2
+It rejects the first promise that fails.
 
 ---
 
-Placeholder distractor 3
+It runs all promises sequentially.
 
 #### --answer--
 
-Placeholder answer
+It executes multiple promises concurrently and returns the results when all are resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you handle multiple asynchronous operations using async/await?
 
 #### --distractors--
 
-Placeholder distractor 1
+You must always use `.then()` for each operation.
 
 ---
 
-Placeholder distractor 2
+You cannot handle multiple operations with async/await.
 
 ---
 
-Placeholder distractor 3
+You must use callback functions for all operations.
 
 #### --answer--
 
-Placeholder answer
+You can use `await` for each operation in sequence and put them inside an async function.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is true about the `fetch` API?
 
 #### --distractors--
 
-Placeholder distractor 1
+It can only handle `GET` requests.
 
 ---
 
-Placeholder distractor 2
+It requires a callback function for handling responses.
 
 ---
 
-Placeholder distractor 3
+It only works in synchronous code.
 
 #### --answer--
 
-Placeholder answer
+It is used to make HTTP requests to a server.
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
index 80af1166b6..cac5b80e72 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What happens when there is too much content to fit in an element box?
 
 #### --distractors--
 
-Placeholder distractor 1
+Underflow
 
 ---
 
-Placeholder distractor 2
+Compression
 
 ---
 
-Placeholder distractor 3
+Padding
 
 #### --answer--
 
-Placeholder answer
+Overflow
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default behavior of CSS when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+Content is hidden
 
 ---
 
-Placeholder distractor 2
+Content is clipped
 
 ---
 
-Placeholder distractor 3
+Content is resized
 
 #### --answer--
 
-Placeholder answer
+Content is visible
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why does CSS typically avoid hiding content when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+To enhance page design by hiding irrelevant content
 
 ---
 
-Placeholder distractor 2
+To save memory and load pages faster
 
 ---
 
-Placeholder distractor 3
+To automatically fix broken layout issues
 
 #### --answer--
 
-Placeholder answer
+To prevent data loss and make issues noticeable
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you handle overflow in CSS to hide content or add scrollbars?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars
 
 ---
 
-Placeholder distractor 2
+Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars
 
 ---
 
-Placeholder distractor 3
+Use `overflow: none` to hide content and `overflow: show` to display scrollbars
 
 #### --answer--
 
-Placeholder answer
+Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you specify different scrolling behaviors for the x-axis and y-axis in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+By using `scroll-x` and `scroll-y` properties
 
 ---
 
-Placeholder distractor 2
+By using `overflow-x` and `overflow-y` separately in every case
 
 ---
 
-Placeholder distractor 3
+By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x`
 
 #### --answer--
 
-Placeholder answer
+By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform` CSS property allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Change the color and font style of an element
 
 ---
 
-Placeholder distractor 2
+Adjust the margin and padding of an element
 
 ---
 
-Placeholder distractor 3
+Modify the visibility and display of an element
 
 #### --answer--
 
-Placeholder answer
+Rotate, scale, skew, or translate an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform-box: fill-box` property do in an animation that rotates an element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resizes the element to fit the canvas during the transformation
 
 ---
 
-Placeholder distractor 2
+It changes the background of the element during transformation
 
 ---
 
-Placeholder distractor 3
+It sets the transform origin to the top-left corner of the element
 
 #### --answer--
 
-Placeholder answer
+It sets the transform origin to the center of the element's bounding box, allowing it to spin in place
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `transform-origin` property in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It controls the animation speed of transformed elements
 
 ---
 
-Placeholder distractor 2
+It defines the display type of transformed elements
 
 ---
 
-Placeholder distractor 3
+It sets the background of transformed elements
 
 #### --answer--
 
-Placeholder answer
+It specifies the point around which a transformation is applied to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does margin affect the size of an element in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Margin increases the actual size of the element's box
 
 ---
 
-Placeholder distractor 2
+Margin has no effect on the element's size or position
 
 ---
 
-Placeholder distractor 3
+Margin decreases the total area the element occupies on the page
 
 #### --answer--
 
-Placeholder answer
+Margin affects the total area an element occupies but is not part of the actual size of the box
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the content area of an element in CSS represent?
 
 #### --distractors--
 
-Placeholder distractor 1
+It defines the margins and padding around the element
 
 ---
 
-Placeholder distractor 2
+It specifies the border thickness of the element
 
 ---
 
-Placeholder distractor 3
+It controls the visibility of the element on the page
 
 #### --answer--
 
-Placeholder answer
+It contains the "real" content of the element, such as text, images, or videos
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the difference between `content-box` and `border-box` in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`content-box` includes padding and border, while `border-box` includes only content dimensions
 
 ---
 
-Placeholder distractor 2
+Both `content-box` and `border-box` include only the border dimensions
 
 ---
 
-Placeholder distractor 3
+`content-box` is used for 2D elements, while `border-box` is used for 3D elements
 
 #### --answer--
 
-Placeholder answer
+`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+To apply default styles to all elements for faster loading
 
 ---
 
-Placeholder distractor 2
+To minimize the size of CSS files by removing unused styles
 
 ---
 
-Placeholder distractor 3
+To optimize images and fonts for better performance
 
 #### --answer--
 
-Placeholder answer
+To remove default browser styling and create a consistent baseline for styling across different browsers
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What are the common types of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bootstrap Reset, Tailwind Reset, and Foundation Reset
 
 ---
 
-Placeholder distractor 2
+Simple Reset, Comprehensive Reset, and Adaptive Reset
 
 ---
 
-Placeholder distractor 3
+Minimal Reset, Advanced Reset, and Legacy Reset
 
 #### --answer--
 
-Placeholder answer
+Normalize.css, Eric Meyer's Reset, and HTML5 Reset
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `scale3d()` property value do in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It rotates an element in 3D space
 
 ---
 
-Placeholder distractor 2
+It skews an element on the x, y, and z axes
 
 ---
 
-Placeholder distractor 3
+It translates an element in 3D space
 
 #### --answer--
 
-Placeholder answer
+It scales an element along the x, y, and z axes
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the total width of an element calculated in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Total width = width + margin + padding + border
 
 ---
 
-Placeholder distractor 2
+Total width = width + margin + padding
 
 ---
 
-Placeholder distractor 3
+Total width = width + margin + border
 
 #### --answer--
 
-Placeholder answer
+Total width = width + left padding + right padding + left border + right border
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the filter property in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the layout of the element on the page
 
 ---
 
-Placeholder distractor 2
+It changes the background color and texture of an element
 
 ---
 
-Placeholder distractor 3
+It alters the size and position of an element
 
 #### --answer--
 
-Placeholder answer
+It applies visual effects like blur and saturation to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the `filter` property specified in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+As only a single function, where percentage values must be used
 
 ---
 
-Placeholder distractor 2
+As `block` or `inline`, with values expressed in pixels
 
 ---
 
-Placeholder distractor 3
+As `none` or multiple functions, but only percentage values are accepted
 
 #### --answer--
 
-Placeholder answer
+As `none` or one or more functions, where percentage values can also be expressed as decimals
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `contrast()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white
 
 ---
 
-Placeholder distractor 2
+Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it
 
 ---
 
-Placeholder distractor 3
+Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque
 
 #### --answer--
 
-Placeholder answer
+Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `hue-rotate()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the brightness of the input image based on degrees
 
 ---
 
-Placeholder distractor 2
+It rotates an element's size and position in the document
 
 ---
 
-Placeholder distractor 3
+It adjusts the saturation and contrast of the input image
 
 #### --answer--
 
-Placeholder answer
+It applies a hue rotation, where the `<angle>` value defines the degrees around the hue color circle
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens when two animated filters have different function list lengths in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+The shorter list's filters override the longer list's filters
 
 ---
 
-Placeholder distractor 2
+The filters are discarded and no animation is applied
 
 ---
 
-Placeholder distractor 3
+Only the first filter function in each list is animated
 
 #### --answer--
 
-Placeholder answer
+The longer list's missing equivalent filter functions are added to the shorter list using their initial values
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
index 79e4cb7a88..6855b5dea7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A database structured to recognize non-relation between stored items.
 
 ---
 
-Placeholder distractor 2
+A database that stores unstructured data.
 
 ---
 
-Placeholder distractor 3
+A flat file-based system.
 
 #### --answer--
 
-Placeholder answer
+A database structured to recognize relations between stored items.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a non-relational database differ from a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Non-relational databases use tables, while relational databases do not.
 
 ---
 
-Placeholder distractor 2
+Relational databases can store unstructured data.
 
 ---
 
-Placeholder distractor 3
+Non-relational databases are slower than relational databases.
 
 #### --answer--
 
-Placeholder answer
+Non-relational databases can store unstructured data.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `\l` command do when executed in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all schemas
 
 ---
 
-Placeholder distractor 2
+Lists all tables
 
 ---
 
-Placeholder distractor 3
+Connects to a database
 
 #### --answer--
 
-Placeholder answer
+Lists all databases
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following commands creates a new table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD TABLE`
 
 ---
 
-Placeholder distractor 2
+`NEW TABLE`
 
 ---
 
-Placeholder distractor 3
+`ALTER TABLE`
 
 #### --answer--
 
-Placeholder answer
+`CREATE TABLE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of a foreign key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To allow duplication of data.
 
 ---
 
-Placeholder distractor 2
+To uniquely identify a row in the table.
 
 ---
 
-Placeholder distractor 3
+To store large amounts of text data.
 
 #### --answer--
 
-Placeholder answer
+To create a relationship between two tables.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command will add a new column to an existing table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD COLUMN column_name TO table_name data_type;`
 
 ---
 
-Placeholder distractor 2
+`INSERT COLUMN column_name INTO table_name data_type;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name ADD COLUMN column_name data_type;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name ADD COLUMN column_name data_type;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What type of relationship exists when one record in Table A corresponds to one or more records in Table B?
 
 #### --distractors--
 
-Placeholder distractor 1
+One-to-One (1-1)
 
 ---
 
-Placeholder distractor 2
+Many-to-Many (m-m)
 
 ---
 
-Placeholder distractor 3
+Many-to-one(m-1)
 
 #### --answer--
 
-Placeholder answer
+One-to-Many (1-m)
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary purpose of normalization in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To increase the speed of data retrieval.
 
 ---
 
-Placeholder distractor 2
+To enforce security measures.
 
 ---
 
-Placeholder distractor 3
+To simplify the database schema.
 
 #### --answer--
 
-Placeholder answer
+To eliminate data redundancy and ensure data integrity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you delete a column from a table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 2
+`DELETE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name DELETE column_name;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name DROP COLUMN column_name;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the function of the `PRIMARY KEY` constraint in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+To link two tables together.
 
 ---
 
-Placeholder distractor 2
+To define the default value for a column.
 
 ---
 
-Placeholder distractor 3
+To allow null values in the column.
 
 #### --answer--
 
-Placeholder answer
+To ensure that the column contains unique values.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the command `\c` do in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all tables in the current database.
 
 ---
 
-Placeholder distractor 2
+Displays the current database connection details.
 
 ---
 
-Placeholder distractor 3
+Exits the `psql` shell.
 
 #### --answer--
 
-Placeholder answer
+Connects to the specified database.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command inserts data into a table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`PUT VALUES`
 
 ---
 
-Placeholder distractor 2
+`UPDATE INTO`
 
 ---
 
-Placeholder distractor 3
+`ADD DATA`
 
 #### --answer--
 
-Placeholder answer
+`INSERT INTO`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you rename a column in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`MODIFY COLUMN`
 
 ---
 
-Placeholder distractor 2
+`CHANGE COLUMN`
 
 ---
 
-Placeholder distractor 3
+`ALTER COLUMN`
 
 #### --answer--
 
-Placeholder answer
+`RENAME COLUMN`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which query will delete all records from the employees table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE ALL`
 
 ---
 
-Placeholder distractor 2
+`TRUNCATE employees`
 
 ---
 
-Placeholder distractor 3
+`DROP RECORDS`
 
 #### --answer--
 
-Placeholder answer
+`DELETE FROM employees`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which SQL constraint specifically ensures that a column can contain only unique values, allowing nulls?
 
 #### --distractors--
 
-Placeholder distractor 1
+`NOT NULL`
 
 ---
 
-Placeholder distractor 2
+`FOREIGN KEY`
 
 ---
 
-Placeholder distractor 3
+`PRIMARY KEY`
 
 #### --answer--
 
-Placeholder answer
+`UNIQUE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a relational database, what is an index used for?
 
 #### --distractors--
 
-Placeholder distractor 1
+To store additional metadata about tables.
 
 ---
 
-Placeholder distractor 2
+To ensure unique values in a column.
 
 ---
 
-Placeholder distractor 3
+To enforce data integrity.
 
 #### --answer--
 
-Placeholder answer
+To speed up data retrieval.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does a one-to-one (1-1) relationship represent in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Each record in Table A corresponds to one or more records in Table B.
 
 ---
 
-Placeholder distractor 2
+Each record in Table A corresponds to no records in Table B.
 
 ---
 
-Placeholder distractor 3
+Each record in Table A corresponds to multiple records in Table B and vice versa.
 
 #### --answer--
 
-Placeholder answer
+Each record in Table A corresponds to exactly one record in Table B.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command will list all tables in the current PostgreSQL database?
 
 #### --distractors--
 
-Placeholder distractor 1
+`\l`
 
 ---
 
-Placeholder distractor 2
+`SHOW TABLES`
 
 ---
 
-Placeholder distractor 3
+`\t`
 
 #### --answer--
 
-Placeholder answer
+`\d`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
new file mode 100644
index 0000000000..6a1bfc5b2b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
@@ -0,0 +1,65 @@
+---
+id: 619665c9abd72906f3ad30f9
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You will be building a happy Flappy Penguin, and further practicing CSS transforms and animations in the process.
+
+Begin with linking your stylesheet to the page.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.exists(document.querySelector('link'));
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
new file mode 100644
index 0000000000..2572b413a4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
@@ -0,0 +1,56 @@
+---
+id: 61967e74a8e3690ab6292daa
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`.
+
+# --hints--
+
+You should use the `body` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+You should use the `background` property in the `body` selector.
+
+```js
+assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background'));
+```
+
+You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
new file mode 100644
index 0000000000..67e0a51de0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
@@ -0,0 +1,53 @@
+---
+id: 61968df2acd5550bf1616c34
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Normalize your page's sizing, by removing the `body` element's `margin` and `padding`.
+
+# --hints--
+
+You should give `body` a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+You should give `body` a `padding` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
new file mode 100644
index 0000000000..ec42f16803
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
@@ -0,0 +1,51 @@
+---
+id: 61968e9243a4090cc805531c
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Remove both the horizontal and vertical scrollbars, using only one property.
+
+# --hints--
+
+You should give `body` an `overflow` of `--fcc-expected--`. But found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
new file mode 100644
index 0000000000..75b3097c34
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
@@ -0,0 +1,64 @@
+---
+id: 61968f8877c6720d6d61aaf5
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within the `body`, add a `div` with a `class` of `ground`.
+
+# --hints--
+
+You should add a new `div`.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+You should give the `div` a `class` of `ground`.
+
+```js
+assert.include(document.querySelector('div')?.className, 'ground');
+```
+
+You should place the `div` within the `body`.
+
+```js
+assert.exists(document.querySelector('body > div.ground'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
new file mode 100644
index 0000000000..2e20bd3589
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
@@ -0,0 +1,66 @@
+---
+id: 619691693bc14b0e528f5a20
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`.
+
+# --hints--
+
+You should use the `.ground` selector.
+
+```js
+assert.match(code, /\.ground\s*\{/);
+```
+
+You should give the `.ground` element a `width` of `100vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw');
+```
+
+You should give the `.ground` element a `height` of `400px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
new file mode 100644
index 0000000000..afa5d6f94b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
@@ -0,0 +1,58 @@
+---
+id: 6196928658b6010f28c39484
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`.
+
+# --hints--
+
+You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
new file mode 100644
index 0000000000..606e749c43
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
@@ -0,0 +1,73 @@
+---
+id: 619692ff79f5770fc6d8c0b4
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin.
+
+# --hints--
+
+You should add a new `div` within the `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 2);
+```
+
+You should give the `div` a `class` of `penguin`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin');
+```
+
+You should place `div.penguin` before `div.ground`.
+
+```js
+assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
new file mode 100644
index 0000000000..46ebd08c10
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
@@ -0,0 +1,75 @@
+---
+id: 6196990f966e8f10a40094f6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Target the `.penguin` element, and set its `width` and `height` to `300px`.
+
+# --hints--
+
+You should use the `.penguin` selector.
+
+```js
+assert.match(code, /\.penguin\s*\{/);
+```
+
+You should give `.penguin` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
+```
+
+You should give `.penguin` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
new file mode 100644
index 0000000000..860cde3323
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
@@ -0,0 +1,74 @@
+---
+id: 619699c10a0f6e11591d73c4
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`.
+
+# --hints--
+
+You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto');
+```
+
+You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
new file mode 100644
index 0000000000..3fa5992f53
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
@@ -0,0 +1,83 @@
+---
+id: 61969aa6acef5b12200f672e
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To create some scenery in the background, you will add two mountains.
+
+Above the `.penguin` element, add a `div` with a `class` of `left-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `left-mountain`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain');
+```
+
+You should place `.left-mountain` before `.penguin`.
+
+```js
+assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
new file mode 100644
index 0000000000..3568d09eeb
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
@@ -0,0 +1,89 @@
+---
+id: 61969c487ced6f12db8fef94
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`.
+
+# --hints--
+
+You should use the `.left-mountain` selector.
+
+```js
+assert.match(code, /\.left-mountain\s*\{/);
+```
+
+You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
+```
+
+You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
+```
+
+You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
new file mode 100644
index 0000000000..e8eba6e4ec
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
@@ -0,0 +1,76 @@
+---
+id: 61969d66cfcdba137d021558
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
new file mode 100644
index 0000000000..a182060c6c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
@@ -0,0 +1,91 @@
+---
+id: 61969e7451455614217e901b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by.
+
+Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis.
+
+# --hints--
+
+You should give `.left-mountain` a `transform` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
+```
+
+You should use the `skew` function on `transform`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
+```
+
+You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
new file mode 100644
index 0000000000..dc15f9983e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
@@ -0,0 +1,90 @@
+---
+id: 6196adc17f77a714d51485f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Set the stack level of the mountain element such that it remains directly behind the `.ground` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+You should not change the `z-index` of the `.ground` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
new file mode 100644
index 0000000000..870ce25dc1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
@@ -0,0 +1,86 @@
+---
+id: 6196aead7ac7bf1584b17a7f
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`.
+
+# --hints--
+
+You should give `.left-mountain` a `margin-top` of `100px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px');
+```
+
+You should give `.ground` a `margin-top` of `-58px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
new file mode 100644
index 0000000000..b6ddd5cad7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
@@ -0,0 +1,92 @@
+---
+id: 6196ce0415498d2463989e84
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 4);
+```
+
+You should give the `div` a `class` of `back-mountain`.
+
+```js
+assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain');
+```
+
+You should place `.back-mountain` after `.left-mountain`.
+
+```js
+assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
new file mode 100644
index 0000000000..bcbe4d3e9d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
@@ -0,0 +1,100 @@
+---
+id: 6196cee94c6da1253809dff9
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`.
+
+# --hints--
+
+You should use the `.back-mountain` selector.
+
+```js
+assert.match(code, /\.back-mountain\s*\{/);
+```
+
+You should give `.back-mountain` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px');
+```
+
+You should give `.back-mountain` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px');
+```
+
+You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
new file mode 100644
index 0000000000..4bb9ea8634
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
@@ -0,0 +1,87 @@
+---
+id: 6196d00a5d7292262bc02f4c
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.back-mountain` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
new file mode 100644
index 0000000000..d3fd004502
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
@@ -0,0 +1,100 @@
+---
+id: 6196d0cda039d026f7f78d1e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1');
+```
+
+You should not change the `z-index` of the `.left-mountain` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
new file mode 100644
index 0000000000..cdd348db03
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
@@ -0,0 +1,131 @@
+---
+id: 6196d1ac33c68d27dcda5796
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`.
+
+# --hints--
+
+You should use the `transform` property to rotate the element.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.notEmpty(backMountain?.transform);
+} else {
+  assert.notEmpty(backMountain?.rotate);
+}
+```
+
+You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.equal(backMountain?.transform, 'rotate(45deg)');
+} else {
+  assert.equal(backMountain?.rotate, '45deg');
+}
+```
+
+You should give `.back-mountain` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
+```
+
+You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
+```
+
+You should give `.back-mountain` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
+```
+
+You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
new file mode 100644
index 0000000000..151831dbd7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
@@ -0,0 +1,104 @@
+---
+id: 6196d213d99f16287bff22ae
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`.
+
+# --hints--
+
+You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 5);
+```
+
+You should give the new `div` element a `class` of `sun`.
+
+```js
+assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun');
+```
+
+You should place the new `div` element immediately after the `.back-mountain` element.
+
+```js
+assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
new file mode 100644
index 0000000000..61cf99cfee
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
@@ -0,0 +1,112 @@
+---
+id: 6196d2c0f22ca0293107c048
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`.
+
+# --hints--
+
+You should use the `.sun` selector.
+
+```js
+assert.match(code, /\.sun\s*\{/);
+```
+
+You should give `.sun` a `width` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px');
+```
+
+You should give `.sun` a `height` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px');
+```
+
+You should give `.sun` a `background-color` of `yellow`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
new file mode 100644
index 0000000000..f924e1d525
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
@@ -0,0 +1,105 @@
+---
+id: 6196d32d1340d829f0f6f57d
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle.
+
+# --hints--
+
+You should give `.sun` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute');
+```
+
+You should give `.sun` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
new file mode 100644
index 0000000000..969618185d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
@@ -0,0 +1,107 @@
+---
+id: 6196d41d40bf9b2aaea5d520
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen.
+
+# --hints--
+
+You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px');
+```
+
+You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
new file mode 100644
index 0000000000..1253455f06
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
@@ -0,0 +1,118 @@
+---
+id: 6197cff995d03905b0cca8ad
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Your penguin will consist of two main sections: the head, and the body.
+
+Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`.
+
+# --hints--
+
+You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `penguin-head`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head');
+```
+
+You should give the second `div` a `class` of `penguin-body`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+--fcc-editable-region--
+    <div class="penguin">
+
+    </div>
+--fcc-editable-region--
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
new file mode 100644
index 0000000000..5256d40e7d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
@@ -0,0 +1,125 @@
+---
+id: 6197f40a16afea068c7e60c8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex);
+```
+
+You should give the `.penguin` element a `z-index` of `4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4');
+```
+
+You should give `.penguin` a `position` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position);
+```
+
+You should give `.penguin` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
new file mode 100644
index 0000000000..c34e5dc0b5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
@@ -0,0 +1,65 @@
+---
+id: 6197f667297bb30a552ce017
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`.
+
+# --hints--
+
+You should give `.ground` a `z-index` of `3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+You should give `.ground` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
new file mode 100644
index 0000000000..4f42960c10
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
@@ -0,0 +1,128 @@
+---
+id: 61993b72e874e709b8dfd666
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`.
+
+# --hints--
+
+You should use the `.penguin-head` selector.
+
+```js
+assert.match(code, /\.penguin-head\s*\{/);
+```
+
+You should give `.penguin-head` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%');
+```
+
+You should give `.penguin-head` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`.
+
+```js
+assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
new file mode 100644
index 0000000000..837b66e7b8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
@@ -0,0 +1,122 @@
+---
+id: 61993cf26a8e0f0a553db223
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+_Most_ penguins do not have a square head.
+
+Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`.
+
+# --hints--
+
+You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`.
+
+```js
+// Maybe check for individual border-radius properties?
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
new file mode 100644
index 0000000000..42992c942d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
@@ -0,0 +1,139 @@
+---
+id: 61993dbb35adf30b10d49e38
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.
+
+# --hints--
+
+You should use the `.penguin-body` selector.
+
+```js
+assert.match(code, /\.penguin-body\s*\{/);
+```
+
+You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
+```
+
+You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
+```
+
+You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
new file mode 100644
index 0000000000..1304f820e2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
@@ -0,0 +1,133 @@
+---
+id: 61993e9adc9e9a0bb4d28fff
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Another interesting fact about penguins is that they do not have square bodies.
+
+Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body.
+
+# --hints--
+
+You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
new file mode 100644
index 0000000000..177fa37ed7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
@@ -0,0 +1,139 @@
+---
+id: 6199409834ccaf0d10736596
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`.
+
+# --hints--
+
+You should use the `.penguin *` selector.
+
+```js
+assert.match(code, /\.penguin\s*\*\s*\{/);
+```
+
+You should give `.penguin *` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
new file mode 100644
index 0000000000..39d2becaa7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
@@ -0,0 +1,154 @@
+---
+id: 6199429802b7c10dc79ff871
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-head` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
+```
+
+You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
+```
+
+You should give `.penguin-head` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
+```
+
+You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
new file mode 100644
index 0000000000..06adbcbaed
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
@@ -0,0 +1,156 @@
+---
+id: 619943285a41720e6370d985
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top);
+```
+
+You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%');
+```
+
+You should give `.penguin-body` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left);
+```
+
+You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
new file mode 100644
index 0000000000..841e0fac70
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
@@ -0,0 +1,146 @@
+---
+id: 619943876b706d0f35c01dbc
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex);
+```
+
+You should give the `.penguin-head` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
new file mode 100644
index 0000000000..71620d485d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
@@ -0,0 +1,148 @@
+---
+id: 6199442866286d0ff421a4fc
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string.
+
+# --hints--
+
+You should use the `.penguin-body::before` selector.
+
+```js
+assert.match(code, /\.penguin-body::before\s*\{/);
+```
+
+You should give `.penguin-body::before` a `content` of `""`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
new file mode 100644
index 0000000000..95939a0a79
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
@@ -0,0 +1,145 @@
+---
+id: 619bcf239fc15905ecd66fce
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Position the pseudo-element relative to its closest positioned ancestor.
+
+# --hints--
+
+You should give `.penguin-body::before` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
new file mode 100644
index 0000000000..144a263043
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
@@ -0,0 +1,158 @@
+---
+id: 619be73b3c806006ccc00bb0
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`.
+
+# --hints--
+
+You should give `.penguin-body::before` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
+```
+
+You should give `.penguin-body::before` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%');
+```
+
+You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
new file mode 100644
index 0000000000..32e8d7967e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Position the pseudo-element `10%` from the top and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
new file mode 100644
index 0000000000..f22f0e3944
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
@@ -0,0 +1,160 @@
+---
+id: 619be80062551a080e32c821
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`.
+
+# --hints--
+
+You should use the `border-radius` property to round off the crest.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
+```
+
+You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
new file mode 100644
index 0000000000..1c9a12db86
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
@@ -0,0 +1,152 @@
+---
+id: 619be8ce4ea49008c5bfbc30
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Increase the pseudo-element's transparency by `30%`.
+
+# --hints--
+
+You should give `.penguin-body::before` an `opacity` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
new file mode 100644
index 0000000000..088e47ba55
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
@@ -0,0 +1,166 @@
+---
+id: 619be946958c6009844f1dee
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`.
+
+# --hints--
+
+You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
+```
+
+You should give the second `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
new file mode 100644
index 0000000000..e25cfd80ce
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
@@ -0,0 +1,193 @@
+---
+id: 619c155df0063a0a3fec0e32
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`.
+
+# --hints--
+
+You should use the `.face` selector.
+
+```js
+assert.match(code, /\.face\s*\{/);
+```
+
+You should give `.face` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
+```
+
+You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
+```
+
+You should give `.face` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
+```
+
+You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
+```
+
+You should give `.face` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
+```
+
+You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
new file mode 100644
index 0000000000..999faf2cd7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
@@ -0,0 +1,165 @@
+---
+id: 619c16debd0c270b01c5ce38
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`.
+
+# --hints--
+
+You should give `.face` a `border-radius` of `70% 70% 60% 60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
new file mode 100644
index 0000000000..1204286781
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
@@ -0,0 +1,169 @@
+---
+id: 619cfdf2e63ddf05feab86ad
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Position the `.face` elements so that they are `15%` from the top.
+
+# --hints--
+
+You should give `.face` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top);
+```
+
+You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
new file mode 100644
index 0000000000..3529e08289
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
@@ -0,0 +1,171 @@
+---
+id: 619d019488f98c06acbbb71a
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Currently, the two `.face` elements are on top of each other.
+
+Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element.
+
+# --hints--
+
+You should give a `class` of `left` to the first `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left');
+```
+
+You should give a `class` of `right` to the second `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
new file mode 100644
index 0000000000..cdb0268e02
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
@@ -0,0 +1,177 @@
+---
+id: 619d022dc8400c0763829a17
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Target the `.face` element with the `left` class, and position it `5%` left of its parent.
+
+# --hints--
+
+You should use the `.face.left` selector.
+
+```js
+assert.match(code, /\.face\.left\s*\{/);
+```
+
+You should give `.face.left` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left);
+```
+
+You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
new file mode 100644
index 0000000000..c81e359b35
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
@@ -0,0 +1,181 @@
+---
+id: 619d02c7bc95bf0827a5d296
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Target the `.face` element with the `right` class, and position it `5%` right of its parent.
+
+# --hints--
+
+You should use the `.face.right` selector.
+
+```js
+assert.match(code, /\.face\.right\s*\{/);
+```
+
+You should give `.face.right` a `right` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
+```
+
+You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+.face.left {
+  left: 5%;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
new file mode 100644
index 0000000000..7101cc6218
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
@@ -0,0 +1,184 @@
+---
+id: 619d033915012509031f309a
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Below the `.face.right` element, add a `div` element with a `class` of `chin`.
+
+# --hints--
+
+You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `chin`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.chin'));
+```
+
+You should place the `div` element below the `.face.right` element.
+
+```js
+assert.exists(document.querySelector('.face.right + .chin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
new file mode 100644
index 0000000000..8ff7447615
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
@@ -0,0 +1,210 @@
+---
+id: 619d03dadadb6509a16f4f5f
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`.
+
+# --hints--
+
+You should use the `.chin` selector.
+
+```js
+assert.match(code, /\.chin\s*\{/);
+```
+
+You should give `.chin` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width);
+```
+
+You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%');
+```
+
+You should give `.chin` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height);
+```
+
+You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%');
+```
+
+You should give `.chin` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor);
+```
+
+You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
new file mode 100644
index 0000000000..9177d13254
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
@@ -0,0 +1,206 @@
+---
+id: 619d0503e03a790a4179d463
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`.
+
+# --hints--
+
+You should give `.chin` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top);
+```
+
+You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%');
+```
+
+You should give `.chin` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left);
+```
+
+You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%');
+```
+
+You should give `.chin` a `border-radius` of `70% 70% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
new file mode 100644
index 0000000000..ca096090f1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
@@ -0,0 +1,197 @@
+---
+id: 619d05c54dabca0b10058235
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+So far, the `.face` and `.chin` elements have the same `background-color`.
+
+Create a custom CSS property called `--penguin-face`, and set it to `white`.
+
+# --hints--
+
+You should use the `:root` selector.
+
+```js
+assert.match(code, /:root\s*\{/);
+```
+
+You should give `:root` a `--penguin-face` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face'));
+```
+
+You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
new file mode 100644
index 0000000000..207c0664d1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
@@ -0,0 +1,197 @@
+---
+id: 619d0882f54bf40bdc4671ed
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Where relevant, replace property values with your `--penguin-face` variable.
+
+# --hints--
+
+You should give `.face` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should give `.chin` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should not use `var(--penguin-face)` in the `.penguin-body` selector.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
new file mode 100644
index 0000000000..a7caac10b5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
@@ -0,0 +1,222 @@
+---
+id: 619d090cd8d6db0c93dc5087
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5);
+```
+
+You should give the first new `div` a `class` of `eye`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye'));
+```
+
+You should give the second new `div` a `class` of `eye`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.right'));
+```
+
+You should place `div.eye.left` after `div.chin`.
+
+```js
+assert.exists(document.querySelector('.chin + .eye.left'));
+```
+
+You should place `div.eye.right` after `div.eye.left`.
+
+```js
+assert.exists(document.querySelector('.eye.left + .eye.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
new file mode 100644
index 0000000000..e2f3ce9e93
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
@@ -0,0 +1,207 @@
+---
+id: 619d0b51ca42ed0d74582186
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`.
+
+# --hints--
+
+You should use the `.eye` selector.
+
+```js
+assert.match(code, /\.eye\s*\{/);
+```
+
+You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%');
+```
+
+You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%');
+```
+
+You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
new file mode 100644
index 0000000000..a4e7d18c12
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
@@ -0,0 +1,200 @@
+---
+id: 619d0bc9cb05360e1bf549c3
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%');
+```
+
+You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
new file mode 100644
index 0000000000..b567a24805
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
@@ -0,0 +1,215 @@
+---
+id: 619d0c1594c38c0ebae75878
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent.
+
+# --hints--
+
+You should use the `.eye.left` selector.
+
+```js
+assert.match(code, /\.eye\.left\s*\{/);
+```
+
+You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%');
+```
+
+You should use the `.eye.right` selector.
+
+```js
+assert.match(code, /\.eye\.right\s*\{/);
+```
+
+You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
new file mode 100644
index 0000000000..2d324e7251
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
@@ -0,0 +1,225 @@
+---
+id: 619d0d18ca99870f884a7bff
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Within each `.eye` element, add a `div` with a `class` of `eye-lid`.
+
+# --hints--
+
+You should add one `div` element within `.eye.left`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
+```
+
+You should add one `div` element within `.eye.right`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
+```
+
+You should give the first new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.left > div.eye-lid'));
+```
+
+You should give the second new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.right > div.eye-lid'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+
+        </div>
+        <div class="eye right">
+
+        </div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
new file mode 100644
index 0000000000..224cfce88b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
@@ -0,0 +1,227 @@
+---
+id: 619d0daf214542102739b0da
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`.
+
+# --hints--
+
+You should use the `.eye-lid` selector.
+
+```js
+assert.match(code, /\.eye-lid\s*\{/);
+```
+
+You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%');
+```
+
+You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%');
+```
+
+You should give `.eye-lid` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
new file mode 100644
index 0000000000..e779df5c2d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
@@ -0,0 +1,226 @@
+---
+id: 619d0e56f9ca9710fcb974e3
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%');
+```
+
+You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%');
+```
+
+You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
new file mode 100644
index 0000000000..ed405abe92
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
@@ -0,0 +1,247 @@
+---
+id: 619d0eec0ac40611b41e2ccc
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7);
+```
+
+You should give the first new `div` a `class` of `blush`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush'));
+```
+
+You should give the second new `div` a `class` of `blush`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.right'));
+```
+
+You should place `.blush.right` after `.blush.left`.
+
+```js
+assert.exists(document.querySelector('.blush.left + .blush.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
new file mode 100644
index 0000000000..a346767374
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
@@ -0,0 +1,238 @@
+---
+id: 619d0fc9825c271253df28d4
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`.
+
+# --hints--
+
+You should use the `.blush` selector.
+
+```js
+assert.match(code, /\.blush\s*\{/);
+```
+
+You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%');
+```
+
+You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%');
+```
+
+You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
new file mode 100644
index 0000000000..78310b8e23
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
@@ -0,0 +1,231 @@
+---
+id: 619d102d786c3d13124c37c6
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%');
+```
+
+You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
new file mode 100644
index 0000000000..9431c4764e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
@@ -0,0 +1,246 @@
+---
+id: 619d107edf7ddf13cc77106a
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent.
+
+# --hints--
+
+You should use the `.blush.left` selector.
+
+```js
+assert.match(code, /\.blush\.left\s*\{/);
+```
+
+You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%');
+```
+
+You should use the `.blush.right` selector.
+
+```js
+assert.match(code, /\.blush\.right\s*\{/);
+```
+
+You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
new file mode 100644
index 0000000000..39348186b5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
@@ -0,0 +1,271 @@
+---
+id: 619d10cc98145f14820399c5
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9);
+```
+
+You should give the first new `div` a `class` of `beak`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak'));
+```
+
+You should give the second new `div` a `class` of `beak`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `top`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.top'));
+```
+
+You should give the second new `div` a `class` of `bottom`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.bottom'));
+```
+
+You should place `div.beak.top` after `div.blush.right`.
+
+```js
+assert.exists(document.querySelector('.blush.right + .beak.top'));
+```
+
+You should place `div.beak.bottom` after `div.beak.top`.
+
+```js
+assert.exists(document.querySelector('.beak.top + .beak.bottom'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
new file mode 100644
index 0000000000..ea381856af
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
@@ -0,0 +1,256 @@
+---
+id: 619d115e2adcd71538e82ebb
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should use the `.beak` selector.
+
+```js
+assert.match(code, /\.beak\s*\{/);
+```
+
+You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%');
+```
+
+You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange');
+```
+
+You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
new file mode 100644
index 0000000000..d1617d8dce
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
@@ -0,0 +1,262 @@
+---
+id: 619d11e6d5ef9515d2a16033
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent.
+
+# --hints--
+
+You should use the `.beak.top` selector.
+
+```js
+assert.match(code, /\.beak\.top\s*\{/);
+```
+
+You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%');
+```
+
+You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%');
+```
+
+You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
new file mode 100644
index 0000000000..e580633578
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
@@ -0,0 +1,267 @@
+---
+id: 619d129a417d0716a94de913
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`.
+
+# --hints--
+
+You should use the `.beak.bottom` selector.
+
+```js
+assert.match(code, /\.beak\.bottom\s*\{/);
+```
+
+You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%');
+```
+
+You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%');
+```
+
+You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
new file mode 100644
index 0000000000..4773a10cef
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
@@ -0,0 +1,267 @@
+---
+id: 619d1340361095175f4b5115
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element.
+
+# --hints--
+
+You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
+```
+
+You should give the new `div` a `class` of `shirt`.
+
+```js
+assert.exists(document.querySelector('.penguin > div.shirt'));
+```
+
+You should place the new `div` before `.penguin-body`.
+
+```js
+assert.exists(document.querySelector('.shirt + .penguin-body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
new file mode 100644
index 0000000000..ff117fcdd8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
@@ -0,0 +1,263 @@
+---
+id: 619d15797b580c1828b05426
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Within the `.shirt` element, add a `div` with the following emoji as content: 💜
+
+# --hints--
+
+You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
+```
+
+You should give the new `div` a content of `💜`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > div')?.textContent, '💜');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
new file mode 100644
index 0000000000..b0330c317b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
@@ -0,0 +1,264 @@
+---
+id: 619d15d955d9d418c4487bbc
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS`
+
+# --hints--
+
+You should add one `p` element within `.shirt`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > p')?.length, 1);
+```
+
+You should give the `p` element the content `I CSS`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+        <div>💜</div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
new file mode 100644
index 0000000000..2ca7d6a5d8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
@@ -0,0 +1,278 @@
+---
+id: 619d1629a8adc61960ca8b40
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`.
+
+# --hints--
+
+You should use the `.shirt` selector.
+
+```js
+assert.match(code, /\.shirt\s*\{/);
+```
+
+You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px');
+```
+
+You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif');
+```
+
+You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
new file mode 100644
index 0000000000..c21bb0f24d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
@@ -0,0 +1,272 @@
+---
+id: 619d1c5fc9f8941a400955da
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+In some browsers, the _heart_ emoji may look slightly different from the previous step. This is because some of the character's properties were overridden by the `font-weight` style of `bold`.
+
+Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value.
+
+# --hints--
+
+You should use the `.shirt div` selector to target the `div` with the heart emoji.
+
+```js
+assert.match(code, /\.shirt div\s*\{/);
+```
+
+You should give the `.shirt div` a `font-weight` of `initial` or `normal`.
+
+```js
+assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
new file mode 100644
index 0000000000..79b1e394fb
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
@@ -0,0 +1,273 @@
+---
+id: 619d1dab9ff3421ae1976991
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent.
+
+# --hints--
+
+You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px');
+```
+
+You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+.shirt div {
+  font-weight: initial;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
new file mode 100644
index 0000000000..0c23ce14f1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
@@ -0,0 +1,281 @@
+---
+id: 619d1deb8b04811b8839ffe4
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element.
+
+# --hints--
+
+You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px');
+```
+
+You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px');
+```
+
+You should give the `.shirt` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
new file mode 100644
index 0000000000..e650139f7e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
@@ -0,0 +1,272 @@
+---
+id: 619d1e7a8e81a61c5a819dc4
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+For the shirt's final touch, set the `color` to `#6a6969`.
+
+# --hints--
+
+You should give `.shirt` a `color` of `#6a6969`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
new file mode 100644
index 0000000000..a3dc1fdbf5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
@@ -0,0 +1,306 @@
+---
+id: 619d1ed33c9a071cf657a0d6
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Fun fact: Penguins cannot stand without at least two feet.
+
+Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `foot`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot'));
+```
+
+You should give the second new `div` a `class` of `foot`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.right'));
+```
+
+You should place `.foot.right` after `.foot.left`.
+
+```js
+assert.exists(document.querySelector('.foot.left + .foot.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
new file mode 100644
index 0000000000..f685b84cb6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
@@ -0,0 +1,295 @@
+---
+id: 619d1fb5d244c31db8a7fdb7
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`.
+
+# --hints--
+
+You should use the `.foot` selector.
+
+```js
+assert.match(code, /\.foot\s*\{/);
+```
+
+You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%');
+```
+
+You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%');
+```
+
+You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
new file mode 100644
index 0000000000..e26cf4e13a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
@@ -0,0 +1,288 @@
+---
+id: 619d204bd73ae51e743b8e94
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%');
+```
+
+You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
new file mode 100644
index 0000000000..b4d5cd859d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
@@ -0,0 +1,304 @@
+---
+id: 619d20b12996101f430920fb
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+The penguin's beak and feet share the same `color`.
+
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-picorna` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna'));
+```
+
+You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange');
+```
+
+You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+  top: 85%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
new file mode 100644
index 0000000000..d2083801b8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
@@ -0,0 +1,304 @@
+---
+id: 619d21fe6a3f9b2016be9d9d
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent.
+
+# --hints--
+
+You should use the `.foot.left` selector.
+
+```js
+assert.match(code, /\.foot\.left\s*\{/);
+```
+
+You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%');
+```
+
+You should use the `.foot.right` selector.
+
+```js
+assert.match(code, /\.foot\.right\s*\{/);
+```
+
+You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
new file mode 100644
index 0000000000..003b9709c0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
@@ -0,0 +1,312 @@
+---
+id: 619d229b0e542520cd91c685
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`.
+
+# --hints--
+
+You should give `.foot.left` a `transform` of `rotate(80deg)`.
+
+```js
+const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left');
+
+if (leftFoot?.transform) {
+  assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)');
+} else {
+  assert.equal(leftFoot.getPropVal('rotate', true), '80deg');
+}
+```
+
+You should give `.foot.right` a `transform` of `rotate(-80deg)`.
+
+```js
+const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right');
+
+if (rightFoot?.transform) {
+  assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)');
+} else {
+  assert.equal(rightFoot.getPropVal('rotate', true), '-80deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.foot.left {
+  left: 25%;
+
+}
+
+.foot.right {
+  right: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
new file mode 100644
index 0000000000..ef45038dbc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
@@ -0,0 +1,295 @@
+---
+id: 619d23089e787e216a7043d6
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element.
+
+# --hints--
+
+You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
new file mode 100644
index 0000000000..906076ce8b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
@@ -0,0 +1,328 @@
+---
+id: 619d237a107c10221ed743fa
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Fun fact: Penguins cannot fly without wings.
+
+Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4);
+```
+
+You should give the first new `div` a `class` of `arm`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm'));
+```
+
+You should give the second new `div` a `class` of `arm`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.right'));
+```
+
+You should place `.arm.right` after `.arm.left`.
+
+```js
+assert.exists(document.querySelector('.arm.left + .arm.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
new file mode 100644
index 0000000000..94dcb78521
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
@@ -0,0 +1,317 @@
+---
+id: 619d26b12e651022d80cd017
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`.
+
+# --hints--
+
+You should use the `.arm` selector.
+
+```js
+assert.match(code, /\.arm\s*\{/);
+```
+
+You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%');
+```
+
+You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
+
+```js
+assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
new file mode 100644
index 0000000000..a3333bcfba
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
@@ -0,0 +1,332 @@
+---
+id: 619d2712853306238f41828e
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-skin` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin'));
+```
+
+You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))');
+```
+
+You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    gray,
+    rgb(209, 210, 199)
+  );
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
new file mode 100644
index 0000000000..b897e4cc61
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
@@ -0,0 +1,340 @@
+---
+id: 619d2b7a84e78b246f2d17a2
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent.
+
+# --hints--
+
+You should use the `.arm.left` selector.
+
+```js
+assert.match(code, /\.arm\.left\s*\{/);
+```
+
+You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%');
+```
+
+You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%');
+```
+
+You should use the `.arm.right` selector.
+
+```js
+assert.match(code, /\.arm\.right\s*\{/);
+```
+
+You should give `.arm.right` a `top` of `0%`.
+
+```js
+assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top);
+```
+
+You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
new file mode 100644
index 0000000000..a677c9a443
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
@@ -0,0 +1,325 @@
+---
+id: 619d2bd9c1d43c2526e96f1f
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent.
+
+# --hints--
+
+You should use the `transform-origin` property to do this.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`.
+
+```js
+assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
new file mode 100644
index 0000000000..ce148c7f62
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
@@ -0,0 +1,326 @@
+---
+id: 619d2d4e80400325ff89664a
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis.
+
+# --hints--
+
+You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left');
+
+if (leftArm?.rotate && leftArm?.transform) {
+  assert.equal(leftArm.getPropVal('rotate', true), '130deg');
+  assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)');
+} else {
+  assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
new file mode 100644
index 0000000000..7b8d308ed3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
@@ -0,0 +1,326 @@
+---
+id: 619d2ebc81ba81271460850d
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+Rotate the right arm by `45deg` counterclockwise.
+
+# --hints--
+
+You should give `.arm.right` a `transform` of `rotate(-45deg)`.
+
+```js
+const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right');
+
+if (rightArm?.transform) {
+  assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)');
+} else {
+  assert.equal(rightArm?.getPropVal('rotate', true), '-45deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+--fcc-editable-region--
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
new file mode 100644
index 0000000000..cb6dc37d62
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
@@ -0,0 +1,327 @@
+---
+id: 619d2f0e9440bc27caee1cec
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Fun fact: Most, if not all, flippers are not naturally rectangles.
+
+Give the `.arm` elements' top-left, top-right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`.
+
+# --hints--
+
+You should give `.arm` a `border-radius` of `30% 30% 30% 120%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
new file mode 100644
index 0000000000..81854db2b7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
@@ -0,0 +1,323 @@
+---
+id: 619d2fd3ff4f772882e3d998
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element.
+
+# --hints--
+
+You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
new file mode 100644
index 0000000000..f11d2a97f4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
@@ -0,0 +1,333 @@
+---
+id: 619d30350883802921bfcccc
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Now, you are going to use CSS animations to make the penguin wave.
+
+Define a new `@keyframes` named `wave`.
+
+# --hints--
+
+You should define a new `@keyframes` rule.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes'));
+```
+
+You should give the `@keyframes` rule a name of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
new file mode 100644
index 0000000000..3294c31569
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
@@ -0,0 +1,351 @@
+---
+id: 619d324f5915c929f36ae91d
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Give `wave` four waypoints starting at `10%`, and incrementing by `10%`.
+
+# --hints--
+
+You should add a `10%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
+```
+
+You should add a `20%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
+```
+
+You should add a `30%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
+```
+
+You should add a `40%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
+```
+
+You should have 4 waypoints in your keyframe.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
new file mode 100644
index 0000000000..74235426b5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
@@ -0,0 +1,347 @@
+---
+id: 619d32c7fa21f32aaa91d499
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%');
+const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, '');
+const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
new file mode 100644
index 0000000000..ac97b33ea2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
@@ -0,0 +1,347 @@
+---
+id: 619d333b738e3c2b5d58b095
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%');
+const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
new file mode 100644
index 0000000000..fd1c9193d0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
@@ -0,0 +1,362 @@
+---
+id: 619d337765b9f02c10e93722
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+For the third and fourth waypoints, repeat the `transform` pattern once more.
+
+# --hints--
+
+You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%');
+const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%');
+const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
new file mode 100644
index 0000000000..caa7a1fe0a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
@@ -0,0 +1,357 @@
+---
+id: 619d33c51140292cc5a21742
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function.
+
+# --hints--
+
+You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave');
+```
+
+You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s');
+```
+
+You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite');
+```
+
+You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
new file mode 100644
index 0000000000..e8ab0952d4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
@@ -0,0 +1,347 @@
+---
+id: 619d3482f505452d861d0f62
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions.
+
+# --hints--
+
+You should use the `.penguin:active` selector.
+
+```js
+assert.match(code, /\.penguin:active\s*\{/);
+```
+
+You should give `.penguin:active` a `transform` of `scale(1.5)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
new file mode 100644
index 0000000000..3530454295
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
@@ -0,0 +1,346 @@
+---
+id: 619d3561a951bf2e41a24f10
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+When you activate the `.penguin` element, it might look as though you can drag it around. This is not true.
+
+Indicate this to users, by giving the active element a `cursor` property of `not-allowed`.
+
+# --hints--
+
+You should give `.penguin:active` a `cursor` property of `not-allowed`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin:active {
+  transform: scale(1.5);
+
+}
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
new file mode 100644
index 0000000000..b2fd620c1f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
@@ -0,0 +1,357 @@
+---
+id: 619d36103839c82efa95dd34
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`.
+
+# --hints--
+
+You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s');
+```
+
+You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out');
+```
+
+You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+
+}
+--fcc-editable-region--
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
new file mode 100644
index 0000000000..18d3c26b52
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
@@ -0,0 +1,670 @@
+---
+id: 619d3711d04d623000013e9e
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element.
+
+Congratulations! You have completed the Flappy Penguin Workshop.
+
+# --hints--
+
+You should give `.ground` a `height` of `calc(100vh - 300px)`.
+
+```js
+assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: calc(100vh - 300px);
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
new file mode 100644
index 0000000000..9d306c557a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Normalize your page, by setting the `width` to `100%`, and `height` to `100vh`.
+
+# --hints--
+
+You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
index 56f5f373e1..e6029b2717 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
@@ -9,7 +9,7 @@ dashedName: step-3
 
 The `p` element is used to create a paragraph of text on websites. Create a `p` element below your `h2` element and give it the following text:
 
-`See more cat photos in our gallery.`
+`Everyone loves cute cats online!`
 
 # --hints--
 
@@ -25,13 +25,13 @@ assert(document.querySelector('p'));
 assert(code.match(/<\/p\>/));
 ```
 
-Your `p` element's text should be `See more cat photos in our gallery.` You have either omitted the text or have a typo.
+Your `p` element's text should be `Everyone loves cute cats online!` You have either omitted the text or have a typo.
 
 ```js
 const extraSpacesRemoved = document
   .querySelector('p')
   .innerText.replace(/\s+/g, ' ');
-assert(extraSpacesRemoved.match(/see more cat photos in our gallery\.?$/i));
+assert.match(extraSpacesRemoved, /everyone loves cute cats online!$/i);
 ```
 
 你的 `p` 元素应该在 `h2` 元素的下方。 你把顺序写错了。
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
index b9f1308d74..87923f8375 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
@@ -49,12 +49,9 @@ assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/i));
 Your comment should be above the `p` element. 你把顺序写错了。
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
-    )
+assert.match(
+  code.replace(/\s/g, ''),
+  /<!--todo:addlinktocatphotos--><p>everyonelovescutecatsonline!<\/p>/i
 );
 ```
 
@@ -69,7 +66,7 @@ assert(
     <h2>Cat Photos</h2>
 --fcc-editable-region--
 
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
index df5725ea5b..238edca5be 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -55,10 +55,8 @@ Your `main` element's closing tag should be below the `p` element. 你的顺序
 ```js
 const mainNode = document.querySelector('main');
 const pNode = document.querySelector('p');
-assert(
-  mainNode.contains(pNode) &&
-    pNode.textContent.toLowerCase().match(/see more cat photos in our gallery/)
-);
+assert.isTrue(mainNode.contains(pNode));
+assert.match(pNode.textContent.toLowerCase(), /everyone loves cute cats online!/);
 ```
 
 # --seed--
@@ -73,7 +71,7 @@ assert(
     <h1>CatPhotoApp</h1>
     <h2>Cat Photos</h2>
     <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 31d3839a90..486d08ef15 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -74,14 +74,14 @@ Your code should have a `p` element. You have removed the `p` element from an ea
 assert(document.querySelector('p'));
 ```
 
-The text of the `p` element should be `See more cat photos in our gallery.` Do not change the text, spacing, or punctuation of the `p` element.
+The text of the `p` element should be `Everyone loves cute cats online!` Do not change the text, spacing, or punctuation of the `p` element.
 
 ```js
-assert(
+assert.match(
   document
     .querySelector('p')
-    .innerText.toLowerCase()
-    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
+    .innerText.toLowerCase(),
+    /everyone\s+loves\s+cute\s+cats\s+online!$/
 );
 ```
 
@@ -98,12 +98,12 @@ assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
     </main>
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 22914e7edf..dbb33828bd 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -52,7 +52,7 @@ assert(collection.indexOf('P') < collection.indexOf('IMG'));
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
     </main>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
index a5b811e77e..a5608a321d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
@@ -36,19 +36,19 @@ assert(document.querySelector('img').src);
 你的 `img` 元素的 `src` 属性应设置为 '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'。 你可能忽略了 URL 或者有拼写错误。 URL 的大小写很重要。
 
 ```js
-assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
+assert.strictEqual(document.querySelector('img').src, 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
 ```
 
 尽管你已将 `img` 元素的 `src` 设置为正确的 URL，但建议始终用引号将属性的值括起来。
 
 ```js
-assert(!/\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/);
 ```
 
 你的 `img` 元素应该以 `>` 或 `/>` 结束。
 
 ```js
-assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\1\s*\/?>/.test(code));
+assert.match(code, /<img\s+src\s*=\s*("|')\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\s*\1\s*\/?>/);
 ```
 
 # --seed--
@@ -62,7 +62,7 @@ assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img>
 --fcc-editable-region--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
index 9ba2b773c3..06867ea87d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
@@ -54,7 +54,7 @@ assert(altText.match(/A cute orange cat lying on its back\.?$/i));
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
 --fcc-editable-region--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index 7e58aa5030..ba4b5dec08 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -75,7 +75,7 @@ assert(
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index 0252c447d6..a7fa69a077 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -15,7 +15,7 @@ A link's text must be placed between the opening and closing tags of an anchor (
 <a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>
 ```
 
-Add the anchor text `link to cat pictures` to the anchor element. This will become the link's text.
+Add the anchor text `cat photos` to the anchor element. This will become the link's text.
 
 # --hints--
 
@@ -31,12 +31,12 @@ assert(document.querySelector('a'));
 assert(code.match(/<\/a\>/));
 ```
 
-Your anchor (`a`) element's text should be `link to cat pictures`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag.
+Your anchor (`a`) element's text should be `cat photos`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag.
 
 ```js
-assert(
-  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
-    'link to cat pictures'
+assert.strictEqual(
+  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' '),
+    'cat photos'
 );
 ```
 
@@ -51,7 +51,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <a href="https://freecatphotoapp.com"></a>
 --fcc-editable-region--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
index 8e50ec3faf..4a0e5a498b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa2407b521be39a3de7be1
-title: 第 14 步
+title: Step 15
 challengeType: 0
-dashedName: step-14
+dashedName: step-15
 ---
 
 # --description--
@@ -25,22 +25,20 @@ Your `p` element should have a nested anchor (`a`) element with the text `cat ph
 
 ```js
 const anchor = document.querySelectorAll('p > a');
-assert(
-  anchor.length &&
-    anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+assert.isNotEmpty(anchor);
+assert.strictEqual(anchor[1]?.innerText?.toLowerCase().replace(/\s+/g, ' '), 'cat photos')
 ```
 
 Your anchor (`a`) element does not have a `target` attribute. 请检查在开始标签的名称后面要有一个空格，且/或所有的属性名称前面也要有一个空格。
 
 ```js
-assert(document.querySelector('a').hasAttribute('target'));
+assert.isTrue(document.querySelectorAll('a')[1]?.hasAttribute('target'));
 ```
 
 The value of the `target` attribute should be `_blank`. 你可能落下了这个值或者有拼写错误。 所有属性的值都应该放在引号中。
 
 ```js
-assert(document.querySelector('a').getAttribute('target') === '_blank');
+assert.strictEqual(document.querySelectorAll('a')[1]?.getAttribute('target'), '_blank');
 ```
 
 # --seed--
@@ -54,6 +52,7 @@ assert(document.querySelector('a').getAttribute('target') === '_blank');
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
 --fcc-editable-region--
       <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
index ea5e494971..c83ad83cbd 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa30b9eacea3f48c6300ad
-title: Step 15
+title: Step 17
 challengeType: 0
-dashedName: step-15
+dashedName: step-17
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert(document.querySelectorAll('a').length >= 2);
 You are missing a closing (`a`) tag after the image.
 
 ```js
-assert(document.querySelectorAll('a').length === 2);
+assert.lengthOf(document.querySelectorAll('a'), 3);
 ```
 
 Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
@@ -52,7 +52,7 @@ assert(code.match(/<\/a>/g).length >= 2);
 You should only add one closing anchor (`a`) tag. Please remove any extras.
 
 ```js
-assert(code.match(/<\/a>/g).length === 2);
+assert.lengthOf(code.match(/<\/a>/g), 3);
 ```
 
 Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
@@ -86,7 +86,7 @@ assert(document.querySelector('img').parentNode.nodeName === 'A');
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
index 99cab1c398..c01ffd4744 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa3589eacea3f48c6300ae
-title: 步骤 18
+title: Step 20
 challengeType: 0
-dashedName: step-18
+dashedName: step-20
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
index bed167003a..c6f7932202 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa371beacea3f48c6300af
-title: 步骤 19
+title: Step 21
 challengeType: 0
-dashedName: step-19
+dashedName: step-21
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index f5b5cf76f7..b390a2e18e 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa37b9eacea3f48c6300b0
-title: 步骤 20
+title: Step 22
 challengeType: 0
-dashedName: step-20
+dashedName: step-22
 ---
 
 # --description--
@@ -43,7 +43,7 @@ assert.equal(secondSectionLastElemNode?.nodeName , 'UL');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
index e7ea2868dc..6f43462ee0 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb5ecbeacea3f48c6300b1
-title: 步骤21
+title: Step 23
 challengeType: 0
-dashedName: step-21
+dashedName: step-23
 ---
 
 # --description--
@@ -63,7 +63,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
index 75a633876c..c550c53986 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6250eacea3f48c6300b2
-title: 步骤 22
+title: Step 24
 challengeType: 0
-dashedName: step-22
+dashedName: step-24
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert.isTrue(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curricu
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
index f45a52b1ac..22210dc625 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb655eeacea3f48c6300b3
-title: 步骤-23
+title: Step 25
 challengeType: 0
-dashedName: step-23
+dashedName: step-25
 ---
 
 # --description--
@@ -34,11 +34,7 @@ assert.equal(document.querySelectorAll('section')?.[1]?.lastElementChild?.nodeNa
 Lasagna `img` 元素应该嵌套在 `figure` 元素中。
 
 ```js
-assert(
-  document.querySelector('figure > img') &&
-    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
-      'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
-);
+assert.strictEqual(document.querySelector('figure > img')?.src.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg');
 ```
 
 # --seed--
@@ -52,7 +48,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
index 8245fc4bee..25b5ac514d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6a35eacea3f48c6300b4
-title: 步骤 24
+title: Step 26
 challengeType: 0
-dashedName: step-24
+dashedName: step-26
 ---
 
 # --description--
@@ -82,7 +82,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
index 48c90048d9..a63ddef069 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d0
-title: 步骤 25
+title: Step 27
 challengeType: 0
-dashedName: step-25
+dashedName: step-27
 ---
 
 # --description--
@@ -61,7 +61,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
index 6df54be4b7..24c2d592f5 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d1
-title: 步骤 26
+title: Step 28
 challengeType: 0
-dashedName: step-26
+dashedName: step-28
 ---
 
 # --description--
@@ -55,7 +55,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
index 3a53f145b4..682eb9fee1 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d2
-title: 步骤 27
+title: Step 29
 challengeType: 0
-dashedName: step-27
+dashedName: step-29
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert([...document.querySelectorAll('ol')].length == 1);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
index 5b9bc0c500..bca94940e4 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d3
-title: 第 28 步
+title: Step 30
 challengeType: 0
-dashedName: step-28
+dashedName: step-30
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert.equal(document.querySelectorAll('main > section')?.[1]?.lastElementChild?
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
index 63d43e6935..e5bfb526dc 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d4
-title: 步骤 32
+title: Step 34
 challengeType: 0
-dashedName: step-32
+dashedName: step-34
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
index 8500d4c6da..d8e08a8939 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d5
-title: 步骤 34
+title: Step 36
 challengeType: 0
-dashedName: step-34
+dashedName: step-36
 ---
 
 # --description--
@@ -67,7 +67,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
index fcbd95f058..acf59f067d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d6
-title: 步骤 35
+title: Step 37
 challengeType: 0
-dashedName: step-35
+dashedName: step-37
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
index 05ca028267..02fb58d2e3 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d7
-title: 步骤 36
+title: Step 38
 challengeType: 0
-dashedName: step-36
+dashedName: step-38
 ---
 
 # --description--
@@ -83,7 +83,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
index e0fc9f068a..a8a5f7d8d2 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d8
-title: 步骤 37
+title: Step 39
 challengeType: 0
-dashedName: step-37
+dashedName: step-39
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.isTrue(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
index 5bfaa97405..cd617cecca 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d9
-title: 步骤 40
+title: Step 42
 challengeType: 0
-dashedName: step-40
+dashedName: step-42
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
index b14e1fd7d1..ddba7b4f34 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804da
-title: 步骤 42
+title: Step 44
 challengeType: 0
-dashedName: step-42
+dashedName: step-44
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
index 8f0c839c00..98cc2019fa 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804db
-title: 步骤 41
+title: Step 43
 challengeType: 0
-dashedName: step-41
+dashedName: step-43
 ---
 
 # --description--
@@ -49,7 +49,7 @@ assert.strictEqual(document.querySelector('input')?.getAttribute('required'), ''
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
index c1ca5bd641..e21bcf8953 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dc
-title: 步骤 44
+title: Step 46
 challengeType: 0
-dashedName: step-44
+dashedName: step-46
 ---
 
 # --description--
@@ -107,7 +107,7 @@ assert.match(radioInputElem?.nextSibling?.nodeValue?.replace(/\s+/g, ' '), /\s*I
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
index ce946d3276..d532a4a90b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dd
-title: 步骤 45
+title: Step 47
 challengeType: 0
-dashedName: step-45
+dashedName: step-47
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
index debc68a29a..9754879715 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804de
-title: 步骤 48
+title: Step 50
 challengeType: 0
-dashedName: step-48
+dashedName: step-50
 ---
 
 # --description--
@@ -68,9 +68,10 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
index 148a6e9146..3bfacaa38a 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804df
-title: 步骤46
+title: Step 48
 challengeType: 0
-dashedName: step-46
+dashedName: step-48
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert.match(document.querySelector('input')?.id, /^indoor$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
index 7d8f105538..6e27b0f9c8 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e1
-title: 步骤 50
+title: Step 52
 challengeType: 0
-dashedName: step-50
+dashedName: step-52
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
index dba4870bcd..8b0f47face 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e2
-title: 第 54 步
+title: Step 56
 challengeType: 0
-dashedName: step-54
+dashedName: step-56
 ---
 
 # --description--
@@ -76,7 +76,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
index 28b1282891..9f34a90f88 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e3
-title: 步骤 58
+title: Step 60
 challengeType: 0
-dashedName: step-58
+dashedName: step-60
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
index f9c2712013..595eb2c009 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e5
-title: 步骤 61
+title: Step 63
 challengeType: 0
-dashedName: step-61
+dashedName: step-63
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.isFalse(document.querySelectorAll('input[type="checkbox"]')?.[2]?.hasAttr
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
index ab0fc8617a..3f6bccf934 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e7
-title: 步骤 62
+title: Step 64
 challengeType: 0
-dashedName: step-62
+dashedName: step-64
 ---
 
 # --description--
@@ -48,7 +48,7 @@ assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
index 286c600157..58766284d9 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e8
-title: 步骤 63
+title: Step 65
 challengeType: 0
-dashedName: step-63
+dashedName: step-65
 ---
 
 # --description--
@@ -23,11 +23,11 @@ assert(document.querySelector('footer') && code.match(/<\/footer>/));
 assert(document.querySelector('footer > p'));
 ```
 
-你的 `footer` 元素应该有一个结束标签。 结束标签在 `<` 字符后面要有一个 `/`。
+Your `p` element should have a closing tag. 结束标签在 `<` 字符后面要有一个 `/`。
 
 ```js
 const pElemClosingTags = code.match(/<\/p\>/g);
-assert(pElemClosingTags && pElemClosingTags.length === 2);
+assert.lengthOf(pElemClosingTags, 3);
 ```
 
 你的 `p` 元素的文本应该是 `No Copyright - freeCodeCamp.org`。 你可能忽略了文本，或者有拼写错误，或没有把它放在 `p` 元素的开始和结束标签之间。
@@ -48,7 +48,7 @@ assert.match(extraSpacesRemoved, /No Copyright - freeCodeCamp\.org$/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
index f7007b3013..5cceb815b0 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e9
-title: 步骤 64
+title: Step 66
 challengeType: 0
-dashedName: step-64
+dashedName: step-66
 ---
 
 # --description--
@@ -21,7 +21,7 @@ assert(document.querySelectorAll('footer > p > a').length);
 
 ```js
 const aElemClosingTags = code.match(/<\/a\>/g);
-assert(aElemClosingTags && aElemClosingTags.length === 3);
+assert.lengthOf(aElemClosingTags, 4);
 ```
 
 你的锚元素（`a`）应该有一个 `href` 属性，其值为 `https://www.freecodecamp.org`。 你可能忽略了属性/值，或者有拼写错误。
@@ -59,7 +59,7 @@ assert.match(pText, /^no copyright - freecodecamp.org$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
index b60b2f69c0..41e61eccbb 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ea
-title: 步骤 65
+title: Step 67
 challengeType: 0
-dashedName: step-65
+dashedName: step-67
 ---
 
 # --description--
@@ -54,7 +54,7 @@ assert(noSpaces.match(/\<\/head\>\<body\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
index 64aac8ce1f..917032843f 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804eb
-title: 第 66 步
+title: Step 68
 challengeType: 0
-dashedName: step-66
+dashedName: step-68
 ---
 
 # --description--
@@ -56,7 +56,7 @@ assert(document.title && document.title.toLowerCase() === 'catphotoapp');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
index 055e3042c5..946ef881e0 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ec
-title: 步骤 67
+title: Step 69
 challengeType: 0
-dashedName: step-67
+dashedName: step-69
 ---
 
 # --description--
@@ -44,7 +44,7 @@ assert(extraSpacesRemoved.match(/\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
index 5704209aab..270b4c92f9 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ee
-title: 步骤 68
+title: Step 70
 challengeType: 0
-dashedName: step-68
+dashedName: step-70
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\<html/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
index ed7a581495..25fba06ab8 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
@@ -1,8 +1,8 @@
 ---
 id: 5efada803cbd2bbdab94e332
-title: 步骤 29
+title: Step 31
 challengeType: 0
-dashedName: step-29
+dashedName: step-31
 ---
 
 # --description--
@@ -42,16 +42,15 @@ assert(
 
 ```js
 const catsImg = document.querySelectorAll('figure > img')[1];
-assert(
-  catsImg &&
-    catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
+assert.strictEqual(
+  catsImg?.src?.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
 );
 ```
 
 尽管你已将新图像的 `src` 设置为正确的 URL，但建议始终将属性值放在引号中。
 
 ```js
-assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/);
 ```
 
 # --seed--
@@ -65,7 +64,7 @@ assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/ca
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
index 9352893d10..37d3db259d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae0543cbd2bbdab94e333
-title: 第 30 步
+title: Step 32
 challengeType: 0
-dashedName: step-30
+dashedName: step-32
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
index 8c986cdc73..4c5aa5e211 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae16e3cbd2bbdab94e334
-title: 步骤 31
+title: Step 33
 challengeType: 0
-dashedName: step-31
+dashedName: step-33
 ---
 
 # --description--
@@ -88,7 +88,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
index 9f7cc13023..36115e9918 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb23e70dc218d6c85f89b1
-title: 步骤 38
+title: Step 40
 challengeType: 0
-dashedName: step-38
+dashedName: step-40
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(!/\<input\s+type\s*=\s*text/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
index d679738734..340119e6c8 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb2c990dc218d6c85f89b2
-title: 第 43 步
+title: Step 45
 challengeType: 0
-dashedName: step-43
+dashedName: step-45
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
index 589ba22835..e99b36456e 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc4f528d6a74d05e68af74
-title: 步骤 56
+title: Step 58
 challengeType: 0
-dashedName: step-56
+dashedName: step-58
 ---
 
 # --description--
@@ -110,7 +110,7 @@ assert.match(code, />\s+<label\s+for\s*=\s*('|")loving/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
index a599ba1059..9c771a8966 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc518e8d6a74d05e68af75
-title: 步骤 57
+title: Step 59
 challengeType: 0
-dashedName: step-57
+dashedName: step-59
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
index e46ce8392c..39f87ddd5d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc54138d6a74d05e68af76
-title: 步骤 55
+title: Step 57
 challengeType: 0
-dashedName: step-55
+dashedName: step-57
 ---
 
 # --description--
@@ -34,7 +34,7 @@ assert.match(document.querySelector('input[type="checkbox"]')?.id, /^loving$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
index a265c0b099..c2303011e7 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc575c8d6a74d05e68af77
-title: 步骤 59
+title: Step 61
 challengeType: 0
-dashedName: step-59
+dashedName: step-61
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
index 50a78e97c4..e08271ac13 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5f05a1d8e233dff4a68508d8
-title: 步骤 47
+title: Step 49
 challengeType: 0
-dashedName: step-47
+dashedName: step-49
 ---
 
 # --description--
@@ -92,7 +92,7 @@ assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
index 39ac051780..2a9380b11e 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07be6ef7412fbad0c5626b
-title: 步骤 16
+title: Step 18
 challengeType: 0
-dashedName: step-16
+dashedName: step-18
 ---
 
 # --description--
@@ -40,14 +40,14 @@ The entire `section` element should be between the opening and closing tags of t
 assert(document.querySelector('section').parentNode.nodeName === 'MAIN');
 ```
 
-The existing `h2`, comment, `p` element, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
+The existing `h2`, comment, two `p` elements, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
 
 ```js
 const childrenOfSection = [...document.querySelector('section').childNodes];
 const foundElements = childrenOfSection.filter((child) => {
   return ['H2', 'A', 'P'].includes(child.nodeName);
 });
-assert(foundElements.length === 3);
+assert.lengthOf(foundElements, 4);
 ```
 
 The `h1` element should not be nested in the `section` element.
@@ -65,12 +65,12 @@ assert.isFalse(includesH1);
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
 
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
       <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
index b4dcef0bc6..b254d42d67 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07c98cdb9413cbd4b16750
-title: Step 17
+title: Step 19
 challengeType: 0
-dashedName: step-17
+dashedName: step-19
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(foundElems.length === 2);
 --fcc-editable-region--
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
index 6f9c293e84..c2a695c4af 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07fb1579dc934717801375
-title: 步骤 33
+title: Step 35
 challengeType: 0
-dashedName: step-33
+dashedName: step-35
 ---
 
 # --description--
@@ -62,7 +62,7 @@ assert.lengthOf(document.querySelectorAll('main > section')?.[2]?.children, 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
index 37adcf0b5a..20e81d9454 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d48e7b435f13ab6550051
-title: 步骤 51
+title: Step 53
 challengeType: 0
-dashedName: step-51
+dashedName: step-53
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
index db31dfd7e9..f48b78db1c 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4ab1b435f13ab6550052
-title: 第 52 步
+title: Step 54
 challengeType: 0
-dashedName: step-52
+dashedName: step-54
 ---
 
 # --description--
@@ -79,7 +79,7 @@ assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
index 5cea934f00..57757efa41 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4d04b435f13ab6550053
-title: Step 53
+title: Step 55
 challengeType: 0
-dashedName: step-53
+dashedName: step-55
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
index 2131bc00f0..d5a44a5db3 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a80975fc4bcae0edb3497
-title: 步骤 49
+title: Step 51
 challengeType: 0
-dashedName: step-49
+dashedName: step-51
 ---
 
 # --description--
@@ -64,9 +64,10 @@ assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
index de0da8acd9..d972eee6d1 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a89f1190aff21ae42105a
-title: 步骤 60
+title: Step 62
 challengeType: 0
-dashedName: step-60
+dashedName: step-62
 ---
 
 # --description--
@@ -52,7 +52,7 @@ assert(energeticCheckbox.getAttribute('value').match(/^energetic$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
index 6826e9d52c..27976024eb 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
@@ -1,8 +1,8 @@
 ---
 id: 62bb4009e3458a128ff57d5d
-title: 步骤 69
+title: Step 71
 challengeType: 0
-dashedName: step-69
+dashedName: step-71
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
@@ -127,7 +127,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
new file mode 100644
index 0000000000..aa057f8e17
--- /dev/null
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
@@ -0,0 +1,57 @@
+---
+id: 671141d8e32fe934c26fa1be
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Add the words `See more` before the anchor element and `in our gallery` after the anchor element
+
+# --hints--
+
+You should use the existing anchor element, do not create a new one.
+
+```js
+assert.lengthOf(document.querySelectorAll('a'), 1);
+```
+
+You should have the words `See more` before the anchor element.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a>/)
+```
+
+You should have the words `in our gallery` after the anchor element.
+
+```js
+assert.match(code, /<a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+You should have `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery` in your code.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <a href="https://freecatphotoapp.com">cat photos</a>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
new file mode 100644
index 0000000000..78aae1394e
--- /dev/null
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
@@ -0,0 +1,48 @@
+---
+id: 671141f948cbab359e74cc93
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Add `p` tags to turn `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.` into a paragraph.
+
+# --hints--
+
+You should add a `p` element around `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.`.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P);
+assert.strictEqual(P.innerText, "See more cat photos in our gallery.");
+```
+
+You should still have the anchor element inside the new paragraph.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P.querySelector('a'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
new file mode 100644
index 0000000000..57b4139497
--- /dev/null
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -0,0 +1,57 @@
+---
+id: 671141feba228a35cefba82d
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Turn the text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+# --hints--
+
+There should be a new anchor element in the first `p` element.
+
+```js
+assert.exists(document.querySelector('p')?.querySelector('a'));
+```
+
+The anchor text should be `cute cats`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.innerText, "cute cats");
+```
+
+The `href` attrivute of the new anchor element should be `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.href, "https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg");
+```
+
+The text of the `p` element should still be `Everyone loves cute cats online!`.
+
+```js
+assert.strictEqual(document.querySelector('p')?.innerText, "Everyone loves cute cats online!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
new file mode 100644
index 0000000000..7256f63593
--- /dev/null
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
@@ -0,0 +1,47 @@
+---
+id: 671144cdcc01d73f7dd79dc9
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have added the link you can remove the comment.
+
+# --hints--
+
+There should not be any comment in your code.
+
+```js
+assert.notMatch(code, /<!--/);
+assert.notMatch(code, /-->/);
+```
+
+The text `TODO: Add link to cat photos` should not be present anymore.
+
+```js
+assert.notMatch(code, /TODO:?/i)
+assert.notMatch(code, /Add\s*link\s*to\s*cat\s*photos/i)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+--fcc-editable-region--
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
+      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
index b57e81ee66..e54e7254a7 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
@@ -1,8 +1,8 @@
 ---
 id: 7cf9b03d81a65668421804c3
-title: 步骤 39
+title: Step 41
 challengeType: 0
-dashedName: step-39
+dashedName: step-41
 ---
 
 # --description--
@@ -66,7 +66,7 @@ assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/chinese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
index 692385ab63..c833584c2d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
+++ b/curriculum/challenges/chinese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is asynchronous programming?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to execute code in a sequential order.
 
 ---
 
-Placeholder distractor 2
+A technique to handle errors in synchronous code.
 
 ---
 
-Placeholder distractor 3
+A way to guarantee task order.
 
 #### --answer--
 
-Placeholder answer
+A method to execute code concurrently without blocking the main thread.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `async` attribute do when used in a `<script>` tag?
 
 #### --distractors--
 
-Placeholder distractor 1
+It allows the script to be executed after the HTML document has been completely parsed.
 
 ---
 
-Placeholder distractor 2
+It ensures the script runs in a synchronous manner.
 
 ---
 
-Placeholder distractor 3
+It delays the script execution until the browser is idle.
 
 #### --answer--
 
-Placeholder answer
+The script is downloaded in parallel with parsing the page and executed as soon as it is available.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Fetch API in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manage asynchronous callbacks.
 
 ---
 
-Placeholder distractor 2
+To create and manage cookies.
 
 ---
 
-Placeholder distractor 3
+To render dynamic HTML content.
 
 #### --answer--
 
-Placeholder answer
+To make network requests to servers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which `HTTP` method is used to send data to a server for processing?
 
 #### --distractors--
 
-Placeholder distractor 1
+`GET`
 
 ---
 
-Placeholder distractor 2
+`DELETE`
 
 ---
 
-Placeholder distractor 3
+`HEAD`
 
 #### --answer--
 
-Placeholder answer
+`POST`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `res.json()` method do in Express.js?
 
 #### --distractors--
 
-Placeholder distractor 1
+It retrieves data from a JSON file.
 
 ---
 
-Placeholder distractor 2
+It parses a JSON string into a JavaScript object.
 
 ---
 
-Placeholder distractor 3
+It sends raw JSON as a response without any processing.
 
 #### --answer--
 
-Placeholder answer
+It converts a JavaScript object to a JSON string and sends it as a response.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a promise in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to synchronize multiple operations.
 
 ---
 
-Placeholder distractor 2
+A callback function that runs after an operation.
 
 ---
 
-Placeholder distractor 3
+A technique to handle errors in asynchronous code.
 
 #### --answer--
 
-Placeholder answer
+An object that represents the eventual completion (or failure) of an asynchronous operation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does promise chaining allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Execute multiple asynchronous operations in parallel.
 
 ---
 
-Placeholder distractor 2
+Handle synchronous operations more efficiently.
 
 ---
 
-Placeholder distractor 3
+Retry failed operations automatically.
 
 #### --answer--
 
-Placeholder answer
+Pass the result of one promise to the next.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle successful completion of a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.catch()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.then()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle errors in a promise chain?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.then()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.catch()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the use of the `.finally()` method in a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+It returns the result of the promise.
 
 ---
 
-Placeholder distractor 2
+It stops the execution of subsequent promise handlers.
 
 ---
 
-Placeholder distractor 3
+It retries the promise if it fails.
 
 #### --answer--
 
-Placeholder answer
+It executes code after a promise is fulfilled or rejected, regardless of the outcome.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the syntax for declaring an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+`function myFunction() {}`
 
 ---
 
-Placeholder distractor 2
+`function async myFunction() {}`
 
 ---
 
-Placeholder distractor 3
+`async {} => ()`
 
 #### --answer--
 
-Placeholder answer
+`async function myFunction() {}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `await` keyword do in an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+It creates a new promise.
 
 ---
 
-Placeholder distractor 2
+It executes code immediately without waiting.
 
 ---
 
-Placeholder distractor 3
+It returns the result of the promise.
 
 #### --answer--
 
-Placeholder answer
+It pauses the execution of the function until the promise is resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Geolocation API?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manipulate HTML elements.
 
 ---
 
-Placeholder distractor 2
+To create and manage map elements.
 
 ---
 
-Placeholder distractor 3
+To control the device's camera.
 
 #### --answer--
 
-Placeholder answer
+To retrieve the geographical location of a device.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method of the Geolocation API is used to get the current position of the device?
 
 #### --distractors--
 
-Placeholder distractor 1
+`getLocation()`
 
 ---
 
-Placeholder distractor 2
+`getPosition()`
 
 ---
 
-Placeholder distractor 3
+`getLatLong()`
 
 #### --answer--
 
-Placeholder answer
+`getCurrentPosition()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What parameters can be passed to the `getCurrentPosition()` method?
 
 #### --distractors--
 
-Placeholder distractor 1
+Only the success callback function.
 
 ---
 
-Placeholder distractor 2
+Only options.
 
 ---
 
-Placeholder distractor 3
+One the error callback function.
 
 #### --answer--
 
-Placeholder answer
+Success and error callback functions, along with options.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What will the following code return? `fetch('https://api.example.com/data')`
 
 #### --distractors--
 
-Placeholder distractor 1
+The JSON response directly.
 
 ---
 
-Placeholder distractor 2
+An error if the URL is not reachable.
 
 ---
 
-Placeholder distractor 3
+A synchronous response.
 
 #### --answer--
 
-Placeholder answer
+A `Promise` that resolves to a `Response` object
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default HTTP method for the Fetch API?
 
 #### --distractors--
 
-Placeholder distractor 1
+`POST`
 
 ---
 
-Placeholder distractor 2
+`PUT`
 
 ---
 
-Placeholder distractor 3
+`DELETE`
 
 #### --answer--
 
-Placeholder answer
+`GET`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `Promise.all()` method do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resolves a single promise.
 
 ---
 
-Placeholder distractor 2
+It rejects the first promise that fails.
 
 ---
 
-Placeholder distractor 3
+It runs all promises sequentially.
 
 #### --answer--
 
-Placeholder answer
+It executes multiple promises concurrently and returns the results when all are resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you handle multiple asynchronous operations using async/await?
 
 #### --distractors--
 
-Placeholder distractor 1
+You must always use `.then()` for each operation.
 
 ---
 
-Placeholder distractor 2
+You cannot handle multiple operations with async/await.
 
 ---
 
-Placeholder distractor 3
+You must use callback functions for all operations.
 
 #### --answer--
 
-Placeholder answer
+You can use `await` for each operation in sequence and put them inside an async function.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is true about the `fetch` API?
 
 #### --distractors--
 
-Placeholder distractor 1
+It can only handle `GET` requests.
 
 ---
 
-Placeholder distractor 2
+It requires a callback function for handling responses.
 
 ---
 
-Placeholder distractor 3
+It only works in synchronous code.
 
 #### --answer--
 
-Placeholder answer
+It is used to make HTTP requests to a server.
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
index 80af1166b6..cac5b80e72 100644
--- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
+++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What happens when there is too much content to fit in an element box?
 
 #### --distractors--
 
-Placeholder distractor 1
+Underflow
 
 ---
 
-Placeholder distractor 2
+Compression
 
 ---
 
-Placeholder distractor 3
+Padding
 
 #### --answer--
 
-Placeholder answer
+Overflow
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default behavior of CSS when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+Content is hidden
 
 ---
 
-Placeholder distractor 2
+Content is clipped
 
 ---
 
-Placeholder distractor 3
+Content is resized
 
 #### --answer--
 
-Placeholder answer
+Content is visible
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why does CSS typically avoid hiding content when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+To enhance page design by hiding irrelevant content
 
 ---
 
-Placeholder distractor 2
+To save memory and load pages faster
 
 ---
 
-Placeholder distractor 3
+To automatically fix broken layout issues
 
 #### --answer--
 
-Placeholder answer
+To prevent data loss and make issues noticeable
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you handle overflow in CSS to hide content or add scrollbars?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars
 
 ---
 
-Placeholder distractor 2
+Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars
 
 ---
 
-Placeholder distractor 3
+Use `overflow: none` to hide content and `overflow: show` to display scrollbars
 
 #### --answer--
 
-Placeholder answer
+Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you specify different scrolling behaviors for the x-axis and y-axis in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+By using `scroll-x` and `scroll-y` properties
 
 ---
 
-Placeholder distractor 2
+By using `overflow-x` and `overflow-y` separately in every case
 
 ---
 
-Placeholder distractor 3
+By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x`
 
 #### --answer--
 
-Placeholder answer
+By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform` CSS property allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Change the color and font style of an element
 
 ---
 
-Placeholder distractor 2
+Adjust the margin and padding of an element
 
 ---
 
-Placeholder distractor 3
+Modify the visibility and display of an element
 
 #### --answer--
 
-Placeholder answer
+Rotate, scale, skew, or translate an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform-box: fill-box` property do in an animation that rotates an element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resizes the element to fit the canvas during the transformation
 
 ---
 
-Placeholder distractor 2
+It changes the background of the element during transformation
 
 ---
 
-Placeholder distractor 3
+It sets the transform origin to the top-left corner of the element
 
 #### --answer--
 
-Placeholder answer
+It sets the transform origin to the center of the element's bounding box, allowing it to spin in place
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `transform-origin` property in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It controls the animation speed of transformed elements
 
 ---
 
-Placeholder distractor 2
+It defines the display type of transformed elements
 
 ---
 
-Placeholder distractor 3
+It sets the background of transformed elements
 
 #### --answer--
 
-Placeholder answer
+It specifies the point around which a transformation is applied to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does margin affect the size of an element in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Margin increases the actual size of the element's box
 
 ---
 
-Placeholder distractor 2
+Margin has no effect on the element's size or position
 
 ---
 
-Placeholder distractor 3
+Margin decreases the total area the element occupies on the page
 
 #### --answer--
 
-Placeholder answer
+Margin affects the total area an element occupies but is not part of the actual size of the box
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the content area of an element in CSS represent?
 
 #### --distractors--
 
-Placeholder distractor 1
+It defines the margins and padding around the element
 
 ---
 
-Placeholder distractor 2
+It specifies the border thickness of the element
 
 ---
 
-Placeholder distractor 3
+It controls the visibility of the element on the page
 
 #### --answer--
 
-Placeholder answer
+It contains the "real" content of the element, such as text, images, or videos
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the difference between `content-box` and `border-box` in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`content-box` includes padding and border, while `border-box` includes only content dimensions
 
 ---
 
-Placeholder distractor 2
+Both `content-box` and `border-box` include only the border dimensions
 
 ---
 
-Placeholder distractor 3
+`content-box` is used for 2D elements, while `border-box` is used for 3D elements
 
 #### --answer--
 
-Placeholder answer
+`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+To apply default styles to all elements for faster loading
 
 ---
 
-Placeholder distractor 2
+To minimize the size of CSS files by removing unused styles
 
 ---
 
-Placeholder distractor 3
+To optimize images and fonts for better performance
 
 #### --answer--
 
-Placeholder answer
+To remove default browser styling and create a consistent baseline for styling across different browsers
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What are the common types of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bootstrap Reset, Tailwind Reset, and Foundation Reset
 
 ---
 
-Placeholder distractor 2
+Simple Reset, Comprehensive Reset, and Adaptive Reset
 
 ---
 
-Placeholder distractor 3
+Minimal Reset, Advanced Reset, and Legacy Reset
 
 #### --answer--
 
-Placeholder answer
+Normalize.css, Eric Meyer's Reset, and HTML5 Reset
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `scale3d()` property value do in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It rotates an element in 3D space
 
 ---
 
-Placeholder distractor 2
+It skews an element on the x, y, and z axes
 
 ---
 
-Placeholder distractor 3
+It translates an element in 3D space
 
 #### --answer--
 
-Placeholder answer
+It scales an element along the x, y, and z axes
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the total width of an element calculated in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Total width = width + margin + padding + border
 
 ---
 
-Placeholder distractor 2
+Total width = width + margin + padding
 
 ---
 
-Placeholder distractor 3
+Total width = width + margin + border
 
 #### --answer--
 
-Placeholder answer
+Total width = width + left padding + right padding + left border + right border
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the filter property in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the layout of the element on the page
 
 ---
 
-Placeholder distractor 2
+It changes the background color and texture of an element
 
 ---
 
-Placeholder distractor 3
+It alters the size and position of an element
 
 #### --answer--
 
-Placeholder answer
+It applies visual effects like blur and saturation to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the `filter` property specified in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+As only a single function, where percentage values must be used
 
 ---
 
-Placeholder distractor 2
+As `block` or `inline`, with values expressed in pixels
 
 ---
 
-Placeholder distractor 3
+As `none` or multiple functions, but only percentage values are accepted
 
 #### --answer--
 
-Placeholder answer
+As `none` or one or more functions, where percentage values can also be expressed as decimals
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `contrast()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white
 
 ---
 
-Placeholder distractor 2
+Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it
 
 ---
 
-Placeholder distractor 3
+Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque
 
 #### --answer--
 
-Placeholder answer
+Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `hue-rotate()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the brightness of the input image based on degrees
 
 ---
 
-Placeholder distractor 2
+It rotates an element's size and position in the document
 
 ---
 
-Placeholder distractor 3
+It adjusts the saturation and contrast of the input image
 
 #### --answer--
 
-Placeholder answer
+It applies a hue rotation, where the `<angle>` value defines the degrees around the hue color circle
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens when two animated filters have different function list lengths in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+The shorter list's filters override the longer list's filters
 
 ---
 
-Placeholder distractor 2
+The filters are discarded and no animation is applied
 
 ---
 
-Placeholder distractor 3
+Only the first filter function in each list is animated
 
 #### --answer--
 
-Placeholder answer
+The longer list's missing equivalent filter functions are added to the shorter list using their initial values
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/chinese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
index 79e4cb7a88..6855b5dea7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
+++ b/curriculum/challenges/chinese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A database structured to recognize non-relation between stored items.
 
 ---
 
-Placeholder distractor 2
+A database that stores unstructured data.
 
 ---
 
-Placeholder distractor 3
+A flat file-based system.
 
 #### --answer--
 
-Placeholder answer
+A database structured to recognize relations between stored items.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a non-relational database differ from a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Non-relational databases use tables, while relational databases do not.
 
 ---
 
-Placeholder distractor 2
+Relational databases can store unstructured data.
 
 ---
 
-Placeholder distractor 3
+Non-relational databases are slower than relational databases.
 
 #### --answer--
 
-Placeholder answer
+Non-relational databases can store unstructured data.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `\l` command do when executed in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all schemas
 
 ---
 
-Placeholder distractor 2
+Lists all tables
 
 ---
 
-Placeholder distractor 3
+Connects to a database
 
 #### --answer--
 
-Placeholder answer
+Lists all databases
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following commands creates a new table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD TABLE`
 
 ---
 
-Placeholder distractor 2
+`NEW TABLE`
 
 ---
 
-Placeholder distractor 3
+`ALTER TABLE`
 
 #### --answer--
 
-Placeholder answer
+`CREATE TABLE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of a foreign key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To allow duplication of data.
 
 ---
 
-Placeholder distractor 2
+To uniquely identify a row in the table.
 
 ---
 
-Placeholder distractor 3
+To store large amounts of text data.
 
 #### --answer--
 
-Placeholder answer
+To create a relationship between two tables.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command will add a new column to an existing table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD COLUMN column_name TO table_name data_type;`
 
 ---
 
-Placeholder distractor 2
+`INSERT COLUMN column_name INTO table_name data_type;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name ADD COLUMN column_name data_type;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name ADD COLUMN column_name data_type;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What type of relationship exists when one record in Table A corresponds to one or more records in Table B?
 
 #### --distractors--
 
-Placeholder distractor 1
+One-to-One (1-1)
 
 ---
 
-Placeholder distractor 2
+Many-to-Many (m-m)
 
 ---
 
-Placeholder distractor 3
+Many-to-one(m-1)
 
 #### --answer--
 
-Placeholder answer
+One-to-Many (1-m)
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary purpose of normalization in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To increase the speed of data retrieval.
 
 ---
 
-Placeholder distractor 2
+To enforce security measures.
 
 ---
 
-Placeholder distractor 3
+To simplify the database schema.
 
 #### --answer--
 
-Placeholder answer
+To eliminate data redundancy and ensure data integrity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you delete a column from a table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 2
+`DELETE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name DELETE column_name;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name DROP COLUMN column_name;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the function of the `PRIMARY KEY` constraint in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+To link two tables together.
 
 ---
 
-Placeholder distractor 2
+To define the default value for a column.
 
 ---
 
-Placeholder distractor 3
+To allow null values in the column.
 
 #### --answer--
 
-Placeholder answer
+To ensure that the column contains unique values.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the command `\c` do in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all tables in the current database.
 
 ---
 
-Placeholder distractor 2
+Displays the current database connection details.
 
 ---
 
-Placeholder distractor 3
+Exits the `psql` shell.
 
 #### --answer--
 
-Placeholder answer
+Connects to the specified database.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command inserts data into a table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`PUT VALUES`
 
 ---
 
-Placeholder distractor 2
+`UPDATE INTO`
 
 ---
 
-Placeholder distractor 3
+`ADD DATA`
 
 #### --answer--
 
-Placeholder answer
+`INSERT INTO`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you rename a column in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`MODIFY COLUMN`
 
 ---
 
-Placeholder distractor 2
+`CHANGE COLUMN`
 
 ---
 
-Placeholder distractor 3
+`ALTER COLUMN`
 
 #### --answer--
 
-Placeholder answer
+`RENAME COLUMN`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which query will delete all records from the employees table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE ALL`
 
 ---
 
-Placeholder distractor 2
+`TRUNCATE employees`
 
 ---
 
-Placeholder distractor 3
+`DROP RECORDS`
 
 #### --answer--
 
-Placeholder answer
+`DELETE FROM employees`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which SQL constraint specifically ensures that a column can contain only unique values, allowing nulls?
 
 #### --distractors--
 
-Placeholder distractor 1
+`NOT NULL`
 
 ---
 
-Placeholder distractor 2
+`FOREIGN KEY`
 
 ---
 
-Placeholder distractor 3
+`PRIMARY KEY`
 
 #### --answer--
 
-Placeholder answer
+`UNIQUE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a relational database, what is an index used for?
 
 #### --distractors--
 
-Placeholder distractor 1
+To store additional metadata about tables.
 
 ---
 
-Placeholder distractor 2
+To ensure unique values in a column.
 
 ---
 
-Placeholder distractor 3
+To enforce data integrity.
 
 #### --answer--
 
-Placeholder answer
+To speed up data retrieval.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does a one-to-one (1-1) relationship represent in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Each record in Table A corresponds to one or more records in Table B.
 
 ---
 
-Placeholder distractor 2
+Each record in Table A corresponds to no records in Table B.
 
 ---
 
-Placeholder distractor 3
+Each record in Table A corresponds to multiple records in Table B and vice versa.
 
 #### --answer--
 
-Placeholder answer
+Each record in Table A corresponds to exactly one record in Table B.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command will list all tables in the current PostgreSQL database?
 
 #### --distractors--
 
-Placeholder distractor 1
+`\l`
 
 ---
 
-Placeholder distractor 2
+`SHOW TABLES`
 
 ---
 
-Placeholder distractor 3
+`\t`
 
 #### --answer--
 
-Placeholder answer
+`\d`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
new file mode 100644
index 0000000000..6a1bfc5b2b
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
@@ -0,0 +1,65 @@
+---
+id: 619665c9abd72906f3ad30f9
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You will be building a happy Flappy Penguin, and further practicing CSS transforms and animations in the process.
+
+Begin with linking your stylesheet to the page.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.exists(document.querySelector('link'));
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
new file mode 100644
index 0000000000..2572b413a4
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
@@ -0,0 +1,56 @@
+---
+id: 61967e74a8e3690ab6292daa
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`.
+
+# --hints--
+
+You should use the `body` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+You should use the `background` property in the `body` selector.
+
+```js
+assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background'));
+```
+
+You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
new file mode 100644
index 0000000000..67e0a51de0
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
@@ -0,0 +1,53 @@
+---
+id: 61968df2acd5550bf1616c34
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Normalize your page's sizing, by removing the `body` element's `margin` and `padding`.
+
+# --hints--
+
+You should give `body` a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+You should give `body` a `padding` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
new file mode 100644
index 0000000000..ec42f16803
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
@@ -0,0 +1,51 @@
+---
+id: 61968e9243a4090cc805531c
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Remove both the horizontal and vertical scrollbars, using only one property.
+
+# --hints--
+
+You should give `body` an `overflow` of `--fcc-expected--`. But found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
new file mode 100644
index 0000000000..75b3097c34
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
@@ -0,0 +1,64 @@
+---
+id: 61968f8877c6720d6d61aaf5
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within the `body`, add a `div` with a `class` of `ground`.
+
+# --hints--
+
+You should add a new `div`.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+You should give the `div` a `class` of `ground`.
+
+```js
+assert.include(document.querySelector('div')?.className, 'ground');
+```
+
+You should place the `div` within the `body`.
+
+```js
+assert.exists(document.querySelector('body > div.ground'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
new file mode 100644
index 0000000000..2e20bd3589
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
@@ -0,0 +1,66 @@
+---
+id: 619691693bc14b0e528f5a20
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`.
+
+# --hints--
+
+You should use the `.ground` selector.
+
+```js
+assert.match(code, /\.ground\s*\{/);
+```
+
+You should give the `.ground` element a `width` of `100vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw');
+```
+
+You should give the `.ground` element a `height` of `400px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
new file mode 100644
index 0000000000..afa5d6f94b
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
@@ -0,0 +1,58 @@
+---
+id: 6196928658b6010f28c39484
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`.
+
+# --hints--
+
+You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
new file mode 100644
index 0000000000..606e749c43
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
@@ -0,0 +1,73 @@
+---
+id: 619692ff79f5770fc6d8c0b4
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin.
+
+# --hints--
+
+You should add a new `div` within the `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 2);
+```
+
+You should give the `div` a `class` of `penguin`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin');
+```
+
+You should place `div.penguin` before `div.ground`.
+
+```js
+assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
new file mode 100644
index 0000000000..46ebd08c10
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
@@ -0,0 +1,75 @@
+---
+id: 6196990f966e8f10a40094f6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Target the `.penguin` element, and set its `width` and `height` to `300px`.
+
+# --hints--
+
+You should use the `.penguin` selector.
+
+```js
+assert.match(code, /\.penguin\s*\{/);
+```
+
+You should give `.penguin` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
+```
+
+You should give `.penguin` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
new file mode 100644
index 0000000000..860cde3323
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
@@ -0,0 +1,74 @@
+---
+id: 619699c10a0f6e11591d73c4
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`.
+
+# --hints--
+
+You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto');
+```
+
+You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
new file mode 100644
index 0000000000..3fa5992f53
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
@@ -0,0 +1,83 @@
+---
+id: 61969aa6acef5b12200f672e
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To create some scenery in the background, you will add two mountains.
+
+Above the `.penguin` element, add a `div` with a `class` of `left-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `left-mountain`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain');
+```
+
+You should place `.left-mountain` before `.penguin`.
+
+```js
+assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
new file mode 100644
index 0000000000..3568d09eeb
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
@@ -0,0 +1,89 @@
+---
+id: 61969c487ced6f12db8fef94
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`.
+
+# --hints--
+
+You should use the `.left-mountain` selector.
+
+```js
+assert.match(code, /\.left-mountain\s*\{/);
+```
+
+You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
+```
+
+You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
+```
+
+You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
new file mode 100644
index 0000000000..e8eba6e4ec
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
@@ -0,0 +1,76 @@
+---
+id: 61969d66cfcdba137d021558
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
new file mode 100644
index 0000000000..a182060c6c
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
@@ -0,0 +1,91 @@
+---
+id: 61969e7451455614217e901b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by.
+
+Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis.
+
+# --hints--
+
+You should give `.left-mountain` a `transform` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
+```
+
+You should use the `skew` function on `transform`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
+```
+
+You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
new file mode 100644
index 0000000000..dc15f9983e
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
@@ -0,0 +1,90 @@
+---
+id: 6196adc17f77a714d51485f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Set the stack level of the mountain element such that it remains directly behind the `.ground` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+You should not change the `z-index` of the `.ground` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
new file mode 100644
index 0000000000..870ce25dc1
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
@@ -0,0 +1,86 @@
+---
+id: 6196aead7ac7bf1584b17a7f
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`.
+
+# --hints--
+
+You should give `.left-mountain` a `margin-top` of `100px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px');
+```
+
+You should give `.ground` a `margin-top` of `-58px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
new file mode 100644
index 0000000000..b6ddd5cad7
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
@@ -0,0 +1,92 @@
+---
+id: 6196ce0415498d2463989e84
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 4);
+```
+
+You should give the `div` a `class` of `back-mountain`.
+
+```js
+assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain');
+```
+
+You should place `.back-mountain` after `.left-mountain`.
+
+```js
+assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
new file mode 100644
index 0000000000..bcbe4d3e9d
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
@@ -0,0 +1,100 @@
+---
+id: 6196cee94c6da1253809dff9
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`.
+
+# --hints--
+
+You should use the `.back-mountain` selector.
+
+```js
+assert.match(code, /\.back-mountain\s*\{/);
+```
+
+You should give `.back-mountain` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px');
+```
+
+You should give `.back-mountain` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px');
+```
+
+You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
new file mode 100644
index 0000000000..4bb9ea8634
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
@@ -0,0 +1,87 @@
+---
+id: 6196d00a5d7292262bc02f4c
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.back-mountain` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
new file mode 100644
index 0000000000..d3fd004502
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
@@ -0,0 +1,100 @@
+---
+id: 6196d0cda039d026f7f78d1e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1');
+```
+
+You should not change the `z-index` of the `.left-mountain` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
new file mode 100644
index 0000000000..cdd348db03
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
@@ -0,0 +1,131 @@
+---
+id: 6196d1ac33c68d27dcda5796
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`.
+
+# --hints--
+
+You should use the `transform` property to rotate the element.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.notEmpty(backMountain?.transform);
+} else {
+  assert.notEmpty(backMountain?.rotate);
+}
+```
+
+You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.equal(backMountain?.transform, 'rotate(45deg)');
+} else {
+  assert.equal(backMountain?.rotate, '45deg');
+}
+```
+
+You should give `.back-mountain` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
+```
+
+You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
+```
+
+You should give `.back-mountain` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
+```
+
+You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
new file mode 100644
index 0000000000..151831dbd7
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
@@ -0,0 +1,104 @@
+---
+id: 6196d213d99f16287bff22ae
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`.
+
+# --hints--
+
+You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 5);
+```
+
+You should give the new `div` element a `class` of `sun`.
+
+```js
+assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun');
+```
+
+You should place the new `div` element immediately after the `.back-mountain` element.
+
+```js
+assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
new file mode 100644
index 0000000000..61cf99cfee
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
@@ -0,0 +1,112 @@
+---
+id: 6196d2c0f22ca0293107c048
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`.
+
+# --hints--
+
+You should use the `.sun` selector.
+
+```js
+assert.match(code, /\.sun\s*\{/);
+```
+
+You should give `.sun` a `width` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px');
+```
+
+You should give `.sun` a `height` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px');
+```
+
+You should give `.sun` a `background-color` of `yellow`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
new file mode 100644
index 0000000000..f924e1d525
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
@@ -0,0 +1,105 @@
+---
+id: 6196d32d1340d829f0f6f57d
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle.
+
+# --hints--
+
+You should give `.sun` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute');
+```
+
+You should give `.sun` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
new file mode 100644
index 0000000000..969618185d
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
@@ -0,0 +1,107 @@
+---
+id: 6196d41d40bf9b2aaea5d520
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen.
+
+# --hints--
+
+You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px');
+```
+
+You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
new file mode 100644
index 0000000000..1253455f06
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
@@ -0,0 +1,118 @@
+---
+id: 6197cff995d03905b0cca8ad
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Your penguin will consist of two main sections: the head, and the body.
+
+Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`.
+
+# --hints--
+
+You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `penguin-head`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head');
+```
+
+You should give the second `div` a `class` of `penguin-body`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+--fcc-editable-region--
+    <div class="penguin">
+
+    </div>
+--fcc-editable-region--
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
new file mode 100644
index 0000000000..5256d40e7d
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
@@ -0,0 +1,125 @@
+---
+id: 6197f40a16afea068c7e60c8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex);
+```
+
+You should give the `.penguin` element a `z-index` of `4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4');
+```
+
+You should give `.penguin` a `position` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position);
+```
+
+You should give `.penguin` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
new file mode 100644
index 0000000000..c34e5dc0b5
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
@@ -0,0 +1,65 @@
+---
+id: 6197f667297bb30a552ce017
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`.
+
+# --hints--
+
+You should give `.ground` a `z-index` of `3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+You should give `.ground` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
new file mode 100644
index 0000000000..4f42960c10
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
@@ -0,0 +1,128 @@
+---
+id: 61993b72e874e709b8dfd666
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`.
+
+# --hints--
+
+You should use the `.penguin-head` selector.
+
+```js
+assert.match(code, /\.penguin-head\s*\{/);
+```
+
+You should give `.penguin-head` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%');
+```
+
+You should give `.penguin-head` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`.
+
+```js
+assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
new file mode 100644
index 0000000000..837b66e7b8
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
@@ -0,0 +1,122 @@
+---
+id: 61993cf26a8e0f0a553db223
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+_Most_ penguins do not have a square head.
+
+Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`.
+
+# --hints--
+
+You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`.
+
+```js
+// Maybe check for individual border-radius properties?
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
new file mode 100644
index 0000000000..42992c942d
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
@@ -0,0 +1,139 @@
+---
+id: 61993dbb35adf30b10d49e38
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.
+
+# --hints--
+
+You should use the `.penguin-body` selector.
+
+```js
+assert.match(code, /\.penguin-body\s*\{/);
+```
+
+You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
+```
+
+You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
+```
+
+You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
new file mode 100644
index 0000000000..1304f820e2
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
@@ -0,0 +1,133 @@
+---
+id: 61993e9adc9e9a0bb4d28fff
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Another interesting fact about penguins is that they do not have square bodies.
+
+Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body.
+
+# --hints--
+
+You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
new file mode 100644
index 0000000000..177fa37ed7
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
@@ -0,0 +1,139 @@
+---
+id: 6199409834ccaf0d10736596
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`.
+
+# --hints--
+
+You should use the `.penguin *` selector.
+
+```js
+assert.match(code, /\.penguin\s*\*\s*\{/);
+```
+
+You should give `.penguin *` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
new file mode 100644
index 0000000000..39d2becaa7
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
@@ -0,0 +1,154 @@
+---
+id: 6199429802b7c10dc79ff871
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-head` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
+```
+
+You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
+```
+
+You should give `.penguin-head` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
+```
+
+You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
new file mode 100644
index 0000000000..06adbcbaed
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
@@ -0,0 +1,156 @@
+---
+id: 619943285a41720e6370d985
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top);
+```
+
+You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%');
+```
+
+You should give `.penguin-body` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left);
+```
+
+You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
new file mode 100644
index 0000000000..841e0fac70
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
@@ -0,0 +1,146 @@
+---
+id: 619943876b706d0f35c01dbc
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex);
+```
+
+You should give the `.penguin-head` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
new file mode 100644
index 0000000000..71620d485d
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
@@ -0,0 +1,148 @@
+---
+id: 6199442866286d0ff421a4fc
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string.
+
+# --hints--
+
+You should use the `.penguin-body::before` selector.
+
+```js
+assert.match(code, /\.penguin-body::before\s*\{/);
+```
+
+You should give `.penguin-body::before` a `content` of `""`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
new file mode 100644
index 0000000000..95939a0a79
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
@@ -0,0 +1,145 @@
+---
+id: 619bcf239fc15905ecd66fce
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Position the pseudo-element relative to its closest positioned ancestor.
+
+# --hints--
+
+You should give `.penguin-body::before` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
new file mode 100644
index 0000000000..144a263043
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
@@ -0,0 +1,158 @@
+---
+id: 619be73b3c806006ccc00bb0
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`.
+
+# --hints--
+
+You should give `.penguin-body::before` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
+```
+
+You should give `.penguin-body::before` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%');
+```
+
+You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
new file mode 100644
index 0000000000..32e8d7967e
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Position the pseudo-element `10%` from the top and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
new file mode 100644
index 0000000000..f22f0e3944
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
@@ -0,0 +1,160 @@
+---
+id: 619be80062551a080e32c821
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`.
+
+# --hints--
+
+You should use the `border-radius` property to round off the crest.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
+```
+
+You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
new file mode 100644
index 0000000000..1c9a12db86
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
@@ -0,0 +1,152 @@
+---
+id: 619be8ce4ea49008c5bfbc30
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Increase the pseudo-element's transparency by `30%`.
+
+# --hints--
+
+You should give `.penguin-body::before` an `opacity` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
new file mode 100644
index 0000000000..088e47ba55
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
@@ -0,0 +1,166 @@
+---
+id: 619be946958c6009844f1dee
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`.
+
+# --hints--
+
+You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
+```
+
+You should give the second `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
new file mode 100644
index 0000000000..e25cfd80ce
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
@@ -0,0 +1,193 @@
+---
+id: 619c155df0063a0a3fec0e32
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`.
+
+# --hints--
+
+You should use the `.face` selector.
+
+```js
+assert.match(code, /\.face\s*\{/);
+```
+
+You should give `.face` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
+```
+
+You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
+```
+
+You should give `.face` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
+```
+
+You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
+```
+
+You should give `.face` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
+```
+
+You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
new file mode 100644
index 0000000000..999faf2cd7
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
@@ -0,0 +1,165 @@
+---
+id: 619c16debd0c270b01c5ce38
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`.
+
+# --hints--
+
+You should give `.face` a `border-radius` of `70% 70% 60% 60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
new file mode 100644
index 0000000000..1204286781
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
@@ -0,0 +1,169 @@
+---
+id: 619cfdf2e63ddf05feab86ad
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Position the `.face` elements so that they are `15%` from the top.
+
+# --hints--
+
+You should give `.face` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top);
+```
+
+You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
new file mode 100644
index 0000000000..3529e08289
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
@@ -0,0 +1,171 @@
+---
+id: 619d019488f98c06acbbb71a
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Currently, the two `.face` elements are on top of each other.
+
+Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element.
+
+# --hints--
+
+You should give a `class` of `left` to the first `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left');
+```
+
+You should give a `class` of `right` to the second `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
new file mode 100644
index 0000000000..cdb0268e02
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
@@ -0,0 +1,177 @@
+---
+id: 619d022dc8400c0763829a17
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Target the `.face` element with the `left` class, and position it `5%` left of its parent.
+
+# --hints--
+
+You should use the `.face.left` selector.
+
+```js
+assert.match(code, /\.face\.left\s*\{/);
+```
+
+You should give `.face.left` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left);
+```
+
+You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
new file mode 100644
index 0000000000..c81e359b35
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
@@ -0,0 +1,181 @@
+---
+id: 619d02c7bc95bf0827a5d296
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Target the `.face` element with the `right` class, and position it `5%` right of its parent.
+
+# --hints--
+
+You should use the `.face.right` selector.
+
+```js
+assert.match(code, /\.face\.right\s*\{/);
+```
+
+You should give `.face.right` a `right` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
+```
+
+You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+.face.left {
+  left: 5%;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
new file mode 100644
index 0000000000..7101cc6218
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
@@ -0,0 +1,184 @@
+---
+id: 619d033915012509031f309a
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Below the `.face.right` element, add a `div` element with a `class` of `chin`.
+
+# --hints--
+
+You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `chin`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.chin'));
+```
+
+You should place the `div` element below the `.face.right` element.
+
+```js
+assert.exists(document.querySelector('.face.right + .chin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
new file mode 100644
index 0000000000..8ff7447615
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
@@ -0,0 +1,210 @@
+---
+id: 619d03dadadb6509a16f4f5f
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`.
+
+# --hints--
+
+You should use the `.chin` selector.
+
+```js
+assert.match(code, /\.chin\s*\{/);
+```
+
+You should give `.chin` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width);
+```
+
+You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%');
+```
+
+You should give `.chin` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height);
+```
+
+You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%');
+```
+
+You should give `.chin` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor);
+```
+
+You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
new file mode 100644
index 0000000000..9177d13254
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
@@ -0,0 +1,206 @@
+---
+id: 619d0503e03a790a4179d463
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`.
+
+# --hints--
+
+You should give `.chin` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top);
+```
+
+You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%');
+```
+
+You should give `.chin` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left);
+```
+
+You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%');
+```
+
+You should give `.chin` a `border-radius` of `70% 70% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
new file mode 100644
index 0000000000..ca096090f1
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
@@ -0,0 +1,197 @@
+---
+id: 619d05c54dabca0b10058235
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+So far, the `.face` and `.chin` elements have the same `background-color`.
+
+Create a custom CSS property called `--penguin-face`, and set it to `white`.
+
+# --hints--
+
+You should use the `:root` selector.
+
+```js
+assert.match(code, /:root\s*\{/);
+```
+
+You should give `:root` a `--penguin-face` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face'));
+```
+
+You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
new file mode 100644
index 0000000000..207c0664d1
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
@@ -0,0 +1,197 @@
+---
+id: 619d0882f54bf40bdc4671ed
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Where relevant, replace property values with your `--penguin-face` variable.
+
+# --hints--
+
+You should give `.face` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should give `.chin` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should not use `var(--penguin-face)` in the `.penguin-body` selector.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
new file mode 100644
index 0000000000..a7caac10b5
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
@@ -0,0 +1,222 @@
+---
+id: 619d090cd8d6db0c93dc5087
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5);
+```
+
+You should give the first new `div` a `class` of `eye`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye'));
+```
+
+You should give the second new `div` a `class` of `eye`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.right'));
+```
+
+You should place `div.eye.left` after `div.chin`.
+
+```js
+assert.exists(document.querySelector('.chin + .eye.left'));
+```
+
+You should place `div.eye.right` after `div.eye.left`.
+
+```js
+assert.exists(document.querySelector('.eye.left + .eye.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
new file mode 100644
index 0000000000..e2f3ce9e93
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
@@ -0,0 +1,207 @@
+---
+id: 619d0b51ca42ed0d74582186
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`.
+
+# --hints--
+
+You should use the `.eye` selector.
+
+```js
+assert.match(code, /\.eye\s*\{/);
+```
+
+You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%');
+```
+
+You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%');
+```
+
+You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
new file mode 100644
index 0000000000..a4e7d18c12
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
@@ -0,0 +1,200 @@
+---
+id: 619d0bc9cb05360e1bf549c3
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%');
+```
+
+You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
new file mode 100644
index 0000000000..b567a24805
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
@@ -0,0 +1,215 @@
+---
+id: 619d0c1594c38c0ebae75878
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent.
+
+# --hints--
+
+You should use the `.eye.left` selector.
+
+```js
+assert.match(code, /\.eye\.left\s*\{/);
+```
+
+You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%');
+```
+
+You should use the `.eye.right` selector.
+
+```js
+assert.match(code, /\.eye\.right\s*\{/);
+```
+
+You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
new file mode 100644
index 0000000000..2d324e7251
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
@@ -0,0 +1,225 @@
+---
+id: 619d0d18ca99870f884a7bff
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Within each `.eye` element, add a `div` with a `class` of `eye-lid`.
+
+# --hints--
+
+You should add one `div` element within `.eye.left`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
+```
+
+You should add one `div` element within `.eye.right`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
+```
+
+You should give the first new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.left > div.eye-lid'));
+```
+
+You should give the second new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.right > div.eye-lid'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+
+        </div>
+        <div class="eye right">
+
+        </div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
new file mode 100644
index 0000000000..224cfce88b
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
@@ -0,0 +1,227 @@
+---
+id: 619d0daf214542102739b0da
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`.
+
+# --hints--
+
+You should use the `.eye-lid` selector.
+
+```js
+assert.match(code, /\.eye-lid\s*\{/);
+```
+
+You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%');
+```
+
+You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%');
+```
+
+You should give `.eye-lid` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
new file mode 100644
index 0000000000..e779df5c2d
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
@@ -0,0 +1,226 @@
+---
+id: 619d0e56f9ca9710fcb974e3
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%');
+```
+
+You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%');
+```
+
+You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
new file mode 100644
index 0000000000..ed405abe92
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
@@ -0,0 +1,247 @@
+---
+id: 619d0eec0ac40611b41e2ccc
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7);
+```
+
+You should give the first new `div` a `class` of `blush`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush'));
+```
+
+You should give the second new `div` a `class` of `blush`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.right'));
+```
+
+You should place `.blush.right` after `.blush.left`.
+
+```js
+assert.exists(document.querySelector('.blush.left + .blush.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
new file mode 100644
index 0000000000..a346767374
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
@@ -0,0 +1,238 @@
+---
+id: 619d0fc9825c271253df28d4
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`.
+
+# --hints--
+
+You should use the `.blush` selector.
+
+```js
+assert.match(code, /\.blush\s*\{/);
+```
+
+You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%');
+```
+
+You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%');
+```
+
+You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
new file mode 100644
index 0000000000..78310b8e23
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
@@ -0,0 +1,231 @@
+---
+id: 619d102d786c3d13124c37c6
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%');
+```
+
+You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
new file mode 100644
index 0000000000..9431c4764e
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
@@ -0,0 +1,246 @@
+---
+id: 619d107edf7ddf13cc77106a
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent.
+
+# --hints--
+
+You should use the `.blush.left` selector.
+
+```js
+assert.match(code, /\.blush\.left\s*\{/);
+```
+
+You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%');
+```
+
+You should use the `.blush.right` selector.
+
+```js
+assert.match(code, /\.blush\.right\s*\{/);
+```
+
+You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
new file mode 100644
index 0000000000..39348186b5
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
@@ -0,0 +1,271 @@
+---
+id: 619d10cc98145f14820399c5
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9);
+```
+
+You should give the first new `div` a `class` of `beak`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak'));
+```
+
+You should give the second new `div` a `class` of `beak`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `top`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.top'));
+```
+
+You should give the second new `div` a `class` of `bottom`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.bottom'));
+```
+
+You should place `div.beak.top` after `div.blush.right`.
+
+```js
+assert.exists(document.querySelector('.blush.right + .beak.top'));
+```
+
+You should place `div.beak.bottom` after `div.beak.top`.
+
+```js
+assert.exists(document.querySelector('.beak.top + .beak.bottom'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
new file mode 100644
index 0000000000..ea381856af
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
@@ -0,0 +1,256 @@
+---
+id: 619d115e2adcd71538e82ebb
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should use the `.beak` selector.
+
+```js
+assert.match(code, /\.beak\s*\{/);
+```
+
+You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%');
+```
+
+You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange');
+```
+
+You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
new file mode 100644
index 0000000000..d1617d8dce
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
@@ -0,0 +1,262 @@
+---
+id: 619d11e6d5ef9515d2a16033
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent.
+
+# --hints--
+
+You should use the `.beak.top` selector.
+
+```js
+assert.match(code, /\.beak\.top\s*\{/);
+```
+
+You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%');
+```
+
+You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%');
+```
+
+You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
new file mode 100644
index 0000000000..e580633578
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
@@ -0,0 +1,267 @@
+---
+id: 619d129a417d0716a94de913
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`.
+
+# --hints--
+
+You should use the `.beak.bottom` selector.
+
+```js
+assert.match(code, /\.beak\.bottom\s*\{/);
+```
+
+You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%');
+```
+
+You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%');
+```
+
+You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
new file mode 100644
index 0000000000..4773a10cef
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
@@ -0,0 +1,267 @@
+---
+id: 619d1340361095175f4b5115
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element.
+
+# --hints--
+
+You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
+```
+
+You should give the new `div` a `class` of `shirt`.
+
+```js
+assert.exists(document.querySelector('.penguin > div.shirt'));
+```
+
+You should place the new `div` before `.penguin-body`.
+
+```js
+assert.exists(document.querySelector('.shirt + .penguin-body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
new file mode 100644
index 0000000000..ff117fcdd8
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
@@ -0,0 +1,263 @@
+---
+id: 619d15797b580c1828b05426
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Within the `.shirt` element, add a `div` with the following emoji as content: 💜
+
+# --hints--
+
+You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
+```
+
+You should give the new `div` a content of `💜`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > div')?.textContent, '💜');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
new file mode 100644
index 0000000000..b0330c317b
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
@@ -0,0 +1,264 @@
+---
+id: 619d15d955d9d418c4487bbc
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS`
+
+# --hints--
+
+You should add one `p` element within `.shirt`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > p')?.length, 1);
+```
+
+You should give the `p` element the content `I CSS`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+        <div>💜</div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
new file mode 100644
index 0000000000..2ca7d6a5d8
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
@@ -0,0 +1,278 @@
+---
+id: 619d1629a8adc61960ca8b40
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`.
+
+# --hints--
+
+You should use the `.shirt` selector.
+
+```js
+assert.match(code, /\.shirt\s*\{/);
+```
+
+You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px');
+```
+
+You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif');
+```
+
+You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
new file mode 100644
index 0000000000..c21bb0f24d
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
@@ -0,0 +1,272 @@
+---
+id: 619d1c5fc9f8941a400955da
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+In some browsers, the _heart_ emoji may look slightly different from the previous step. This is because some of the character's properties were overridden by the `font-weight` style of `bold`.
+
+Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value.
+
+# --hints--
+
+You should use the `.shirt div` selector to target the `div` with the heart emoji.
+
+```js
+assert.match(code, /\.shirt div\s*\{/);
+```
+
+You should give the `.shirt div` a `font-weight` of `initial` or `normal`.
+
+```js
+assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
new file mode 100644
index 0000000000..79b1e394fb
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
@@ -0,0 +1,273 @@
+---
+id: 619d1dab9ff3421ae1976991
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent.
+
+# --hints--
+
+You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px');
+```
+
+You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+.shirt div {
+  font-weight: initial;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
new file mode 100644
index 0000000000..0c23ce14f1
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
@@ -0,0 +1,281 @@
+---
+id: 619d1deb8b04811b8839ffe4
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element.
+
+# --hints--
+
+You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px');
+```
+
+You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px');
+```
+
+You should give the `.shirt` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
new file mode 100644
index 0000000000..e650139f7e
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
@@ -0,0 +1,272 @@
+---
+id: 619d1e7a8e81a61c5a819dc4
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+For the shirt's final touch, set the `color` to `#6a6969`.
+
+# --hints--
+
+You should give `.shirt` a `color` of `#6a6969`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
new file mode 100644
index 0000000000..a3dc1fdbf5
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
@@ -0,0 +1,306 @@
+---
+id: 619d1ed33c9a071cf657a0d6
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Fun fact: Penguins cannot stand without at least two feet.
+
+Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `foot`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot'));
+```
+
+You should give the second new `div` a `class` of `foot`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.right'));
+```
+
+You should place `.foot.right` after `.foot.left`.
+
+```js
+assert.exists(document.querySelector('.foot.left + .foot.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
new file mode 100644
index 0000000000..f685b84cb6
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
@@ -0,0 +1,295 @@
+---
+id: 619d1fb5d244c31db8a7fdb7
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`.
+
+# --hints--
+
+You should use the `.foot` selector.
+
+```js
+assert.match(code, /\.foot\s*\{/);
+```
+
+You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%');
+```
+
+You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%');
+```
+
+You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
new file mode 100644
index 0000000000..e26cf4e13a
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
@@ -0,0 +1,288 @@
+---
+id: 619d204bd73ae51e743b8e94
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%');
+```
+
+You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
new file mode 100644
index 0000000000..b4d5cd859d
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
@@ -0,0 +1,304 @@
+---
+id: 619d20b12996101f430920fb
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+The penguin's beak and feet share the same `color`.
+
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-picorna` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna'));
+```
+
+You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange');
+```
+
+You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+  top: 85%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
new file mode 100644
index 0000000000..d2083801b8
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
@@ -0,0 +1,304 @@
+---
+id: 619d21fe6a3f9b2016be9d9d
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent.
+
+# --hints--
+
+You should use the `.foot.left` selector.
+
+```js
+assert.match(code, /\.foot\.left\s*\{/);
+```
+
+You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%');
+```
+
+You should use the `.foot.right` selector.
+
+```js
+assert.match(code, /\.foot\.right\s*\{/);
+```
+
+You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
new file mode 100644
index 0000000000..003b9709c0
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
@@ -0,0 +1,312 @@
+---
+id: 619d229b0e542520cd91c685
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`.
+
+# --hints--
+
+You should give `.foot.left` a `transform` of `rotate(80deg)`.
+
+```js
+const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left');
+
+if (leftFoot?.transform) {
+  assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)');
+} else {
+  assert.equal(leftFoot.getPropVal('rotate', true), '80deg');
+}
+```
+
+You should give `.foot.right` a `transform` of `rotate(-80deg)`.
+
+```js
+const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right');
+
+if (rightFoot?.transform) {
+  assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)');
+} else {
+  assert.equal(rightFoot.getPropVal('rotate', true), '-80deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.foot.left {
+  left: 25%;
+
+}
+
+.foot.right {
+  right: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
new file mode 100644
index 0000000000..ef45038dbc
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
@@ -0,0 +1,295 @@
+---
+id: 619d23089e787e216a7043d6
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element.
+
+# --hints--
+
+You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
new file mode 100644
index 0000000000..906076ce8b
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
@@ -0,0 +1,328 @@
+---
+id: 619d237a107c10221ed743fa
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Fun fact: Penguins cannot fly without wings.
+
+Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4);
+```
+
+You should give the first new `div` a `class` of `arm`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm'));
+```
+
+You should give the second new `div` a `class` of `arm`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.right'));
+```
+
+You should place `.arm.right` after `.arm.left`.
+
+```js
+assert.exists(document.querySelector('.arm.left + .arm.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
new file mode 100644
index 0000000000..94dcb78521
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
@@ -0,0 +1,317 @@
+---
+id: 619d26b12e651022d80cd017
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`.
+
+# --hints--
+
+You should use the `.arm` selector.
+
+```js
+assert.match(code, /\.arm\s*\{/);
+```
+
+You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%');
+```
+
+You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
+
+```js
+assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
new file mode 100644
index 0000000000..a3333bcfba
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
@@ -0,0 +1,332 @@
+---
+id: 619d2712853306238f41828e
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-skin` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin'));
+```
+
+You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))');
+```
+
+You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    gray,
+    rgb(209, 210, 199)
+  );
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
new file mode 100644
index 0000000000..b897e4cc61
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
@@ -0,0 +1,340 @@
+---
+id: 619d2b7a84e78b246f2d17a2
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent.
+
+# --hints--
+
+You should use the `.arm.left` selector.
+
+```js
+assert.match(code, /\.arm\.left\s*\{/);
+```
+
+You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%');
+```
+
+You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%');
+```
+
+You should use the `.arm.right` selector.
+
+```js
+assert.match(code, /\.arm\.right\s*\{/);
+```
+
+You should give `.arm.right` a `top` of `0%`.
+
+```js
+assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top);
+```
+
+You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
new file mode 100644
index 0000000000..a677c9a443
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
@@ -0,0 +1,325 @@
+---
+id: 619d2bd9c1d43c2526e96f1f
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent.
+
+# --hints--
+
+You should use the `transform-origin` property to do this.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`.
+
+```js
+assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
new file mode 100644
index 0000000000..ce148c7f62
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
@@ -0,0 +1,326 @@
+---
+id: 619d2d4e80400325ff89664a
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis.
+
+# --hints--
+
+You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left');
+
+if (leftArm?.rotate && leftArm?.transform) {
+  assert.equal(leftArm.getPropVal('rotate', true), '130deg');
+  assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)');
+} else {
+  assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
new file mode 100644
index 0000000000..7b8d308ed3
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
@@ -0,0 +1,326 @@
+---
+id: 619d2ebc81ba81271460850d
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+Rotate the right arm by `45deg` counterclockwise.
+
+# --hints--
+
+You should give `.arm.right` a `transform` of `rotate(-45deg)`.
+
+```js
+const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right');
+
+if (rightArm?.transform) {
+  assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)');
+} else {
+  assert.equal(rightArm?.getPropVal('rotate', true), '-45deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+--fcc-editable-region--
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
new file mode 100644
index 0000000000..cb6dc37d62
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
@@ -0,0 +1,327 @@
+---
+id: 619d2f0e9440bc27caee1cec
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Fun fact: Most, if not all, flippers are not naturally rectangles.
+
+Give the `.arm` elements' top-left, top-right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`.
+
+# --hints--
+
+You should give `.arm` a `border-radius` of `30% 30% 30% 120%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
new file mode 100644
index 0000000000..81854db2b7
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
@@ -0,0 +1,323 @@
+---
+id: 619d2fd3ff4f772882e3d998
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element.
+
+# --hints--
+
+You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
new file mode 100644
index 0000000000..f11d2a97f4
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
@@ -0,0 +1,333 @@
+---
+id: 619d30350883802921bfcccc
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Now, you are going to use CSS animations to make the penguin wave.
+
+Define a new `@keyframes` named `wave`.
+
+# --hints--
+
+You should define a new `@keyframes` rule.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes'));
+```
+
+You should give the `@keyframes` rule a name of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
new file mode 100644
index 0000000000..3294c31569
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
@@ -0,0 +1,351 @@
+---
+id: 619d324f5915c929f36ae91d
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Give `wave` four waypoints starting at `10%`, and incrementing by `10%`.
+
+# --hints--
+
+You should add a `10%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
+```
+
+You should add a `20%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
+```
+
+You should add a `30%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
+```
+
+You should add a `40%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
+```
+
+You should have 4 waypoints in your keyframe.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
new file mode 100644
index 0000000000..74235426b5
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
@@ -0,0 +1,347 @@
+---
+id: 619d32c7fa21f32aaa91d499
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%');
+const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, '');
+const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
new file mode 100644
index 0000000000..ac97b33ea2
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
@@ -0,0 +1,347 @@
+---
+id: 619d333b738e3c2b5d58b095
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%');
+const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
new file mode 100644
index 0000000000..fd1c9193d0
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
@@ -0,0 +1,362 @@
+---
+id: 619d337765b9f02c10e93722
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+For the third and fourth waypoints, repeat the `transform` pattern once more.
+
+# --hints--
+
+You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%');
+const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%');
+const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
new file mode 100644
index 0000000000..caa7a1fe0a
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
@@ -0,0 +1,357 @@
+---
+id: 619d33c51140292cc5a21742
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function.
+
+# --hints--
+
+You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave');
+```
+
+You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s');
+```
+
+You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite');
+```
+
+You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
new file mode 100644
index 0000000000..e8ab0952d4
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
@@ -0,0 +1,347 @@
+---
+id: 619d3482f505452d861d0f62
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions.
+
+# --hints--
+
+You should use the `.penguin:active` selector.
+
+```js
+assert.match(code, /\.penguin:active\s*\{/);
+```
+
+You should give `.penguin:active` a `transform` of `scale(1.5)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
new file mode 100644
index 0000000000..3530454295
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
@@ -0,0 +1,346 @@
+---
+id: 619d3561a951bf2e41a24f10
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+When you activate the `.penguin` element, it might look as though you can drag it around. This is not true.
+
+Indicate this to users, by giving the active element a `cursor` property of `not-allowed`.
+
+# --hints--
+
+You should give `.penguin:active` a `cursor` property of `not-allowed`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin:active {
+  transform: scale(1.5);
+
+}
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
new file mode 100644
index 0000000000..b2fd620c1f
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
@@ -0,0 +1,357 @@
+---
+id: 619d36103839c82efa95dd34
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`.
+
+# --hints--
+
+You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s');
+```
+
+You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out');
+```
+
+You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+
+}
+--fcc-editable-region--
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
new file mode 100644
index 0000000000..18d3c26b52
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
@@ -0,0 +1,670 @@
+---
+id: 619d3711d04d623000013e9e
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element.
+
+Congratulations! You have completed the Flappy Penguin Workshop.
+
+# --hints--
+
+You should give `.ground` a `height` of `calc(100vh - 300px)`.
+
+```js
+assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: calc(100vh - 300px);
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
new file mode 100644
index 0000000000..9d306c557a
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Normalize your page, by setting the `width` to `100%`, and `height` to `100vh`.
+
+# --hints--
+
+You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
index a718444319..63e5e2c504 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
@@ -17,22 +17,36 @@ gradient-type(
 );
 ```
 
-Rellene `.bb3` con un `repeating-linear-gradient`. Use `90deg` para la dirección, su `building-color3` para los dos primeros colores, y `window-color3` en `15%` para el tercero. Cuando no especifique una distancia para un color, usará los valores que tengan sentido. En este caso, los primeros dos colores serán `0%` y `7.5%` porque comienzan en `0%` y `7.5%` es la mitad del `15%`.
+Rellene `.bb3` con un `repeating-linear-gradient`. Use `90deg` para la dirección, su `building-color3` para los dos primeros colores, y `window-color3` en `15%` para el tercero.
+
+When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`, so you do not need to set them.
 
 # --hints--
 
-Debe dar a `.bb3` un `background` usando `repeating-linear-gradient`.
+You should give `.bb3` a `background` using `repeating-linear-gradient`.
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
 ```
 
-Debe usar `90deg` para la dirección en el primer argumento de `repeating-linear-gradient`.
+You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`.
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
 ```
 
+You should not set the percentage for the first color.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "var(--building-color3)0%");
+```
+
+You should not set the percentage for the second color.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "var(--building-color3)7.5%");
+```
+
 Debe usar `--building-color3` para los dos primeros colores.
 
 ```js
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
index 8bd5182978..88a7f273da 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
@@ -9,7 +9,7 @@ dashedName: step-3
 
 El elemento `p` es usado para crear un párrafo de texto en sitios webs. Crea un elemento `p` debajo de tu elemento `h2` y dale el siguiente texto:
 
-`See more cat photos in our gallery.`
+`Everyone loves cute cats online!`
 
 # --hints--
 
@@ -25,13 +25,13 @@ El elemento `p` debe tener una etiqueta de cierre. Las etiquetas de cierre tiene
 assert(code.match(/<\/p\>/));
 ```
 
-Your `p` element's text should be `See more cat photos in our gallery.` You have either omitted the text or have a typo.
+Your `p` element's text should be `Everyone loves cute cats online!` You have either omitted the text or have a typo.
 
 ```js
 const extraSpacesRemoved = document
   .querySelector('p')
   .innerText.replace(/\s+/g, ' ');
-assert(extraSpacesRemoved.match(/see more cat photos in our gallery\.?$/i));
+assert.match(extraSpacesRemoved, /everyone loves cute cats online!$/i);
 ```
 
 El elemento `p` debe estar debajo del elemento `h2`. Los tienes en el orden incorrecto.
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
index db67ea1ae5..23ef3aa1f1 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
@@ -49,12 +49,9 @@ assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/i));
 Tu comentario debe estar sobre el elemento `p`. Los tienes en el orden incorrecto.
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
-    )
+assert.match(
+  code.replace(/\s/g, ''),
+  /<!--todo:addlinktocatphotos--><p>everyonelovescutecatsonline!<\/p>/i
 );
 ```
 
@@ -69,7 +66,7 @@ assert(
     <h2>Cat Photos</h2>
 --fcc-editable-region--
 
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
index 9e53a6a548..ddc8998c47 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -55,10 +55,8 @@ La etiqueta de cierre del elemento `main` debe estar debajo del elemento `p`. Lo
 ```js
 const mainNode = document.querySelector('main');
 const pNode = document.querySelector('p');
-assert(
-  mainNode.contains(pNode) &&
-    pNode.textContent.toLowerCase().match(/see more cat photos in our gallery/)
-);
+assert.isTrue(mainNode.contains(pNode));
+assert.match(pNode.textContent.toLowerCase(), /everyone loves cute cats online!/);
 ```
 
 # --seed--
@@ -73,7 +71,7 @@ assert(
     <h1>CatPhotoApp</h1>
     <h2>Cat Photos</h2>
     <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 05ddb394a1..93eb228800 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -74,14 +74,14 @@ Tu código debe tener un elemento `p`. Eliminaste el elemento `p` de uno de los
 assert(document.querySelector('p'));
 ```
 
-The text of the `p` element should be `See more cat photos in our gallery.` Do not change the text, spacing, or punctuation of the `p` element.
+The text of the `p` element should be `Everyone loves cute cats online!` Do not change the text, spacing, or punctuation of the `p` element.
 
 ```js
-assert(
+assert.match(
   document
     .querySelector('p')
-    .innerText.toLowerCase()
-    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
+    .innerText.toLowerCase(),
+    /everyone\s+loves\s+cute\s+cats\s+online!$/
 );
 ```
 
@@ -98,12 +98,12 @@ assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
     </main>
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 3a20d9bcbe..9eb9ebd376 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -52,7 +52,7 @@ assert(collection.indexOf('P') < collection.indexOf('IMG'));
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
     </main>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
index cdea774ce1..93f740119b 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
@@ -36,19 +36,19 @@ assert(document.querySelector('img').src);
 El atributo `src` del elemento `img` debe tener el valor "`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`". Probablemente no has añadido la URL o tienes un error tipográfico. La URL debe ser exactamente igual, cuidando mayúsculas y minúsculas.
 
 ```js
-assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
+assert.strictEqual(document.querySelector('img').src, 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
 ```
 
 Aunque le has dado la URL correcta al atributo `src` del elemento `img`, se recomienda siempre poner el valor de un atributo entre comillas.
 
 ```js
-assert(!/\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/);
 ```
 
 Tu elemento `img` debe cerrarse con `>` o `/>`.
 
 ```js
-assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\1\s*\/?>/.test(code));
+assert.match(code, /<img\s+src\s*=\s*("|')\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\s*\1\s*\/?>/);
 ```
 
 # --seed--
@@ -62,7 +62,7 @@ assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img>
 --fcc-editable-region--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
index 9a86aea729..7c83a247f9 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
@@ -54,7 +54,7 @@ assert(altText.match(/A cute orange cat lying on its back\.?$/i));
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
 --fcc-editable-region--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index dcbda19638..f15e445891 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -75,7 +75,7 @@ assert(
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index e6cb3178cf..209e0b0189 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -15,7 +15,7 @@ Aquí tienes un ejemplo de un enlace con el texto `click here to go to freeCodeC
 <a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>
 ```
 
-Añade el texto `link to cat pictures` al elemento anchor. Esto se convertirá en el texto del enlace.
+Add the anchor text `cat photos` to the anchor element. Esto se convertirá en el texto del enlace.
 
 # --hints--
 
@@ -31,12 +31,12 @@ Tu elemento anchor (`a`) debe tener una etiqueta de cierre. Las etiquetas de cie
 assert(code.match(/<\/a\>/));
 ```
 
-El texto de tu elemento anchor (`a`) debería ser `link to cat pictures`. Asegúrate de poner el texto del enlace entre la etiqueta de apertura y etiqueta de cierre del elemento (`a`).
+Your anchor (`a`) element's text should be `cat photos`. Asegúrate de poner el texto del enlace entre la etiqueta de apertura y etiqueta de cierre del elemento (`a`).
 
 ```js
-assert(
-  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
-    'link to cat pictures'
+assert.strictEqual(
+  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' '),
+    'cat photos'
 );
 ```
 
@@ -51,7 +51,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <a href="https://freecatphotoapp.com"></a>
 --fcc-editable-region--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
index 7bed9eec59..f66e541c54 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa2407b521be39a3de7be1
-title: Paso 14
+title: Step 15
 challengeType: 0
-dashedName: step-14
+dashedName: step-15
 ---
 
 # --description--
@@ -25,22 +25,20 @@ Tu elemento `p` debe tener un elemento anchor (`a`) anidado, con el texto `cat p
 
 ```js
 const anchor = document.querySelectorAll('p > a');
-assert(
-  anchor.length &&
-    anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+assert.isNotEmpty(anchor);
+assert.strictEqual(anchor[1]?.innerText?.toLowerCase().replace(/\s+/g, ' '), 'cat photos')
 ```
 
 Tu elemento anchor (`a`) no tiene un atributo `target`. Comprueba que hay un espacio después del nombre de la etiqueta de apertura y/o que hay espacios antes de todos los nombres de los atributos.
 
 ```js
-assert(document.querySelector('a').hasAttribute('target'));
+assert.isTrue(document.querySelectorAll('a')[1]?.hasAttribute('target'));
 ```
 
 El valor del atributo `target` debe ser `_blank`. Has omitido el valor o tienes un error de escritura. Recuerda que los valores de los atributos deben estar entre comillas.
 
 ```js
-assert(document.querySelector('a').getAttribute('target') === '_blank');
+assert.strictEqual(document.querySelectorAll('a')[1]?.getAttribute('target'), '_blank');
 ```
 
 # --seed--
@@ -54,6 +52,7 @@ assert(document.querySelector('a').getAttribute('target') === '_blank');
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
 --fcc-editable-region--
       <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
index 55685f7f08..7f76c4021d 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa30b9eacea3f48c6300ad
-title: Paso 15
+title: Step 17
 challengeType: 0
-dashedName: step-15
+dashedName: step-17
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert(document.querySelectorAll('a').length >= 2);
 Te falta una etiqueta (`a`) de cierre después de la imagen.
 
 ```js
-assert(document.querySelectorAll('a').length === 2);
+assert.lengthOf(document.querySelectorAll('a'), 3);
 ```
 
 Tu elemento anchor (`a`) debe tener una etiqueta de cierre. Las etiquetas de cierre tiene una `/` después del carácter `<`.
@@ -52,7 +52,7 @@ assert(code.match(/<\/a>/g).length >= 2);
 Solo debes añadir una etiqueta anchor (`a`) de cierre. Elimina cualquier extra.
 
 ```js
-assert(code.match(/<\/a>/g).length === 2);
+assert.lengthOf(code.match(/<\/a>/g), 3);
 ```
 
 Tu elemento anchor (`a`) no tiene atributo `href`. Comprueba que hay un espacio después del nombre de la etiqueta de apertura y/o que hay espacios antes de los nombres de los atributos.
@@ -86,7 +86,7 @@ assert(document.querySelector('img').parentNode.nodeName === 'A');
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
index 3e6c445356..81c2b5cd82 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa3589eacea3f48c6300ae
-title: Paso 18
+title: Step 20
 challengeType: 0
-dashedName: step-18
+dashedName: step-20
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
index f8a8db8e32..5b16efebe5 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa371beacea3f48c6300af
-title: Paso 19
+title: Step 21
 challengeType: 0
-dashedName: step-19
+dashedName: step-21
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index e4beb1ddd7..a0fc657fe6 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa37b9eacea3f48c6300b0
-title: Paso 20
+title: Step 22
 challengeType: 0
-dashedName: step-20
+dashedName: step-22
 ---
 
 # --description--
@@ -43,7 +43,7 @@ assert.equal(secondSectionLastElemNode?.nodeName , 'UL');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
index c853860068..e7cc77bd84 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb5ecbeacea3f48c6300b1
-title: Paso 21
+title: Step 23
 challengeType: 0
-dashedName: step-21
+dashedName: step-23
 ---
 
 # --description--
@@ -63,7 +63,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
index ad4819352c..73548529f9 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6250eacea3f48c6300b2
-title: Paso 22
+title: Step 24
 challengeType: 0
-dashedName: step-22
+dashedName: step-24
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert.isTrue(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curricu
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
index 5dd30cc915..a856d7e93e 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb655eeacea3f48c6300b3
-title: Paso 23
+title: Step 25
 challengeType: 0
-dashedName: step-23
+dashedName: step-25
 ---
 
 # --description--
@@ -34,11 +34,7 @@ assert.equal(document.querySelectorAll('section')?.[1]?.lastElementChild?.nodeNa
 El elemento, `img` lasagna, debe estar anidado en el elemento `figure`.
 
 ```js
-assert(
-  document.querySelector('figure > img') &&
-    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
-      'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
-);
+assert.strictEqual(document.querySelector('figure > img')?.src.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg');
 ```
 
 # --seed--
@@ -52,7 +48,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
index d170bf7a9f..70ffc4c763 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6a35eacea3f48c6300b4
-title: Paso 24
+title: Step 26
 challengeType: 0
-dashedName: step-24
+dashedName: step-26
 ---
 
 # --description--
@@ -82,7 +82,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
index 5572e7cc1a..a901c558f7 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d0
-title: Paso 25
+title: Step 27
 challengeType: 0
-dashedName: step-25
+dashedName: step-27
 ---
 
 # --description--
@@ -61,7 +61,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
index 59bbff2701..79012327e4 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d1
-title: Paso 26
+title: Step 28
 challengeType: 0
-dashedName: step-26
+dashedName: step-28
 ---
 
 # --description--
@@ -55,7 +55,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
index d0504c5bb1..d5310d3ea2 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d2
-title: Paso 27
+title: Step 29
 challengeType: 0
-dashedName: step-27
+dashedName: step-29
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert([...document.querySelectorAll('ol')].length == 1);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
index 95edf142e8..72550f098c 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d3
-title: Paso 28
+title: Step 30
 challengeType: 0
-dashedName: step-28
+dashedName: step-30
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert.equal(document.querySelectorAll('main > section')?.[1]?.lastElementChild?
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
index 8c5af05bec..1b1a8a2f5a 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d4
-title: Paso 32
+title: Step 34
 challengeType: 0
-dashedName: step-32
+dashedName: step-34
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
index 9f90c5f29f..7295cfdc2d 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d5
-title: Paso 34
+title: Step 36
 challengeType: 0
-dashedName: step-34
+dashedName: step-36
 ---
 
 # --description--
@@ -67,7 +67,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
index 03fd321504..128b99d8af 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d6
-title: Paso 35
+title: Step 37
 challengeType: 0
-dashedName: step-35
+dashedName: step-37
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
index d77b3307c4..9d9e39b69c 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d7
-title: Paso 36
+title: Step 38
 challengeType: 0
-dashedName: step-36
+dashedName: step-38
 ---
 
 # --description--
@@ -83,7 +83,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
index b8ee463cc3..3bee4b4822 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d8
-title: Paso 37
+title: Step 39
 challengeType: 0
-dashedName: step-37
+dashedName: step-39
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.isTrue(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
index b6000688e5..711c4616e4 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d9
-title: Paso 40
+title: Step 42
 challengeType: 0
-dashedName: step-40
+dashedName: step-42
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
index 43218b22ad..51db344316 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804da
-title: Paso 42
+title: Step 44
 challengeType: 0
-dashedName: step-42
+dashedName: step-44
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
index 506d86886c..f4916eee7a 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804db
-title: Paso 41
+title: Step 43
 challengeType: 0
-dashedName: step-41
+dashedName: step-43
 ---
 
 # --description--
@@ -49,7 +49,7 @@ assert.strictEqual(document.querySelector('input')?.getAttribute('required'), ''
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
index 2100c6cf38..fc33d68728 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dc
-title: Paso 44
+title: Step 46
 challengeType: 0
-dashedName: step-44
+dashedName: step-46
 ---
 
 # --description--
@@ -107,7 +107,7 @@ assert.match(radioInputElem?.nextSibling?.nodeValue?.replace(/\s+/g, ' '), /\s*I
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
index a3a5eefd1a..a49627f3df 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dd
-title: Paso 45
+title: Step 47
 challengeType: 0
-dashedName: step-45
+dashedName: step-47
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
index 6d6787d04c..6430ce2deb 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804de
-title: Paso 48
+title: Step 50
 challengeType: 0
-dashedName: step-48
+dashedName: step-50
 ---
 
 # --description--
@@ -68,9 +68,10 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
index 1f7019fcec..bf6ad575e1 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804df
-title: Paso 46
+title: Step 48
 challengeType: 0
-dashedName: step-46
+dashedName: step-48
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert.match(document.querySelector('input')?.id, /^indoor$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
index ec54daa447..0776f2b799 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e1
-title: Paso 50
+title: Step 52
 challengeType: 0
-dashedName: step-50
+dashedName: step-52
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
index 27b454fc65..f07591cdf1 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e2
-title: Paso 54
+title: Step 56
 challengeType: 0
-dashedName: step-54
+dashedName: step-56
 ---
 
 # --description--
@@ -76,7 +76,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
index 731ebcf6a9..567021e353 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e3
-title: Paso 58
+title: Step 60
 challengeType: 0
-dashedName: step-58
+dashedName: step-60
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
index 12683f1064..53496b57eb 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e5
-title: Paso 61
+title: Step 63
 challengeType: 0
-dashedName: step-61
+dashedName: step-63
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.isFalse(document.querySelectorAll('input[type="checkbox"]')?.[2]?.hasAttr
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
index 685528b070..3b806cd69b 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e7
-title: Paso 62
+title: Step 64
 challengeType: 0
-dashedName: step-62
+dashedName: step-64
 ---
 
 # --description--
@@ -48,7 +48,7 @@ assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
index 8579c6a246..280861224d 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e8
-title: Paso 63
+title: Step 65
 challengeType: 0
-dashedName: step-63
+dashedName: step-65
 ---
 
 # --description--
@@ -23,11 +23,11 @@ Tu elemento `footer` debe tener un elemento `p`. Asegúrate de añadir una etiqu
 assert(document.querySelector('footer > p'));
 ```
 
-Tu elemento `footer` debe tener una etiqueta de cierre. Las etiquetas de cierre tiene una `/` después del carácter `<`.
+Your `p` element should have a closing tag. Las etiquetas de cierre tiene una `/` después del carácter `<`.
 
 ```js
 const pElemClosingTags = code.match(/<\/p\>/g);
-assert(pElemClosingTags && pElemClosingTags.length === 2);
+assert.lengthOf(pElemClosingTags, 3);
 ```
 
 El texto de tu elemento `p` debe ser `No Copyright - freeCodeCamp.org`. Probablemente olvidaste añadir el texto, tienes un error tipográfico o no está entre las etiquetas de apertura y cierre del elemento `p`.
@@ -48,7 +48,7 @@ assert.match(extraSpacesRemoved, /No Copyright - freeCodeCamp\.org$/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
index faa4e7458d..5858848bd4 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e9
-title: Paso 64
+title: Step 66
 challengeType: 0
-dashedName: step-64
+dashedName: step-66
 ---
 
 # --description--
@@ -21,7 +21,7 @@ Tu elemento anchor (`a`) debe tener una etiqueta de cierre. Las etiquetas de cie
 
 ```js
 const aElemClosingTags = code.match(/<\/a\>/g);
-assert(aElemClosingTags && aElemClosingTags.length === 3);
+assert.lengthOf(aElemClosingTags, 4);
 ```
 
 Tu elemento anchor (`a`) debe tener un atributo `href` con el valor `https://www.freecodecamp.org`. Probablemente no has añadido el atributo/valor o tienes un error tipográfico.
@@ -59,7 +59,7 @@ assert.match(pText, /^no copyright - freecodecamp.org$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
index b7cac9f712..524aca3816 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ea
-title: Paso 65
+title: Step 67
 challengeType: 0
-dashedName: step-65
+dashedName: step-67
 ---
 
 # --description--
@@ -54,7 +54,7 @@ assert(noSpaces.match(/\<\/head\>\<body\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
index 2a73254e69..7a59c9584c 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804eb
-title: Paso 66
+title: Step 68
 challengeType: 0
-dashedName: step-66
+dashedName: step-68
 ---
 
 # --description--
@@ -56,7 +56,7 @@ assert(document.title && document.title.toLowerCase() === 'catphotoapp');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
index caf8372a30..6476401f28 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ec
-title: Paso 67
+title: Step 69
 challengeType: 0
-dashedName: step-67
+dashedName: step-69
 ---
 
 # --description--
@@ -44,7 +44,7 @@ assert(extraSpacesRemoved.match(/\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
index 8ed96afc47..de6361d5f7 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ee
-title: Paso 68
+title: Step 70
 challengeType: 0
-dashedName: step-68
+dashedName: step-70
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\<html/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
index 6f46db3d7a..3bdeb2a87d 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
@@ -1,8 +1,8 @@
 ---
 id: 5efada803cbd2bbdab94e332
-title: Paso 29
+title: Step 31
 challengeType: 0
-dashedName: step-29
+dashedName: step-31
 ---
 
 # --description--
@@ -42,16 +42,15 @@ La tercera imagen debe tener un atributo `src` configurado a `https://cdn.freeco
 
 ```js
 const catsImg = document.querySelectorAll('figure > img')[1];
-assert(
-  catsImg &&
-    catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
+assert.strictEqual(
+  catsImg?.src?.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
 );
 ```
 
 Aunque el atributo `src` de la nueva imagen tenga la URL correcta, se recomienda siempre poner entre comillas el valor de un atributo.
 
 ```js
-assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/);
 ```
 
 # --seed--
@@ -65,7 +64,7 @@ assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/ca
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
index 24ba050e68..bb8c021b08 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae0543cbd2bbdab94e333
-title: Paso 30
+title: Step 32
 challengeType: 0
-dashedName: step-30
+dashedName: step-32
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
index 9fe22ad960..4828c53342 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae16e3cbd2bbdab94e334
-title: Paso 31
+title: Step 33
 challengeType: 0
-dashedName: step-31
+dashedName: step-33
 ---
 
 # --description--
@@ -88,7 +88,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
index ec847c895d..519d8cc151 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb23e70dc218d6c85f89b1
-title: Paso 38
+title: Step 40
 challengeType: 0
-dashedName: step-38
+dashedName: step-40
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(!/\<input\s+type\s*=\s*text/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
index 7a06f3dddd..8d268d08e7 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb2c990dc218d6c85f89b2
-title: Paso 43
+title: Step 45
 challengeType: 0
-dashedName: step-43
+dashedName: step-45
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
index c634f315cb..ecf87e5f27 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc4f528d6a74d05e68af74
-title: Paso 56
+title: Step 58
 challengeType: 0
-dashedName: step-56
+dashedName: step-58
 ---
 
 # --description--
@@ -110,7 +110,7 @@ assert.match(code, />\s+<label\s+for\s*=\s*('|")loving/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
index 273e714fd4..25f7a997ee 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc518e8d6a74d05e68af75
-title: Paso 57
+title: Step 59
 challengeType: 0
-dashedName: step-57
+dashedName: step-59
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
index ab27c0b3d5..a60fbf090c 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc54138d6a74d05e68af76
-title: Paso 55
+title: Step 57
 challengeType: 0
-dashedName: step-55
+dashedName: step-57
 ---
 
 # --description--
@@ -34,7 +34,7 @@ assert.match(document.querySelector('input[type="checkbox"]')?.id, /^loving$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
index 7fe9602f86..fad184dbfa 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc575c8d6a74d05e68af77
-title: Paso 59
+title: Step 61
 challengeType: 0
-dashedName: step-59
+dashedName: step-61
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
index 9f7f7dc68d..51345ae4a9 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5f05a1d8e233dff4a68508d8
-title: Paso 47
+title: Step 49
 challengeType: 0
-dashedName: step-47
+dashedName: step-49
 ---
 
 # --description--
@@ -92,7 +92,7 @@ assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
index 4d40db762f..0d17cba044 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07be6ef7412fbad0c5626b
-title: Paso 16
+title: Step 18
 challengeType: 0
-dashedName: step-16
+dashedName: step-18
 ---
 
 # --description--
@@ -40,14 +40,14 @@ El elemento `section` debe estar entre las etiquetas de apertura y cierre del el
 assert(document.querySelector('section').parentNode.nodeName === 'MAIN');
 ```
 
-Los elementos `h2`, comentario, `p` y anchor (`a`) deben estar entre las etiquetas de apertura y cierre del elemento `section`.
+The existing `h2`, comment, two `p` elements, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
 
 ```js
 const childrenOfSection = [...document.querySelector('section').childNodes];
 const foundElements = childrenOfSection.filter((child) => {
   return ['H2', 'A', 'P'].includes(child.nodeName);
 });
-assert(foundElements.length === 3);
+assert.lengthOf(foundElements, 4);
 ```
 
 El elemento `h1` no debe estar anidado en el elemento `section`.
@@ -65,12 +65,12 @@ assert.isFalse(includesH1);
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
 
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
       <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
index 881ddd37cb..ecb92c55bc 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07c98cdb9413cbd4b16750
-title: Paso 17
+title: Step 19
 challengeType: 0
-dashedName: step-17
+dashedName: step-19
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(foundElems.length === 2);
 --fcc-editable-region--
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
index 468405417e..d026b8c27d 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07fb1579dc934717801375
-title: Paso 33
+title: Step 35
 challengeType: 0
-dashedName: step-33
+dashedName: step-35
 ---
 
 # --description--
@@ -62,7 +62,7 @@ assert.lengthOf(document.querySelectorAll('main > section')?.[2]?.children, 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
index 198cde1f32..5683ae781e 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d48e7b435f13ab6550051
-title: Paso 51
+title: Step 53
 challengeType: 0
-dashedName: step-51
+dashedName: step-53
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
index 692be6533e..90e2bf4d30 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4ab1b435f13ab6550052
-title: Paso 52
+title: Step 54
 challengeType: 0
-dashedName: step-52
+dashedName: step-54
 ---
 
 # --description--
@@ -79,7 +79,7 @@ assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
index 35721481c7..9f95f87cde 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4d04b435f13ab6550053
-title: Paso 53
+title: Step 55
 challengeType: 0
-dashedName: step-53
+dashedName: step-55
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
index a658bd34bd..096012a4ea 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a80975fc4bcae0edb3497
-title: Paso 49
+title: Step 51
 challengeType: 0
-dashedName: step-49
+dashedName: step-51
 ---
 
 # --description--
@@ -64,9 +64,10 @@ assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
index 33c2cf6d14..1709c78a2b 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a89f1190aff21ae42105a
-title: Paso 60
+title: Step 62
 challengeType: 0
-dashedName: step-60
+dashedName: step-62
 ---
 
 # --description--
@@ -52,7 +52,7 @@ assert(energeticCheckbox.getAttribute('value').match(/^energetic$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
index 23f570bc5a..a89453667d 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
@@ -1,8 +1,8 @@
 ---
 id: 62bb4009e3458a128ff57d5d
-title: Paso 69
+title: Step 71
 challengeType: 0
-dashedName: step-69
+dashedName: step-71
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
@@ -127,7 +127,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
new file mode 100644
index 0000000000..aa057f8e17
--- /dev/null
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
@@ -0,0 +1,57 @@
+---
+id: 671141d8e32fe934c26fa1be
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Add the words `See more` before the anchor element and `in our gallery` after the anchor element
+
+# --hints--
+
+You should use the existing anchor element, do not create a new one.
+
+```js
+assert.lengthOf(document.querySelectorAll('a'), 1);
+```
+
+You should have the words `See more` before the anchor element.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a>/)
+```
+
+You should have the words `in our gallery` after the anchor element.
+
+```js
+assert.match(code, /<a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+You should have `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery` in your code.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <a href="https://freecatphotoapp.com">cat photos</a>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
new file mode 100644
index 0000000000..78aae1394e
--- /dev/null
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
@@ -0,0 +1,48 @@
+---
+id: 671141f948cbab359e74cc93
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Add `p` tags to turn `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.` into a paragraph.
+
+# --hints--
+
+You should add a `p` element around `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.`.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P);
+assert.strictEqual(P.innerText, "See more cat photos in our gallery.");
+```
+
+You should still have the anchor element inside the new paragraph.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P.querySelector('a'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
new file mode 100644
index 0000000000..57b4139497
--- /dev/null
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -0,0 +1,57 @@
+---
+id: 671141feba228a35cefba82d
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Turn the text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+# --hints--
+
+There should be a new anchor element in the first `p` element.
+
+```js
+assert.exists(document.querySelector('p')?.querySelector('a'));
+```
+
+The anchor text should be `cute cats`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.innerText, "cute cats");
+```
+
+The `href` attrivute of the new anchor element should be `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.href, "https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg");
+```
+
+The text of the `p` element should still be `Everyone loves cute cats online!`.
+
+```js
+assert.strictEqual(document.querySelector('p')?.innerText, "Everyone loves cute cats online!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
new file mode 100644
index 0000000000..7256f63593
--- /dev/null
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
@@ -0,0 +1,47 @@
+---
+id: 671144cdcc01d73f7dd79dc9
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have added the link you can remove the comment.
+
+# --hints--
+
+There should not be any comment in your code.
+
+```js
+assert.notMatch(code, /<!--/);
+assert.notMatch(code, /-->/);
+```
+
+The text `TODO: Add link to cat photos` should not be present anymore.
+
+```js
+assert.notMatch(code, /TODO:?/i)
+assert.notMatch(code, /Add\s*link\s*to\s*cat\s*photos/i)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+--fcc-editable-region--
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
+      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
index f775575da3..c03a45ef7f 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
@@ -1,8 +1,8 @@
 ---
 id: 7cf9b03d81a65668421804c3
-title: Paso 39
+title: Step 41
 challengeType: 0
-dashedName: step-39
+dashedName: step-41
 ---
 
 # --description--
@@ -66,7 +66,7 @@ assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
index 93597f0d81..418e21789b 100644
--- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
+++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
@@ -56,9 +56,29 @@ Rentals are usually stationary services, not something that stops.
 # --scene--
 
 ```json
-{ "setup": { "background": "company2-center.png", "characters": [
-      { "character": "Maria", "position": {"x":50,"y":0,"z":1.5}, "opacity": 0 } ], "audio": { "filename": "1.3-5.mp3", "startTime": 1, "startTimestamp": 37.92, "finishTimestamp": 42.38 } }, "commands": [
-    { "character": "Maria", "opacity": 1, "startTime": 0 },
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {"x":50,"y":0,"z":1.5},
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "1.3-5.mp3",
+      "startTime": 1,
+      "startTimestamp": 37.92,
+      "finishTimestamp": 42.38
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
     {
       "character": "Maria",
       "startTime": 1,
@@ -73,4 +93,6 @@ Rentals are usually stationary services, not something that stops.
       "opacity": 0,
       "startTime": 5.96
     }
-  ] }
+  ]
+}
+```
diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
index d4e08d4892..b7c5edd310 100644
--- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
+++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
@@ -39,9 +39,29 @@ Refers to the act of being introduced to someone for the first time.
 # --scene--
 
 ```json
-{ "setup": { "background": "company1-boardroom.png", "characters": [
-      { "character": "David", "position": {"x":50,"y":0,"z":1.4}, "opacity": 0 } ], "audio": { "filename": "1.2-5.mp3", "startTime": 1, "startTimestamp": 27.38, "finishTimestamp": 29.06 } }, "commands": [
-    { "character": "David", "opacity": 1, "startTime": 0 },
+{
+  "setup": {
+    "background": "company1-boardroom.png",
+    "characters": [
+      {
+        "character": "David",
+        "position": {"x":50,"y":0,"z":1.4},
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "1.2-5.mp3",
+      "startTime": 1,
+      "startTimestamp": 27.38,
+      "finishTimestamp": 29.06
+    }
+  },
+  "commands": [
+    {
+      "character": "David",
+      "opacity": 1,
+      "startTime": 0
+    },
     {
       "character": "David",
       "startTime": 1,
@@ -56,4 +76,6 @@ Refers to the act of being introduced to someone for the first time.
       "opacity": 0,
       "startTime": 3.18
     }
-  ] }
+  ]
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md b/curriculum/challenges/espanol/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
index de059e5235..5fbdf80530 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
@@ -24,13 +24,13 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 # --hints--
 
-You should define a funtion named `maskEmail`.
+You should define a function named `maskEmail`.
 
 ```js
 assert.isFunction(maskEmail);
 ```
 
-The `maskEmail` funtion should take a string, `email` as an argument.
+The `maskEmail` function should take a string, `email` as an argument.
 
 ```js
 assert.match(maskEmail.toString(), /\s*maskEmail\(\s*\w+\s*\)/);
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md b/curriculum/challenges/espanol/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
index cefbcfd944..6ebd40d2b4 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
@@ -15,7 +15,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 1. Define a function called `isLeapYear` that takes a number as an argument.
 2. Outside the function, declare a variable `year` that stores the value of the year you want to check.
-3. Inside the funtion, use an `if/ else` statement or a ternary operator to check if the year is a leap year.
+3. Inside the function, use an `if/ else` statement or a ternary operator to check if the year is a leap year.
 4. To check if the year is a leap year, fulfill the following conditions:
 
    - If the year is divisible by `4`, then it is a leap year.
@@ -34,7 +34,7 @@ You should define a function named `isLeapYear`.
 assert(typeof isLeapYear === 'function');
 ```
 
-The `isLeapYear` funtion should take a number as an argument.
+The `isLeapYear` function should take a number as an argument.
 
 ```js
 assert.match(isLeapYear.toString(), /\s*isLeapYear\(\s*\w+\s*\)/);
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md b/curriculum/challenges/espanol/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
index 6acfdd98ae..4d9e7dd4b5 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
@@ -343,7 +343,7 @@ assert(usesFlex || usesFlexMedia)
                     <div class="desc">
                         <h2>Fast Shipping</h2>
                         <p>
-                            We make sure you recieve your trombone as soon as we have
+                            We make sure you receive your trombone as soon as we have
                             finished making it. We also provide free returns if you are not
                             satisfied.
                         </p>
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md b/curriculum/challenges/espanol/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
index 5b665da693..5c7c054ac9 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
@@ -248,7 +248,7 @@ for (let anchor of anchors) {
         <h1>Discover Italy</h1>
         <p>Art, folklore, food, nature, and more. Choose among our wide selection of guided tours and excursions, and live an unforgettable experience exploring Italy.</p>
         <h2>Packages</h2>
-        <p>We offer an extensive range of holiday solutions to accomodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
+        <p>We offer an extensive range of holiday solutions to accommodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
         <ul>
             <li><a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li>
             <li><a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</a></li>
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md b/curriculum/challenges/espanol/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
index d1fd8eff80..14b1c1a2b6 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
@@ -278,7 +278,7 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
           </li>
           <li>
             <strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat
-            with a high-yeidling American breed, creating a strain that responds
+            with a high-yielding American breed, creating a strain that responds
             well to fertilizer. It goes on to provide 95% of Mexico's wheat.
           </li>
           <li>
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
new file mode 100644
index 0000000000..6ced83e0fe
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
@@ -0,0 +1,121 @@
+---
+id: 670803abcb3e980233da4768
+title: What Are Divs and Spans, and When Should You Use Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-divs-and-spans
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What type of element is a `div` element?
+
+## --answers--
+
+An inline-level element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+An inline-block element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+A block-inline element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+A block-level element.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What kind of an element is a `span` element?
+
+## --answers--
+
+An inline-level element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+---
+
+An inline element.
+
+---
+
+A block element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+---
+
+A block-level element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What should you group using a `div` element?
+
+## --answers--
+
+Block-level content and larger sections.
+
+---
+
+Inline texts and smaller sections.
+
+### --feedback--
+
+Think about related and larger content.
+
+---
+
+The whole HTML content.
+
+### --feedback--
+
+Think about related and larger content.
+
+---
+
+A small chuck of text.
+
+### --feedback--
+
+Think about related and larger content.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
new file mode 100644
index 0000000000..6c660565a2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
@@ -0,0 +1,121 @@
+---
+id: 6708143cab2b583ecd3324f5
+title: What Are Attributes, and How Do They Work?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-attributes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of these best describes a boolean attribute?
+
+## --answers--
+
+They always require a value.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+---
+
+They add JavaScript functionality to your code.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+---
+
+Their presence implies true.
+
+---
+
+They are not different from regular attributes.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What do regular attributes do in HTML?
+
+## --answers--
+
+They provide additional information about an element.
+
+---
+
+They provide the background information about an element.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+---
+
+They are replacements for HTML elements.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+---
+
+They allow developers to toggle a feature on and off.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of these differentiates a boolean attribute from a regular attribute?
+
+## --answers--
+
+A boolean attribute is true and a regular attribute is false.
+
+---
+
+A boolean attribute requires a value but a regular attribute does not.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+---
+
+A boolean attribute provides additional information about an element but a regular attribute does not.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+---
+
+A boolean attribute does not require a value but a regular attribute does.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
new file mode 100644
index 0000000000..4007ac4197
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
@@ -0,0 +1,125 @@
+---
+id: 6708382cf088b216580a9ff1
+title: What Are IDs and Classes, and When Should You Use Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-ids-and-classes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+When should you use an `id` versus a `class`?
+
+## --answers--
+
+Use a `class` when you want a unique identifier that should only apply to one element.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Use an `id` when you need a unique identifier for a specific element, and use a `class` when you want to apply styles or behavior to multiple elements.
+
+---
+
+Use an `id` when you want to style multiple elements consistently across different parts of your webpage.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Use an `id` when you want to apply styles that can be easily overridden by other styles in your CSS.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What happens if you try to use duplicate an `id` in your HTML?
+
+## --answers--
+
+It can lead to unwanted results and issues when trying to apply styles or targeting an element in JavaScript.
+
+---
+
+The program will crash.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Nothing will happen.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+There will be a popup alert message in the browser window.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of the following is NOT a correct value for the `id` attribute?
+
+## --answers--
+
+`id="heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main-heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
new file mode 100644
index 0000000000..3ea5a03c99
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
@@ -0,0 +1,121 @@
+---
+id: 67083868d5fdcb17bf8c14bd
+title: What Are HTML Entities, and What Are Some Common Examples?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-html-entities
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is an HTML entity (character reference)?
+
+## --answers--
+
+A set of Google fonts.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A group of images and captions.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A set of characters used to represent JavaScript code.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A set of characters used to represent a reserved character in HTML.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What are the three types of character references?
+
+## --answers--
+
+Named, Roman and Hexadecimal numeric character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+---
+
+Octal, Named and Binary character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+---
+
+Named, Decimal numeric, and Hexadecimal numeric character references.
+
+---
+
+Asymmetric, Decimal numeric, and Hexadecimal numeric character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which of the following is the correct syntax for a named character reference?
+
+## --answers--
+
+`&amp;`
+
+---
+
+`;amp;`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+---
+
+`&amp>>`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+---
+
+`&amp&`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
new file mode 100644
index 0000000000..7412866fc7
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
@@ -0,0 +1,121 @@
+---
+id: 670838977810401844af6fe0
+title: What Is the Role of the Link Element in HTML, and How Can It Be Used to Link to External Stylesheets?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-link-element-in-html
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the role of the `link` element in HTML?
+
+## --answers--
+
+It specifies the content type of the linked resource.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It determines the visibility of the linked resource on the webpage.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It defines the font size of the linked resource when displayed.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It is used to link to external resources like stylesheets and site icons.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is the role of the `rel` attribute inside the `link` element?
+
+## --answers--
+
+It is used to indicate the language of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+---
+
+It is used to specify the relationship between the linked resource and the HTML document.
+
+---
+
+It is used to define the media type of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+---
+
+It is used to determine the size of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What is a favicon?
+
+## --answers--
+
+A type of JavaScript file used to enhance website functionality.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+---
+
+A type of font used to style text on a website.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+---
+
+A small icon typically displayed in the browser tab next to the site title.
+
+---
+
+A security feature used to prevent cross-site scripting attacks.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
new file mode 100644
index 0000000000..85b77abd45
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
@@ -0,0 +1,121 @@
+---
+id: 670838b10ee87a18e5faff62
+title: What Is the Role of the Script Element in HTML, and How Can It Be Used to Link to External JavaScript Files?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-script-element-in-html
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which attribute is used to link to an external JavaScript file?
+
+## --answers--
+
+The `div` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location/
+
+---
+
+The `defer` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location.
+
+---
+
+The `async` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location.
+
+---
+
+The `src` attribute.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is separation of concerns?
+
+## --answers--
+
+It's about making sure everyone on the team has their own clear responsibilities.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+---
+
+A design principle where you separate your programs into distinct sections and have each section address a separate concern.
+
+---
+
+The act of combining all aspects of a program into a single module for simplicity.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+---
+
+It involves dividing up tasks among team members without considering how they might overlap or affect each other.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which of the following is the correct syntax for linking to an external JavaScript file?
+
+## --answers--
+
+`<script div="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+---
+
+`<script alt="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+---
+
+`<script src="path-to-javascript-file.js"></script>`
+
+---
+
+`<script defer="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
new file mode 100644
index 0000000000..dd0270925c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
@@ -0,0 +1,121 @@
+---
+id: 670838e914096b194b0c51aa
+title: What Is an HTML Boilerplate, and Why Is It Important?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-an-html-boilerplate
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Where would you set the character encoding for your page?
+
+## --answers--
+
+A `meta` element in the `body`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+---
+
+A `head` element in the `body`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+---
+
+A `meta` element in the `head`.
+
+---
+
+In the `DOCTYPE`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Where would you set the language for your page?
+
+## --answers--
+
+In the opening `html` tag.
+
+---
+
+A `meta` element in the `body`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+---
+
+A `head` element in the `body`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+---
+
+A `meta` element in the `head`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+## --video-solution--
+
+1
+
+## --text--
+
+What purpose does a boilerplate serve?
+
+## --answers--
+
+Provides a starting structure for your websites.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+Ensures you are not missing any essential elements.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+Allows you to get started writing the content of your page faster.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+All of the above.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
new file mode 100644
index 0000000000..57fce3537b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
@@ -0,0 +1,120 @@
+---
+id: 670839051794aa19fcef6dc8
+title: What Is UTF-8 Character Encoding and Why Is It Needed?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-utf-8-character-encoding
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+Which attribute is used to set the UTF-8 character encoding for HTML documents?
+
+## --answers--
+
+`pattern`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+---
+
+`content`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+---
+
+`charset`
+
+---
+
+`lang`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is character encoding?
+
+## --answers--
+
+A method computers use to store characters as data.
+
+---
+
+A way to compress text files.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+---
+
+It determines the font used to display text on a screen.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+---
+
+It refers to the process of converting spoken language into written text.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+## --video-solution--
+
+1
+
+## --text--
+
+How many bits are inside of a byte?
+
+## --answers--
+
+1
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+33
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+7
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+8
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
new file mode 100644
index 0000000000..96e393015a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
@@ -0,0 +1,121 @@
+---
+id: 67083952f800051a8a21fcfd
+title: What Is the Role of the Meta Description, and How Does It Affect SEO?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-meta-description
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which element is used to set the description for a web page?
+
+## --answers--
+
+`img`
+
+### --feedback--
+
+Look closely to the title of this video
+
+---
+
+`meta`
+
+---
+
+`slot`
+
+### --feedback--
+
+Look closely to the title of this video
+
+---
+
+`figure`
+
+### --feedback--
+
+Look closely to the title of this video
+
+## --video-solution--
+
+2
+
+## --text--
+
+What does SEO stand for?
+
+## --answers--
+
+Slot Engine Optimization
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Site Enhancement Outreach
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Social Engagement Optimization
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Search Engine Optimization
+
+## --video-solution--
+
+4
+
+## --text--
+
+Where does the page's description typically show up?
+
+## --answers--
+
+Inside the `figure` element.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+---
+
+Inside the `footer` element.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+---
+
+In the search engine results page.
+
+---
+
+In a popup alert message.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
new file mode 100644
index 0000000000..7977b8cc03
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
@@ -0,0 +1,121 @@
+---
+id: 6708396caa00e11b597b3365
+title: What Is the Role of Open Graph Tags, and How Do They Affect SEO?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-open-graph-tags
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What are open graph properties used for?
+
+## --answers--
+
+For embedding interactive multimedia content directly into web pages.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+---
+
+To set how your website's content will be seen on different social media platforms.
+
+---
+
+For generating dynamic pop-up advertisements on websites.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+---
+
+For encrypting sensitive data transmitted between web servers and users' browsers.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What does the `name="og:title"` do in the `meta` element?
+
+## --answers--
+
+It automatically adjusts the font size and style of the webpage title based on user preferences.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It directs the browser to display a specific emoticon or emoji as the title of the webpage.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It causes the webpage to play a specific audio file when the title is displayed in the browser tab.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It specifies the title of your web page content when it is shared on social media platforms.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What does the `property="og:type"` do in the `meta` element?
+
+## --answers--
+
+It selects the page's default font style.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+---
+
+It triggers a pop-up advertisement when the webpage is loaded.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+---
+
+It specifies the type of content used for your web page when it is shared on social media platforms.
+
+---
+
+It changes the webpage's background color based on the user's time zone.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/espanol/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
index 692385ab63..c833584c2d 100644
--- a/curriculum/challenges/espanol/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
+++ b/curriculum/challenges/espanol/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is asynchronous programming?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to execute code in a sequential order.
 
 ---
 
-Placeholder distractor 2
+A technique to handle errors in synchronous code.
 
 ---
 
-Placeholder distractor 3
+A way to guarantee task order.
 
 #### --answer--
 
-Placeholder answer
+A method to execute code concurrently without blocking the main thread.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `async` attribute do when used in a `<script>` tag?
 
 #### --distractors--
 
-Placeholder distractor 1
+It allows the script to be executed after the HTML document has been completely parsed.
 
 ---
 
-Placeholder distractor 2
+It ensures the script runs in a synchronous manner.
 
 ---
 
-Placeholder distractor 3
+It delays the script execution until the browser is idle.
 
 #### --answer--
 
-Placeholder answer
+The script is downloaded in parallel with parsing the page and executed as soon as it is available.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Fetch API in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manage asynchronous callbacks.
 
 ---
 
-Placeholder distractor 2
+To create and manage cookies.
 
 ---
 
-Placeholder distractor 3
+To render dynamic HTML content.
 
 #### --answer--
 
-Placeholder answer
+To make network requests to servers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which `HTTP` method is used to send data to a server for processing?
 
 #### --distractors--
 
-Placeholder distractor 1
+`GET`
 
 ---
 
-Placeholder distractor 2
+`DELETE`
 
 ---
 
-Placeholder distractor 3
+`HEAD`
 
 #### --answer--
 
-Placeholder answer
+`POST`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `res.json()` method do in Express.js?
 
 #### --distractors--
 
-Placeholder distractor 1
+It retrieves data from a JSON file.
 
 ---
 
-Placeholder distractor 2
+It parses a JSON string into a JavaScript object.
 
 ---
 
-Placeholder distractor 3
+It sends raw JSON as a response without any processing.
 
 #### --answer--
 
-Placeholder answer
+It converts a JavaScript object to a JSON string and sends it as a response.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a promise in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to synchronize multiple operations.
 
 ---
 
-Placeholder distractor 2
+A callback function that runs after an operation.
 
 ---
 
-Placeholder distractor 3
+A technique to handle errors in asynchronous code.
 
 #### --answer--
 
-Placeholder answer
+An object that represents the eventual completion (or failure) of an asynchronous operation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does promise chaining allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Execute multiple asynchronous operations in parallel.
 
 ---
 
-Placeholder distractor 2
+Handle synchronous operations more efficiently.
 
 ---
 
-Placeholder distractor 3
+Retry failed operations automatically.
 
 #### --answer--
 
-Placeholder answer
+Pass the result of one promise to the next.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle successful completion of a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.catch()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.then()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle errors in a promise chain?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.then()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.catch()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the use of the `.finally()` method in a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+It returns the result of the promise.
 
 ---
 
-Placeholder distractor 2
+It stops the execution of subsequent promise handlers.
 
 ---
 
-Placeholder distractor 3
+It retries the promise if it fails.
 
 #### --answer--
 
-Placeholder answer
+It executes code after a promise is fulfilled or rejected, regardless of the outcome.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the syntax for declaring an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+`function myFunction() {}`
 
 ---
 
-Placeholder distractor 2
+`function async myFunction() {}`
 
 ---
 
-Placeholder distractor 3
+`async {} => ()`
 
 #### --answer--
 
-Placeholder answer
+`async function myFunction() {}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `await` keyword do in an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+It creates a new promise.
 
 ---
 
-Placeholder distractor 2
+It executes code immediately without waiting.
 
 ---
 
-Placeholder distractor 3
+It returns the result of the promise.
 
 #### --answer--
 
-Placeholder answer
+It pauses the execution of the function until the promise is resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Geolocation API?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manipulate HTML elements.
 
 ---
 
-Placeholder distractor 2
+To create and manage map elements.
 
 ---
 
-Placeholder distractor 3
+To control the device's camera.
 
 #### --answer--
 
-Placeholder answer
+To retrieve the geographical location of a device.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method of the Geolocation API is used to get the current position of the device?
 
 #### --distractors--
 
-Placeholder distractor 1
+`getLocation()`
 
 ---
 
-Placeholder distractor 2
+`getPosition()`
 
 ---
 
-Placeholder distractor 3
+`getLatLong()`
 
 #### --answer--
 
-Placeholder answer
+`getCurrentPosition()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What parameters can be passed to the `getCurrentPosition()` method?
 
 #### --distractors--
 
-Placeholder distractor 1
+Only the success callback function.
 
 ---
 
-Placeholder distractor 2
+Only options.
 
 ---
 
-Placeholder distractor 3
+One the error callback function.
 
 #### --answer--
 
-Placeholder answer
+Success and error callback functions, along with options.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What will the following code return? `fetch('https://api.example.com/data')`
 
 #### --distractors--
 
-Placeholder distractor 1
+The JSON response directly.
 
 ---
 
-Placeholder distractor 2
+An error if the URL is not reachable.
 
 ---
 
-Placeholder distractor 3
+A synchronous response.
 
 #### --answer--
 
-Placeholder answer
+A `Promise` that resolves to a `Response` object
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default HTTP method for the Fetch API?
 
 #### --distractors--
 
-Placeholder distractor 1
+`POST`
 
 ---
 
-Placeholder distractor 2
+`PUT`
 
 ---
 
-Placeholder distractor 3
+`DELETE`
 
 #### --answer--
 
-Placeholder answer
+`GET`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `Promise.all()` method do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resolves a single promise.
 
 ---
 
-Placeholder distractor 2
+It rejects the first promise that fails.
 
 ---
 
-Placeholder distractor 3
+It runs all promises sequentially.
 
 #### --answer--
 
-Placeholder answer
+It executes multiple promises concurrently and returns the results when all are resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you handle multiple asynchronous operations using async/await?
 
 #### --distractors--
 
-Placeholder distractor 1
+You must always use `.then()` for each operation.
 
 ---
 
-Placeholder distractor 2
+You cannot handle multiple operations with async/await.
 
 ---
 
-Placeholder distractor 3
+You must use callback functions for all operations.
 
 #### --answer--
 
-Placeholder answer
+You can use `await` for each operation in sequence and put them inside an async function.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is true about the `fetch` API?
 
 #### --distractors--
 
-Placeholder distractor 1
+It can only handle `GET` requests.
 
 ---
 
-Placeholder distractor 2
+It requires a callback function for handling responses.
 
 ---
 
-Placeholder distractor 3
+It only works in synchronous code.
 
 #### --answer--
 
-Placeholder answer
+It is used to make HTTP requests to a server.
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md b/curriculum/challenges/espanol/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
index b43c4043e7..b6812d1bbf 100644
--- a/curriculum/challenges/espanol/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
+++ b/curriculum/challenges/espanol/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
@@ -381,7 +381,7 @@ Gives animations to the page.
 
 ---
 
-Improves Search Emgine Optimiztion (SEO).
+Improves Search Emgine Optimization (SEO).
 
 #### --answer--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/espanol/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
index 80af1166b6..cac5b80e72 100644
--- a/curriculum/challenges/espanol/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
+++ b/curriculum/challenges/espanol/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What happens when there is too much content to fit in an element box?
 
 #### --distractors--
 
-Placeholder distractor 1
+Underflow
 
 ---
 
-Placeholder distractor 2
+Compression
 
 ---
 
-Placeholder distractor 3
+Padding
 
 #### --answer--
 
-Placeholder answer
+Overflow
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default behavior of CSS when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+Content is hidden
 
 ---
 
-Placeholder distractor 2
+Content is clipped
 
 ---
 
-Placeholder distractor 3
+Content is resized
 
 #### --answer--
 
-Placeholder answer
+Content is visible
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why does CSS typically avoid hiding content when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+To enhance page design by hiding irrelevant content
 
 ---
 
-Placeholder distractor 2
+To save memory and load pages faster
 
 ---
 
-Placeholder distractor 3
+To automatically fix broken layout issues
 
 #### --answer--
 
-Placeholder answer
+To prevent data loss and make issues noticeable
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you handle overflow in CSS to hide content or add scrollbars?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars
 
 ---
 
-Placeholder distractor 2
+Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars
 
 ---
 
-Placeholder distractor 3
+Use `overflow: none` to hide content and `overflow: show` to display scrollbars
 
 #### --answer--
 
-Placeholder answer
+Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you specify different scrolling behaviors for the x-axis and y-axis in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+By using `scroll-x` and `scroll-y` properties
 
 ---
 
-Placeholder distractor 2
+By using `overflow-x` and `overflow-y` separately in every case
 
 ---
 
-Placeholder distractor 3
+By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x`
 
 #### --answer--
 
-Placeholder answer
+By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform` CSS property allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Change the color and font style of an element
 
 ---
 
-Placeholder distractor 2
+Adjust the margin and padding of an element
 
 ---
 
-Placeholder distractor 3
+Modify the visibility and display of an element
 
 #### --answer--
 
-Placeholder answer
+Rotate, scale, skew, or translate an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform-box: fill-box` property do in an animation that rotates an element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resizes the element to fit the canvas during the transformation
 
 ---
 
-Placeholder distractor 2
+It changes the background of the element during transformation
 
 ---
 
-Placeholder distractor 3
+It sets the transform origin to the top-left corner of the element
 
 #### --answer--
 
-Placeholder answer
+It sets the transform origin to the center of the element's bounding box, allowing it to spin in place
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `transform-origin` property in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It controls the animation speed of transformed elements
 
 ---
 
-Placeholder distractor 2
+It defines the display type of transformed elements
 
 ---
 
-Placeholder distractor 3
+It sets the background of transformed elements
 
 #### --answer--
 
-Placeholder answer
+It specifies the point around which a transformation is applied to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does margin affect the size of an element in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Margin increases the actual size of the element's box
 
 ---
 
-Placeholder distractor 2
+Margin has no effect on the element's size or position
 
 ---
 
-Placeholder distractor 3
+Margin decreases the total area the element occupies on the page
 
 #### --answer--
 
-Placeholder answer
+Margin affects the total area an element occupies but is not part of the actual size of the box
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the content area of an element in CSS represent?
 
 #### --distractors--
 
-Placeholder distractor 1
+It defines the margins and padding around the element
 
 ---
 
-Placeholder distractor 2
+It specifies the border thickness of the element
 
 ---
 
-Placeholder distractor 3
+It controls the visibility of the element on the page
 
 #### --answer--
 
-Placeholder answer
+It contains the "real" content of the element, such as text, images, or videos
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the difference between `content-box` and `border-box` in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`content-box` includes padding and border, while `border-box` includes only content dimensions
 
 ---
 
-Placeholder distractor 2
+Both `content-box` and `border-box` include only the border dimensions
 
 ---
 
-Placeholder distractor 3
+`content-box` is used for 2D elements, while `border-box` is used for 3D elements
 
 #### --answer--
 
-Placeholder answer
+`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+To apply default styles to all elements for faster loading
 
 ---
 
-Placeholder distractor 2
+To minimize the size of CSS files by removing unused styles
 
 ---
 
-Placeholder distractor 3
+To optimize images and fonts for better performance
 
 #### --answer--
 
-Placeholder answer
+To remove default browser styling and create a consistent baseline for styling across different browsers
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What are the common types of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bootstrap Reset, Tailwind Reset, and Foundation Reset
 
 ---
 
-Placeholder distractor 2
+Simple Reset, Comprehensive Reset, and Adaptive Reset
 
 ---
 
-Placeholder distractor 3
+Minimal Reset, Advanced Reset, and Legacy Reset
 
 #### --answer--
 
-Placeholder answer
+Normalize.css, Eric Meyer's Reset, and HTML5 Reset
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `scale3d()` property value do in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It rotates an element in 3D space
 
 ---
 
-Placeholder distractor 2
+It skews an element on the x, y, and z axes
 
 ---
 
-Placeholder distractor 3
+It translates an element in 3D space
 
 #### --answer--
 
-Placeholder answer
+It scales an element along the x, y, and z axes
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the total width of an element calculated in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Total width = width + margin + padding + border
 
 ---
 
-Placeholder distractor 2
+Total width = width + margin + padding
 
 ---
 
-Placeholder distractor 3
+Total width = width + margin + border
 
 #### --answer--
 
-Placeholder answer
+Total width = width + left padding + right padding + left border + right border
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the filter property in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the layout of the element on the page
 
 ---
 
-Placeholder distractor 2
+It changes the background color and texture of an element
 
 ---
 
-Placeholder distractor 3
+It alters the size and position of an element
 
 #### --answer--
 
-Placeholder answer
+It applies visual effects like blur and saturation to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the `filter` property specified in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+As only a single function, where percentage values must be used
 
 ---
 
-Placeholder distractor 2
+As `block` or `inline`, with values expressed in pixels
 
 ---
 
-Placeholder distractor 3
+As `none` or multiple functions, but only percentage values are accepted
 
 #### --answer--
 
-Placeholder answer
+As `none` or one or more functions, where percentage values can also be expressed as decimals
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `contrast()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white
 
 ---
 
-Placeholder distractor 2
+Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it
 
 ---
 
-Placeholder distractor 3
+Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque
 
 #### --answer--
 
-Placeholder answer
+Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `hue-rotate()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the brightness of the input image based on degrees
 
 ---
 
-Placeholder distractor 2
+It rotates an element's size and position in the document
 
 ---
 
-Placeholder distractor 3
+It adjusts the saturation and contrast of the input image
 
 #### --answer--
 
-Placeholder answer
+It applies a hue rotation, where the `<angle>` value defines the degrees around the hue color circle
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens when two animated filters have different function list lengths in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+The shorter list's filters override the longer list's filters
 
 ---
 
-Placeholder distractor 2
+The filters are discarded and no animation is applied
 
 ---
 
-Placeholder distractor 3
+Only the first filter function in each list is animated
 
 #### --answer--
 
-Placeholder answer
+The longer list's missing equivalent filter functions are added to the shorter list using their initial values
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md b/curriculum/challenges/espanol/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
index 2f36f50f71..698708ccfd 100644
--- a/curriculum/challenges/espanol/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
+++ b/curriculum/challenges/espanol/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+Which method is used to check if an `input` element's value satisfies the validation rules?
 
 #### --distractors--
 
-Placeholder distractor 1
+`validateInput()`
 
 ---
 
-Placeholder distractor 2
+`isValid()`
 
 ---
 
-Placeholder distractor 3
+`checkValue()`
 
 #### --answer--
 
-Placeholder answer
+`checkValidity()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if the `checkValidity()` method finds an invalid `input`?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is automatically submitted
 
 ---
 
-Placeholder distractor 2
+Nothing happens
 
 ---
 
-Placeholder distractor 3
+The `input` value is cleared
 
 #### --answer--
 
-Placeholder answer
+The browser displays a validation message
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to customize the message shown during validation failure?
 
 #### --distractors--
 
-Placeholder distractor 1
+`setErrorMessage()`
 
 ---
 
-Placeholder distractor 2
+`setValidationMessage()`
 
 ---
 
-Placeholder distractor 3
+`customMessage()`
 
 #### --answer--
 
-Placeholder answer
+`setCustomValidity()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default validation behavior for required fields when the form is submitted?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is submitted even if required fields are empty
 
 ---
 
-Placeholder distractor 2
+The form submits but gives a warning
 
 ---
 
-Placeholder distractor 3
+The form resets the `input` values
 
 #### --answer--
 
-Placeholder answer
+The browser stops the form submission if required fields are empty
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which actions does not cause an HTML form to be checked for errors?
 
 #### --distractors--
 
-Placeholder distractor 1
+Changing the `input` value
 
 ---
 
-Placeholder distractor 2
+Submitting the form
 
 ---
 
-Placeholder distractor 3
+Calling `reportValidity()`
 
 #### --answer--
 
-Placeholder answer
+Clicking a reset button
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does `checkValidity()` return when all form inputs are valid?
 
 #### --distractors--
 
-Placeholder distractor 1
+`false`
 
 ---
 
-Placeholder distractor 2
+`undefined`
 
 ---
 
-Placeholder distractor 3
+`null`
 
 #### --answer--
 
-Placeholder answer
+`true`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When does the `checkValidity()` method stop form submission?
 
 #### --distractors--
 
-Placeholder distractor 1
+When the form has no submit button
 
 ---
 
-Placeholder distractor 2
+When the form `action` is empty
 
 ---
 
-Placeholder distractor 3
+When the form method is POST
 
 #### --answer--
 
-Placeholder answer
+When the form has at least one invalid `input` (and the default behavior of form submission is prevented).
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if `checkValidity()` is called, but a field fails validation?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form submits without error
 
 ---
 
-Placeholder distractor 2
+The `input` values are cleared
 
 ---
 
-Placeholder distractor 3
+The form closes immediately
 
 #### --answer--
 
-Placeholder answer
+The invalid field is highlighted and a message appears
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which action will make `checkValidity()` run?
 
 #### --distractors--
 
-Placeholder distractor 1
+Resetting the form
 
 ---
 
-Placeholder distractor 2
+Changing an `input` value
 
 ---
 
-Placeholder distractor 3
+Clicking an anchor tag
 
 #### --answer--
 
-Placeholder answer
+Submitting the form manually
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of calling `checkValidity()` before submitting a form?
 
 #### --distractors--
 
-Placeholder distractor 1
+To automatically submit the form
 
 ---
 
-Placeholder distractor 2
+To reload the page
 
 ---
 
-Placeholder distractor 3
+To clear all `input` fields
 
 #### --answer--
 
-Placeholder answer
+To check if all `input` elements meet their specified constraints
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the main purpose of `e.preventDefault()`?
 
 #### --distractors--
 
-Placeholder distractor 1
+To reload the form
 
 ---
 
-Placeholder distractor 2
+To clear form data
 
 ---
 
-Placeholder distractor 3
+To reset the form values
 
 #### --answer--
 
-Placeholder answer
+To stop the default action of an event
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When used on a form's submit event, what does `e.preventDefault()` do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It submits the form
 
 ---
 
-Placeholder distractor 2
+It clears all form fields
 
 ---
 
-Placeholder distractor 3
+It disables the form temporarily
 
 #### --answer--
 
-Placeholder answer
+It prevents the form from being submitted
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In which scenario is `e.preventDefault()` most useful?
 
 #### --distractors--
 
-Placeholder distractor 1
+When handling a button click that submits a form
 
 ---
 
-Placeholder distractor 2
+When closing a modal dialog
 
 ---
 
-Placeholder distractor 3
+When opening a new page
 
 #### --answer--
 
-Placeholder answer
+When submitting a form via AJAX and preventing a page reload
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if you forget to call `e.preventDefault()` on a form submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is submitted via AJAX
 
 ---
 
-Placeholder distractor 2
+The form does not submit
 
 ---
 
-Placeholder distractor 3
+The form data is lost
 
 #### --answer--
 
-Placeholder answer
+The form submits and refreshes the page
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which default behavior can be prevented using `e.preventDefault()`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Editing a form
 
 ---
 
-Placeholder distractor 2
+Rendering the form
 
 ---
 
-Placeholder distractor 3
+Reloading the form
 
 #### --answer--
 
-Placeholder answer
+The default behavior caused by submitting a form (e.g., page refresh or POST call).
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What triggers the form's submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+When an input field changes
 
 ---
 
-Placeholder distractor 2
+When the form is reset
 
 ---
 
-Placeholder distractor 3
+When the form's action is cleared
 
 #### --answer--
 
-Placeholder answer
+When a form's submit button is clicked or Enter is pressed
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Where do you usually handle the submit event in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+On a text input element
 
 ---
 
-Placeholder distractor 2
+On any field in the form
 
 ---
 
-Placeholder distractor 3
+On a button element outside the form
 
 #### --answer--
 
-Placeholder answer
+On the form element itself
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the submit event do by default?
 
 #### --distractors--
 
-Placeholder distractor 1
+It validates the form but doesn’t submit it
 
 ---
 
-Placeholder distractor 2
+It clears the form fields
 
 ---
 
-Placeholder distractor 3
+It cancels form submission
 
 #### --answer--
 
-Placeholder answer
+It sends form data to the server specified in the form's action
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which event should you listen for to handle form data when the form is submitted in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+`"input"`
 
 ---
 
-Placeholder distractor 2
+`"change"`
 
 ---
 
-Placeholder distractor 3
+`"focus"`
 
 #### --answer--
 
-Placeholder answer
+`"submit"`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What must be done to prevent the default form submission behavior in the submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+Call `submit.preventDefault()`
 
 ---
 
-Placeholder distractor 2
+Stop the form from being displayed
 
 ---
 
-Placeholder distractor 3
+Set the form's `method` to `"GET"`
 
 #### --answer--
 
-Placeholder answer
+Call `e.preventDefault()`
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md b/curriculum/challenges/espanol/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
index 022a3aef8b..07bda7d052 100644
--- a/curriculum/challenges/espanol/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
+++ b/curriculum/challenges/espanol/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+The Fibonacci sequence is a series where each number is the sum of the two preceding ones, starting with `0` and `1`. The sequence goes: `0, 1, 1, 2, 3, 5, 8, 13, 21...` and so on. What is the best approach to calculate `nth` number in the sequence?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use the formula `fib(n) = fib(n-1) * fib(n-2)`.
 
 ---
 
-Placeholder distractor 2
+Use recursion with memoization to avoid recalculating subproblems where `fib(n) = (n-1) + (n-2)`.
 
 ---
 
-Placeholder distractor 3
+Use a for loop to calculate iteratively where `fib(n) = fib(n-1) + (n-2)`.
 
 #### --answer--
 
-Placeholder answer
+Use recursion with memoization to avoid recalculating subproblems where `fib(n) = fib(n-1) + fib(n-2)`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+A binary string, such as `"1011"`, represents a number in base-2, where each digit corresponds to a power of `2`. What process can be used to convert this binary string into its decimal equivalent?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use the `parseInt()` function with base `10`.
 
 ---
 
-Placeholder distractor 2
+Convert the string to an array, then sum the digits using bitwise operations.
 
 ---
 
-Placeholder distractor 3
+Use the `Number()` function directly with a binary string.
 
 #### --answer--
 
-Placeholder answer
+Multiply each character by powers of `2` and sum them up.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following algorithm will move all zeroes in an array to the end while keeping the order of other elements unchanged? For example, given `[0, 1, 0, 3, 12]`, return `[1, 3, 12, 0, 0]`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Sort the array in decreasing order and place zeros at the start.
 
 ---
 
-Placeholder distractor 2
+Sort the array in ascending order.
 
 ---
 
-Placeholder distractor 3
+Use recursion to remove all zeros and add them to the front.
 
 #### --answer--
 
-Placeholder answer
+Use a two-pointer technique to swap non-zero elements with zero elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a sentence, such as `"I am a frontend engineer"`, what approach can be taken to reverse the order of the words, producing the output `"engineer frontend a am I"`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Split the string into words using `split(" ")`, reverse the array, and join it back into a string using `join("_")`.
 
 ---
 
-Placeholder distractor 2
+Sort the words alphabetically and return the result.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to reverse each word.
 
 #### --answer--
 
-Placeholder answer
+Split the string into words using `split(" ")`, reverse the array, and join it back into a string using `join(" ")`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a string, what approach would be used to find the first non-repeating character? For example, in the string `"codecamp"`, it would be `'o'`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Sort the string and check for consecutive duplicates.
 
 ---
 
-Placeholder distractor 2
+Convert the string to an array, then filter for unique elements.
 
 ---
 
-Placeholder distractor 3
+Use a regular expression to find the first non-repeat.
 
 #### --answer--
 
-Placeholder answer
+Iterate over the string twice, once to count number of occurrences and once to find the first unique character.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach can be used to encode a string by counting consecutive repeated characters? For example, given the input`"mississippi"`, the output should be `"m1i1s2i1s2i1p2i1"`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Use regular expressions to match repeated characters.
 
 ---
 
-Placeholder distractor 2
+Use `map()` to map consecutive characters to the output.
 
 ---
 
-Placeholder distractor 3
+Sort the string and count occurrences.
 
 #### --answer--
 
-Placeholder answer
+Iterate through the string, counting consecutive occurrences of each character while building the answer.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach can be used to reverse the digits of an integer? For example, given the input `1234`, the output should be `4321`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Use bitwise operations to reverse the digits.
 
 ---
 
-Placeholder distractor 2
+Convert the integer to a binary number and reverse it.
 
 ---
 
-Placeholder distractor 3
+Use the `reverse()` method directly on the integer.
 
 #### --answer--
 
-Placeholder answer
+Use a loop to extract digits from the integer and reconstruct the reversed integer.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach would be used to generate Pascal's Triangle up to `n` rows? For example, for `n = 3`, the result would be `[[1], [1, 1], [1, 2, 1]]`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Generate rows by using a function that outputs prime numbers and maps them to each row.
 
 ---
 
-Placeholder distractor 2
+Use a loop to generate each row by multiplying adjacent elements from the previous row.
 
 ---
 
-Placeholder distractor 3
+Use `Math.random()` to generate the rows.
 
 #### --answer--
 
-Placeholder answer
+Use a loop to generate each row by adding adjacent elements from the previous row.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which algorithm is most efficient for sorting an array of size `n` containing numbers from `1` to `n`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bubble Sort
 
 ---
 
-Placeholder distractor 2
+Merge Sort
 
 ---
 
-Placeholder distractor 3
+Quick Sort
 
 #### --answer--
 
-Placeholder answer
+Cyclic Sort
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which algorithmic approach is best for solving the problem of finding the minimum number of coins for a given amount when only one type of coin is provided?
 
 #### --distractors--
 
-Placeholder distractor 1
+Dynamic Programming
 
 ---
 
-Placeholder distractor 2
+Divide and Conquer
 
 ---
 
-Placeholder distractor 3
+Backtracking
 
 #### --answer--
 
-Placeholder answer
+Greedy Algorithm
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following problems can be solved efficiently using the two-pointer technique?
 
 #### --distractors--
 
-Placeholder distractor 1
+Sorting an array.
 
 ---
 
-Placeholder distractor 2
+Traversing a tree level by level.
 
 ---
 
-Placeholder distractor 3
+Finding the middle element of a linked list.
 
 #### --answer--
 
-Placeholder answer
+Finding two numbers in a sorted array that sum up to a target value.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a Roman numeral string, convert it to its corresponding integer value. For example, `"IX"` should return `9`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Parse the string from left to right and add the values of individual numerals.
 
 ---
 
-Placeholder distractor 2
+Parse each character and multiply by its index.
 
 ---
 
-Placeholder distractor 3
+Use the `parseInt()` function on the Roman numeral string.
 
 #### --answer--
 
-Placeholder answer
+Parse the string from right to left, adding the values of individual numerals and subtracting when a smaller numeral comes before a larger numeral.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can one check if a given string is a palindrome (the same forwards and backwards), for example `"madam"`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use Slow and Fast Pointer.
 
 ---
 
-Placeholder distractor 2
+Compare it to its reverse after sorting the string.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to remove all non-alphabetic characters and check equality.
 
 #### --answer--
 
-Placeholder answer
+Compare the string to its reverse.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a number `n`, write a function that prints numbers from `1` to `n`. For multiples of `3`, print `"Fizz"` for multiples of `5`, print `"Buzz"` and for multiples of both `3` and `5`, print `"FizzBuzz"`. What is the simplest approach to this?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `Math.random()` to generate numbers between `1` and `n` and check the result.
 
 ---
 
-Placeholder distractor 2
+Use a for loop and check divisibility in-order of `3`, `5` and `15` with if conditions or switch.
 
 ---
 
-Placeholder distractor 3
+Create a recursive function that checks divisibility by `3` and `5`.
 
 #### --answer--
 
-Placeholder answer
+Use a for loop and check divisibility in-order of `15`, `5` and `3` with if conditions or switch.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+The Caesar cipher is a simple encryption technique where each letter in a string is shifted forward by a fixed number of positions in the alphabet. How would you shift all letters in a string by `3` positions?
 
 #### --distractors--
 
-Placeholder distractor 1
+Subtract `3` from the ASCII value of each character.
 
 ---
 
-Placeholder distractor 2
+Replace each vowel with the next consonant.
 
 ---
 
-Placeholder distractor 3
+Add `3` to the ASCII value of each character, but only for uppercase letters.
 
 #### --answer--
 
-Placeholder answer
+Add `3` to the ASCII value of each character, wrapping around for `'z'` and `'Z'`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Anagrams are words formed by rearranging letters of another word. How can one determine if two strings are anagrams?
 
 #### --distractors--
 
-Placeholder distractor 1
+Compare total number of letters in both strings.
 
 ---
 
-Placeholder distractor 2
+Reverse one string and compare with the other.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to remove duplicate letters and check equality.
 
 #### --answer--
 
-Placeholder answer
+Sort both strings and check if they are equal.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is the correct approach to check if a given number is prime?
 
 #### --distractors--
 
-Placeholder distractor 1
+Check if the number is divisible by `2` and `3`. If not, it's prime.
 
 ---
 
-Placeholder distractor 2
+Check if the number is divisible by any odd number between `3` and the square root of the number.
 
 ---
 
-Placeholder distractor 3
+Convert the number to binary and check if it has exactly two 1s.
 
 #### --answer--
 
-Placeholder answer
+Loop from `2` to up to the square root of the prime candidate, and make sure none of the number divides it evenly.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following describes the correct approach to find the greatest common divisor (GCD) of two numbers?
 
 #### --distractors--
 
-Placeholder distractor 1
+Find the average of the two numbers and round to the nearest integer.
 
 ---
 
-Placeholder distractor 2
+Multiply the two numbers together and then divide by their least common divisor.
 
 ---
 
-Placeholder distractor 3
+Add the two numbers together and divide by `2`.
 
 #### --answer--
 
-Placeholder answer
+Use recursion where `gcd(a, b) = gcd(b, a % b)` where the base case would be to return first parameter when second parameter is zero.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+The factorial of a non-negative integer `n` (denoted `n!`) is the product of all positive integers from `1` to `n`, with `0! = 1`. Which of the following approaches can be used to calculate the factorial of a given number `n`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Add the numbers from `1` to `n`.
 
 ---
 
-Placeholder distractor 2
+Raise `n` to the power of `n-1`.
 
 ---
 
-Placeholder distractor 3
+Find the prime factorization of n and then multiply the prime factors together.
 
 #### --answer--
 
-Placeholder answer
+Multiplying numbers from `1` to `n` in a loop.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is the most efficient approach to search for a given integer within a distinct, sorted array of integers?
 
 #### --distractors--
 
-Placeholder distractor 1
+Linear Search.
 
 ---
 
-Placeholder distractor 2
+Sort the array and search using Linear Search.
 
 ---
 
-Placeholder distractor 3
+Create a hash table with the array elements and check for the given integer.
 
 #### --answer--
 
-Placeholder answer
+Binary Search.
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md b/curriculum/challenges/espanol/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
index bf02c6d126..30b6619cac 100644
--- a/curriculum/challenges/espanol/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
+++ b/curriculum/challenges/espanol/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
@@ -83,7 +83,7 @@ Type `nano [FILE]`, then press the **Enter** key
 
 #### --text--
 
-What type of files is nano capable of creating and modifiying?
+What type of files is nano capable of creating and modifying?
 
 #### --distractors--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md b/curriculum/challenges/espanol/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
index fb4f4e6437..f73b3b9e1d 100644
--- a/curriculum/challenges/espanol/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
+++ b/curriculum/challenges/espanol/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
@@ -17,439 +17,440 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+How do you handle a click event in a React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<button onClick='handleClick()'>Click me</button>`
 
 ---
 
-Placeholder distractor 2
+`<button onClick={() => handleClick}>Click me</button>`
 
 ---
 
-Placeholder distractor 3
+`<button click={handleClick}>Click me</button>`
 
 #### --answer--
 
-Placeholder answer
+`<button onClick={handleClick}>Click me</button>`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is NOT a method for conditional rendering in React?
 
 #### --distractors--
 
-Placeholder distractor 1
+Ternary operators
 
 ---
 
-Placeholder distractor 2
+Logical `&&` operator
 
 ---
 
-Placeholder distractor 3
+`switch` statements
 
 #### --answer--
 
-Placeholder answer
+`setTimeout`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does `<React.Fragment>` do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Wraps components with adding extra DOM nodes.
 
 ---
 
-Placeholder distractor 2
+Creates a new HTML element.
 
 ---
 
-Placeholder distractor 3
+Deletes an existing element.
 
 #### --answer--
 
-Placeholder answer
+Wraps components without adding extra DOM nodes.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of React Context?
 
 #### --distractors--
 
-Placeholder distractor 1
+Managing component styles.
 
 ---
 
-Placeholder distractor 2
+Passing data through the component.
 
 ---
 
-Placeholder distractor 3
+Controlling component re-renders.
 
 #### --answer--
 
-Placeholder answer
+Passing data through the component tree without props.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is TRUE about JSX?
 
 #### --distractors--
 
-Placeholder distractor 1
+JSX must always be written in separate files from JavaScript.
 
 ---
 
-Placeholder distractor 2
+JSX cannot use JavaScript expressions.
 
 ---
 
-Placeholder distractor 3
+JSX is not recommended for React applications.
 
 #### --answer--
 
-Placeholder answer
+JSX allows writing HTML within JavaScript code.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a con of using Vanilla JS instead of a framework?
 
 #### --distractors--
 
-Placeholder distractor 1
+Automatic state management.
 
 ---
 
-Placeholder distractor 2
+Built-in routing capabilities.
 
 ---
 
-Placeholder distractor 3
+Declarative UI rendering.
 
 #### --answer--
 
-Placeholder answer
+Increased verbosity and manual DOM manipulation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a single-page application typically update the view?
 
 #### --distractors--
 
-Placeholder distractor 1
+By making a full server reload.
 
 ---
 
-Placeholder distractor 2
+By reloading the entire HTML document.
 
 ---
 
-Placeholder distractor 3
+By using server-side rendering only.
 
 #### --answer--
 
-Placeholder answer
+By updating only the necessary parts of the page.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to create a functional React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+Using classes only.
 
 ---
 
-Placeholder distractor 2
+Using the `React.Component` only.
 
 ---
 
-Placeholder distractor 3
+Using JavaScript constructors.
 
 #### --answer--
 
-Placeholder answer
+Using the `function` keyword or arrow functions.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is not a valid JSX element?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<div className='class'></div>`
 
 ---
 
-Placeholder distractor 2
+`<span>Hello World</span>`
 
 ---
 
-Placeholder distractor 3
+`<button>Click Me</button>`
 
 #### --answer--
 
-Placeholder answer
+`<img class='img'>`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is an example of a meta framework for React?
 
 #### --distractors--
 
-Placeholder distractor 1
+Vue.js
 
 ---
 
-Placeholder distractor 2
+Angular
 
 ---
 
-Placeholder distractor 3
+Svelte
 
 #### --answer--
 
-Placeholder answer
+Next.js
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What tool would you use to bootstrap a new React project?
 
 #### --distractors--
 
-Placeholder distractor 1
+Webpack
 
 ---
 
-Placeholder distractor 2
+npm
 
 ---
 
-Placeholder distractor 3
+Babel
 
 #### --answer--
 
-Placeholder answer
+Vite
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command installs dependencies listed in `package.json`?
 
 #### --distractors--
 
-Placeholder distractor 1
+`npm run`
 
 ---
 
-Placeholder distractor 2
+`npm update`
 
 ---
 
-Placeholder distractor 3
+`npm build`
 
 #### --answer--
 
-Placeholder answer
+`npm install`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How would you pass a `name` prop to a child component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<ChildComponent props="name" />`
 
 ---
 
-Placeholder distractor 2
+`<ChildComponent {props} />`
 
 ---
 
-Placeholder distractor 3
+`<ChildComponent {'John'} />`
 
 #### --answer--
 
-Placeholder answer
+`<ChildComponent name="Vignesh" />`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to conditionally render a component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<Home/>`
 
 ---
 
-Placeholder distractor 2
+`<Home>isLoggedIn</Home>`
 
 ---
 
-Placeholder distractor 3
+`<Home showIf={isLoggedIn} />`
 
 #### --answer--
 
-Placeholder answer
+`{isLoggedIn ? <Home /> : <Login />}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a child component, how do you access the `name` prop passed from a parent component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`this.props.name`
 
 ---
 
-Placeholder distractor 2
+`this.name`
 
 ---
 
-Placeholder distractor 3
+`{props}.name`
 
 #### --answer--
 
-Placeholder answer
+`props.name`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to add an inline style in React?
 
 #### --distractors--
 
-Placeholder distractor 1
+`style={{ color: blue }}`
 
 ---
 
-Placeholder distractor 2
+`style="color: blue"`
 
 ---
 
-Placeholder distractor 3
+`style: { color: 'blue' }`
 
 #### --answer--
 
-Placeholder answer
+`style={{ color: 'blue' }}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to conditionally render a React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+Using `if` statements inside JSX.
 
 ---
 
-Placeholder distractor 2
+Declaring a new component inside a `render()` method.
 
 ---
 
-Placeholder distractor 3
+Using `while` loops inside JSX.
 
 #### --answer--
 
-Placeholder answer
+Using ternary operators or logical `&&` operators within JSX.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What causes a React component to re-render?
 
 #### --distractors--
 
-Placeholder distractor 1
+Directly modifying the state variable.
 
 ---
 
-Placeholder distractor 2
+Calling the `render()` method.
 
 ---
 
-Placeholder distractor 3
+Recompiling the project.
 
 #### --answer--
 
-Placeholder answer
+Changing the state using `setState`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How would you specify a required `name` prop using `PropTypes`?
 
 #### --distractors--
 
-Placeholder distractor 1
+`name: PropTypes.bool`
 
 ---
 
-Placeholder distractor 2
+`name: PropTypes.array.isRequired`
 
 ---
 
-Placeholder distractor 3
+`name: PropTypes.string`
 
 #### --answer--
 
-Placeholder answer
+`name: PropTypes.string.isRequired`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What file is used to define project dependencies in a React/Node.js project?
 
 #### --distractors--
 
-Placeholder distractor 1
+`package.lock.json`
 
 ---
 
-Placeholder distractor 2
+`index.html`
 
 ---
 
-Placeholder distractor 3
+`webpack.config.js`
 
 #### --answer--
 
-Placeholder answer
+`package.json`
+
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/espanol/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
index 79e4cb7a88..6855b5dea7 100644
--- a/curriculum/challenges/espanol/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
+++ b/curriculum/challenges/espanol/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A database structured to recognize non-relation between stored items.
 
 ---
 
-Placeholder distractor 2
+A database that stores unstructured data.
 
 ---
 
-Placeholder distractor 3
+A flat file-based system.
 
 #### --answer--
 
-Placeholder answer
+A database structured to recognize relations between stored items.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a non-relational database differ from a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Non-relational databases use tables, while relational databases do not.
 
 ---
 
-Placeholder distractor 2
+Relational databases can store unstructured data.
 
 ---
 
-Placeholder distractor 3
+Non-relational databases are slower than relational databases.
 
 #### --answer--
 
-Placeholder answer
+Non-relational databases can store unstructured data.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `\l` command do when executed in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all schemas
 
 ---
 
-Placeholder distractor 2
+Lists all tables
 
 ---
 
-Placeholder distractor 3
+Connects to a database
 
 #### --answer--
 
-Placeholder answer
+Lists all databases
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following commands creates a new table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD TABLE`
 
 ---
 
-Placeholder distractor 2
+`NEW TABLE`
 
 ---
 
-Placeholder distractor 3
+`ALTER TABLE`
 
 #### --answer--
 
-Placeholder answer
+`CREATE TABLE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of a foreign key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To allow duplication of data.
 
 ---
 
-Placeholder distractor 2
+To uniquely identify a row in the table.
 
 ---
 
-Placeholder distractor 3
+To store large amounts of text data.
 
 #### --answer--
 
-Placeholder answer
+To create a relationship between two tables.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command will add a new column to an existing table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD COLUMN column_name TO table_name data_type;`
 
 ---
 
-Placeholder distractor 2
+`INSERT COLUMN column_name INTO table_name data_type;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name ADD COLUMN column_name data_type;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name ADD COLUMN column_name data_type;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What type of relationship exists when one record in Table A corresponds to one or more records in Table B?
 
 #### --distractors--
 
-Placeholder distractor 1
+One-to-One (1-1)
 
 ---
 
-Placeholder distractor 2
+Many-to-Many (m-m)
 
 ---
 
-Placeholder distractor 3
+Many-to-one(m-1)
 
 #### --answer--
 
-Placeholder answer
+One-to-Many (1-m)
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary purpose of normalization in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To increase the speed of data retrieval.
 
 ---
 
-Placeholder distractor 2
+To enforce security measures.
 
 ---
 
-Placeholder distractor 3
+To simplify the database schema.
 
 #### --answer--
 
-Placeholder answer
+To eliminate data redundancy and ensure data integrity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you delete a column from a table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 2
+`DELETE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name DELETE column_name;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name DROP COLUMN column_name;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the function of the `PRIMARY KEY` constraint in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+To link two tables together.
 
 ---
 
-Placeholder distractor 2
+To define the default value for a column.
 
 ---
 
-Placeholder distractor 3
+To allow null values in the column.
 
 #### --answer--
 
-Placeholder answer
+To ensure that the column contains unique values.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the command `\c` do in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all tables in the current database.
 
 ---
 
-Placeholder distractor 2
+Displays the current database connection details.
 
 ---
 
-Placeholder distractor 3
+Exits the `psql` shell.
 
 #### --answer--
 
-Placeholder answer
+Connects to the specified database.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command inserts data into a table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`PUT VALUES`
 
 ---
 
-Placeholder distractor 2
+`UPDATE INTO`
 
 ---
 
-Placeholder distractor 3
+`ADD DATA`
 
 #### --answer--
 
-Placeholder answer
+`INSERT INTO`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you rename a column in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`MODIFY COLUMN`
 
 ---
 
-Placeholder distractor 2
+`CHANGE COLUMN`
 
 ---
 
-Placeholder distractor 3
+`ALTER COLUMN`
 
 #### --answer--
 
-Placeholder answer
+`RENAME COLUMN`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which query will delete all records from the employees table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE ALL`
 
 ---
 
-Placeholder distractor 2
+`TRUNCATE employees`
 
 ---
 
-Placeholder distractor 3
+`DROP RECORDS`
 
 #### --answer--
 
-Placeholder answer
+`DELETE FROM employees`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which SQL constraint specifically ensures that a column can contain only unique values, allowing nulls?
 
 #### --distractors--
 
-Placeholder distractor 1
+`NOT NULL`
 
 ---
 
-Placeholder distractor 2
+`FOREIGN KEY`
 
 ---
 
-Placeholder distractor 3
+`PRIMARY KEY`
 
 #### --answer--
 
-Placeholder answer
+`UNIQUE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a relational database, what is an index used for?
 
 #### --distractors--
 
-Placeholder distractor 1
+To store additional metadata about tables.
 
 ---
 
-Placeholder distractor 2
+To ensure unique values in a column.
 
 ---
 
-Placeholder distractor 3
+To enforce data integrity.
 
 #### --answer--
 
-Placeholder answer
+To speed up data retrieval.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does a one-to-one (1-1) relationship represent in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Each record in Table A corresponds to one or more records in Table B.
 
 ---
 
-Placeholder distractor 2
+Each record in Table A corresponds to no records in Table B.
 
 ---
 
-Placeholder distractor 3
+Each record in Table A corresponds to multiple records in Table B and vice versa.
 
 #### --answer--
 
-Placeholder answer
+Each record in Table A corresponds to exactly one record in Table B.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command will list all tables in the current PostgreSQL database?
 
 #### --distractors--
 
-Placeholder distractor 1
+`\l`
 
 ---
 
-Placeholder distractor 2
+`SHOW TABLES`
 
 ---
 
-Placeholder distractor 3
+`\t`
 
 #### --answer--
 
-Placeholder answer
+`\d`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md b/curriculum/challenges/espanol/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
index 6a4965d122..af439d1aab 100644
--- a/curriculum/challenges/espanol/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
+++ b/curriculum/challenges/espanol/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What CSS property is commonly used to create a flexible layout in a container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`display: block;`
 
 ---
 
-Placeholder distractor 2
+`display: inline;`
 
 ---
 
-Placeholder distractor 3
+`display: table;`
 
 #### --answer--
 
-Placeholder answer
+`display: flex;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the main purpose of media queries in responsive web design?
 
 #### --distractors--
 
-Placeholder distractor 1
+To change the color scheme of the page.
 
 ---
 
-Placeholder distractor 2
+To create animations.
 
 ---
 
-Placeholder distractor 3
+To adjust margins for print pages.
 
 #### --answer--
 
-Placeholder answer
+To apply different styles based on the screen size or device type.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which media feature in a media query checks the width of the browser window?
 
 #### --distractors--
 
-Placeholder distractor 1
+`min-height`
 
 ---
 
-Placeholder distractor 2
+`max-aspect-ratio`
 
 ---
 
-Placeholder distractor 3
+`resolution`
 
 #### --answer--
 
-Placeholder answer
+`min-width`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which CSS unit is relative to the width of the viewport?
 
 #### --distractors--
 
-Placeholder distractor 1
+`em`
 
 ---
 
-Placeholder distractor 2
+`px`
 
 ---
 
-Placeholder distractor 3
+`rem`
 
 #### --answer--
 
-Placeholder answer
+`vw`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does mobile-first design emphasize?
 
 #### --distractors--
 
-Placeholder distractor 1
+Designing for desktops and scaling down for smaller devices.
 
 ---
 
-Placeholder distractor 2
+Using only desktop breakpoints.
 
 ---
 
-Placeholder distractor 3
+Focusing on the highest resolution devices first.
 
 #### --answer--
 
-Placeholder answer
+Designing for smaller screens first and scaling up for larger devices.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which media query will apply styles when the device's width is between 600px and 1200px?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 1200px)`
 
 ---
 
-Placeholder distractor 2
+`@media screen and (min-width: 600px)`
 
 ---
 
-Placeholder distractor 3
+`@media screen and (width: 800px)`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 600px) and (max-width: 1200px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default flex-direction value in Flexbox?
 
 #### --distractors--
 
-Placeholder distractor 1
+`column`
 
 ---
 
-Placeholder distractor 2
+`row-reverse`
 
 ---
 
-Placeholder distractor 3
+`column-reverse`
 
 #### --answer--
 
-Placeholder answer
+`row`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In Flexbox, how do you distribute space between items in a container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`align-items`
 
 ---
 
-Placeholder distractor 2
+`flex-grow`
 
 ---
 
-Placeholder distractor 3
+`flex-wrap`
 
 #### --answer--
 
-Placeholder answer
+`justify-content`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you apply a grid layout to a container in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`display: flexbox;`
 
 ---
 
-Placeholder distractor 2
+`display: block;`
 
 ---
 
-Placeholder distractor 3
+`display: table;`
 
 #### --answer--
 
-Placeholder answer
+`display: grid;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `fr` unit represent in CSS Grid?
 
 #### --distractors--
 
-Placeholder distractor 1
+Flexible ratio
 
 ---
 
-Placeholder distractor 2
+Frame ratio
 
 ---
 
-Placeholder distractor 3
+Fixed region
 
 #### --answer--
 
-Placeholder answer
+Fraction of available space
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is a valid media query for targeting devices with a resolution of 2x or higher?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media (resolution: 2x)`
 
 ---
 
-Placeholder distractor 2
+`@media (max-resolution: 2x)`
 
 ---
 
-Placeholder distractor 3
+`@media screen and (min-width: 1200px)`
 
 #### --answer--
 
-Placeholder answer
+`@media (min-resolution: 2px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which property controls the number of columns in a grid container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`grid-template-rows`
 
 ---
 
-Placeholder distractor 2
+`grid-auto-rows`
 
 ---
 
-Placeholder distractor 3
+`grid-template`
 
 #### --answer--
 
-Placeholder answer
+`grid-template-columns`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you set up a media query for screens larger than 768px?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 768px)`
 
 ---
 
-Placeholder distractor 2
+`@media only screen and (width > 768px)`
 
 ---
 
-Placeholder distractor 3
+`@media (screen-width: 768px)`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 768px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `flex-wrap` property in Flexbox?
 
 #### --distractors--
 
-Placeholder distractor 1
+To align items along the cross axis.
 
 ---
 
-Placeholder distractor 2
+To reverse the order of flex items.
 
 ---
 
-Placeholder distractor 3
+To distribute space evenly between items.
 
 #### --answer--
 
-Placeholder answer
+To allow flex items to wrap onto multiple lines.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following breakpoints is commonly used for tablets in responsive web design?
 
 #### --distractors--
 
-Placeholder distractor 1
+`480px`
 
 ---
 
-Placeholder distractor 2
+`1920px`
 
 ---
 
-Placeholder distractor 3
+`2560px`
 
 #### --answer--
 
-Placeholder answer
+`768px`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you center an item horizontally in a flex container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`align-items: center;`
 
 ---
 
-Placeholder distractor 2
+`flex-direction: row;`
 
 ---
 
-Placeholder distractor 3
+`flex-grow: 1;`
 
 #### --answer--
 
-Placeholder answer
+`justify-content: center;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In mobile-first design, which media query should be used to target larger screens?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 600px)`
 
 ---
 
-Placeholder distractor 2
+`@media screen and (height: 600px)`
 
 ---
 
-Placeholder distractor 3
+`@media only screen`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 600px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which CSS property is used to create a layout that adjusts based on screen size without media queries?
 
 #### --distractors--
 
-Placeholder distractor 1
+`float`
 
 ---
 
-Placeholder distractor 2
+`display: block`
 
 ---
 
-Placeholder distractor 3
+`width: 100%`
 
 #### --answer--
 
-Placeholder answer
+`flex`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you prevent a flex container from shrinking smaller than its content?
 
 #### --distractors--
 
-Placeholder distractor 1
+`flex-shrink: 1;`
 
 ---
 
-Placeholder distractor 2
+`flex-direction: column;`
 
 ---
 
-Placeholder distractor 3
+`align-items: flex-start;`
 
 #### --answer--
 
-Placeholder answer
+`flex-shrink: 0;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you create a responsive image that scales with the width of its container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`max-height: 100%;`
 
 ---
 
-Placeholder distractor 2
+`object-fit: contain;`
 
 ---
 
-Placeholder distractor 3
+`min-width: 100%;`
 
 #### --answer--
 
-Placeholder answer
+`max-width: 100%;`
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md b/curriculum/challenges/espanol/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
index 47b4ceeba0..4d67427ccc 100644
--- a/curriculum/challenges/espanol/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
+++ b/curriculum/challenges/espanol/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+Which of the following is a common issue with the `datetime-local` input type?
 
 #### --distractors--
 
-Placeholder distractor 1
+It cannot be used with CSS variables.
 
 ---
 
-Placeholder distractor 2
+It automatically submits the form upon value selection.
 
 ---
 
-Placeholder distractor 3
+It does not support real-time updates.
 
 #### --answer--
 
-Placeholder answer
+The input format is different across browsers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why is it important to use `box-sizing: border-box;` when styling text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the text input focusable with a keyboard.
 
 ---
 
-Placeholder distractor 2
+It hides the input’s placeholder text.
 
 ---
 
-Placeholder distractor 3
+It removes the default browser styling for inputs.
 
 #### --answer--
 
-Placeholder answer
+It ensures padding and borders are included in the element’s width and height.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a benefit of setting a max-width for text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It prevents users from entering long text.
 
 ---
 
-Placeholder distractor 2
+It makes the input unresponsive on larger screens.
 
 ---
 
-Placeholder distractor 3
+It automatically adjusts the font size.
 
 #### --answer--
 
-Placeholder answer
+It ensures the input doesn’t stretch too wide on larger screens.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should you add `:focus` styles to text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It hides the input’s border.
 
 ---
 
-Placeholder distractor 2
+It disables user input.
 
 ---
 
-Placeholder distractor 3
+It forces the browser to ignore default styles.
 
 #### --answer--
 
-Placeholder answer
+It improves accessibility by making the input easier to identify when focused.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you prevent text inputs from being cut off when resized?
 
 #### --distractors--
 
-Placeholder distractor 1
+By adding `overflow: hidden;`.
 
 ---
 
-Placeholder distractor 2
+By setting a fixed height and width.
 
 ---
 
-Placeholder distractor 3
+By removing padding from the input.
 
 #### --answer--
 
-Placeholder answer
+By using padding and line-height with flexible units like `em` or `rem`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why is it important to use descriptive placeholder text in form inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It helps to pre-fill the form for the user.
 
 ---
 
-Placeholder distractor 2
+It automatically validates the input as the user types.
 
 ---
 
-Placeholder distractor 3
+It hides the input label, reducing visual clutter.
 
 #### --answer--
 
-Placeholder answer
+It provides users with guidance on the expected input format without cluttering the interface.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should you avoid using `outline: none;` without adding a custom focus style?
 
 #### --distractors--
 
-Placeholder distractor 1
+It reduces the size of the text input.
 
 ---
 
-Placeholder distractor 2
+It hides the input from assistive technology users.
 
 ---
 
-Placeholder distractor 3
+It makes the input read-only.
 
 #### --answer--
 
-Placeholder answer
+It removes the focus outline, which may confuse users about which field is selected.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of using Flexbox or Grid for form layout?
 
 #### --distractors--
 
-Placeholder distractor 1
+To make form controls appear in random positions.
 
 ---
 
-Placeholder distractor 2
+To make the form smaller on mobile devices.
 
 ---
 
-Placeholder distractor 3
+To hide form controls on large screens.
 
 #### --answer--
 
-Placeholder answer
+To create a well-structured and responsive form layout.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should input elements be styled with a solid border?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the form look more colorful.
 
 ---
 
-Placeholder distractor 2
+It automatically increases form field size.
 
 ---
 
-Placeholder distractor 3
+It forces users to zoom in on mobile devices.
 
 #### --answer--
 
-Placeholder answer
+To ensure input fields are clearly visible and easily recognizable as form controls.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does increasing the margin between form elements affect form usability?
 
 #### --distractors--
 
-Placeholder distractor 1
+It decreases accessibility on mobile devices.
 
 ---
 
-Placeholder distractor 2
+It prevents users from submitting the form.
 
 ---
 
-Placeholder distractor 3
+It hides form labels.
 
 #### --answer--
 
-Placeholder answer
+It improves readability by helping users see the grouping of related form elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary reason for using `appearance: none` in form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+To add new default styles to form elements.
 
 ---
 
-Placeholder distractor 2
+To enable form elements to appear larger on mobile devices.
 
 ---
 
-Placeholder distractor 3
+To disable form validation for specific elements.
 
 #### --answer--
 
-Placeholder answer
+To remove the default browser styling from form elements and apply custom styles.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which type of form elements is commonly styled using `appearance: none` to remove their default look?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<label>` elements
 
 ---
 
-Placeholder distractor 2
+`<div>` elements
 
 ---
 
-Placeholder distractor 3
+`<span>` elements
 
 #### --answer--
 
-Placeholder answer
+`<input>` and `<select>` elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When should you avoid using `appearance: none` on form controls?
 
 #### --distractors--
 
-Placeholder distractor 1
+When you want to fully customize the form control's style.
 
 ---
 
-Placeholder distractor 2
+When the browser’s default styles are hard to override.
 
 ---
 
-Placeholder distractor 3
+When you are building a mobile-first responsive form.
 
 #### --answer--
 
-Placeholder answer
+When relying on the accessibility and familiarity of native form control appearances.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can using `appearance: none` improve the design of radio buttons and checkboxes?
 
 #### --distractors--
 
-Placeholder distractor 1
+It increases the size of radio buttons and checkboxes.
 
 ---
 
-Placeholder distractor 2
+It automatically creates animation effects for radio buttons and checkboxes.
 
 ---
 
-Placeholder distractor 3
+It prevents users from interacting with radio buttons and checkboxes.
 
 #### --answer--
 
-Placeholder answer
+It removes the browser's default appearance, allowing you to fully customize the design.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a common issue that arises when using `appearance: none` on a select element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the `select` element invisible.
 
 ---
 
-Placeholder distractor 2
+It disables the dropdown functionality.
 
 ---
 
-Placeholder distractor 3
+It breaks form validation.
 
 #### --answer--
 
-Placeholder answer
+It removes the dropdown arrow, requiring you to add a custom arrow or indicator.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can occur when using HTML5 validation attributes like `required` without custom messaging?
 
 #### --distractors--
 
-Placeholder distractor 1
+It automatically validates all inputs without user interaction.
 
 ---
 
-Placeholder distractor 2
+It prevents the form from being submitted if all fields are filled.
 
 ---
 
-Placeholder distractor 3
+It allows users to see detailed error messages for each input.
 
 #### --answer--
 
-Placeholder answer
+Users may not understand why their submission fails, leading to frustration if no helpful feedback is provided.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can arise when no margin is added between the header and the content?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the content load faster.
 
 ---
 
-Placeholder distractor 2
+It improves the overall readability of the content.
 
 ---
 
-Placeholder distractor 3
+It automatically centers the content under the header.
 
 #### --answer--
 
-Placeholder answer
+The content may appear cramped or overlap with the header, making it difficult to read and reducing visual clarity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue may arise with custom fonts when used in form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+They may not display correctly on all browsers.
 
 ---
 
-Placeholder distractor 2
+They always load faster than system fonts.
 
 ---
 
-Placeholder distractor 3
+They prevent the use of responsive design.
 
 #### --answer--
 
-Placeholder answer
+Custom fonts may not be accessible to users if they are not properly loaded or fallback fonts are not specified.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can arise when using `overflow: hidden;` on form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+It improves the form’s overall accessibility.
 
 ---
 
-Placeholder distractor 2
+It automatically adjusts the form to fit within smaller screens.
 
 ---
 
-Placeholder distractor 3
+It ensures that all text content is always visible.
 
 #### --answer--
 
-Placeholder answer
+It can cause content, such as text or labels, to be cut off if the element is resized or if padding is used incorrectly.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What common problem arises when submitting form data that includes `color` input?
 
 #### --distractors--
 
-Placeholder distractor 1
+The `color` value gets automatically converted to grayscale.
 
 ---
 
-Placeholder distractor 2
+The browser displays an alert before submitting the form.
 
 ---
 
-Placeholder distractor 3
+It replaces the `color` value with a default value.
 
 #### --answer--
 
-Placeholder answer
+The `color` input value is submitted as a hexadecimal string, which may require formatting on the server.
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
new file mode 100644
index 0000000000..8931930aa3
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
@@ -0,0 +1,61 @@
+---
+id: 61fd5a93fd62bb35968adeab
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Begin your project by giving your `head` element a `link` element for your stylesheet.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert(/<link/.test(code))
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i))
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
new file mode 100644
index 0000000000..ae59503cca
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
@@ -0,0 +1,48 @@
+---
+id: 61fd6343fb42013d99bcd7f3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Within your `body` element, nest a `section` element within a `main` element.
+
+# --hints--
+
+The first element inside the `body` element should be your `main` element.
+
+```js
+assert(document.querySelector('body')?.children?.[0]?.localName === 'main');
+```
+
+You should have a `section` element within your `main` element.
+
+```js
+assert(document.querySelector('main')?.children?.[0]?.localName === 'section');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
new file mode 100644
index 0000000000..345621fb1d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
@@ -0,0 +1,52 @@
+---
+id: 61fd66c687e610436494c6f1
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `section` element, add an `h1` element with a nested `span` element.
+
+# --hints--
+
+Your `section` element should have an `h1` element.
+
+```js
+assert(document.querySelector('section')?.children?.[0]?.localName === 'h1');
+```
+
+Your `h1` element should have a `span` element.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.localName === 'span');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+--fcc-editable-region--
+      <section>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
new file mode 100644
index 0000000000..0be766dccc
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
@@ -0,0 +1,78 @@
+---
+id: 61fd67a656743144844941cb
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Screen readers announce HTML elements based on the document flow. We will eventually want the balance sheet to have a heading of "Balance Sheet" and a subheading of "AcmeWidgetCorp". However, this order does not make sense if announced by a screen reader.
+
+Give your existing `span` the `class` attribute set to `flex`, and add two `span` elements within it. Give the first the text `AcmeWidgetCorp`. Give the second the text `Balance Sheet`. You will use CSS to reverse the order of the text on the page, but the HTML order will make more sense for a screen reader.
+
+# --hints--
+
+Your existing `span` element should have the `class` attribute set to `flex`.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
+```
+
+Your existing `span` element should have two new `span` elements within it.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
+assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
+```
+
+Your new `span` elements should not have a `class` attribute.
+
+```js
+assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
+assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
+```
+
+Your first new `span` element should have the text `AcmeWidgetCorp`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
+```
+
+Your second new `span` element should have the text `Balance Sheet`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+--fcc-editable-region--
+          <span>
+          </span>
+--fcc-editable-region--
+        </h1>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
new file mode 100644
index 0000000000..2d5052298f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
@@ -0,0 +1,65 @@
+---
+id: 61fd6ab779390f49148773bb
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Below your `h1` element, create a `div` element. Give it an `id` attribute set to `years`. You want this particular element to be hidden from screen readers, so give it the `aria-hidden` attribute set to `true`.
+
+# --hints--
+
+You should create a new `div` element after your `h1` element.
+
+```js
+assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div');
+```
+
+Your new `div` element should have an `id` attribute set to `years`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('id') === 'years');
+```
+
+Your new `div` element should have the `aria-hidden` attribute set to `true`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
new file mode 100644
index 0000000000..f01ff5c2b6
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
@@ -0,0 +1,79 @@
+---
+id: 61fd6b7c83dbf54a08cf0498
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within your `div` element, add three `span` elements. Give each of them a `class` attribute set to `year`, and add the following text (in order): `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Your `div` element should have three `span` elements.
+
+```js
+assert(document.querySelector('div')?.children?.length === 3);
+```
+
+Each `span` element should have a `class` attribute set to `year`.
+
+```js
+const spans = [...document.querySelector('div')?.children];
+spans.forEach(span => assert(span?.classList?.contains('year')));
+```
+
+Your first `span` should have the text `2019`.
+
+```js
+assert(document.querySelector('div')?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` should have the text `2020`.
+
+```js
+assert(document.querySelector('div')?.children?.[1]?.textContent === '2020');
+```
+
+Your third `span` should have the text `2021`.
+
+```js
+assert(document.querySelector('div')?.children?.[2]?.textContent === '2021');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+        <div id="years" aria-hidden="true">
+        </div>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
new file mode 100644
index 0000000000..b8ccec8b81
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
@@ -0,0 +1,80 @@
+---
+id: 61fd6cc9475a784b7776233e
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Below your existing `div` element, add a new `div` element with a `class` set to `table-wrap`. This will be the container for your tables.
+
+Within that, add three `table` elements. You will be using CSS to style these into a single table, but using separate tables will help screen readers understand the document flow.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+Your new `div` element should have the `class` set to `table-wrap`.
+
+```js
+assert(document.querySelector('.table-wrap')?.localName === 'div');
+```
+
+Your `.table-wrap` element should come after your existing `div`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap'));
+```
+
+Your `.table-wrap` element should have three `table` elements.
+
+```js
+const children = [...(document.querySelector('.table-wrap')?.children ?? [])];
+assert(children?.length === 3);
+children.forEach(child => assert(child?.localName === 'table'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
new file mode 100644
index 0000000000..630d13d656
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
@@ -0,0 +1,73 @@
+---
+id: 61fd70336ebb3e4f62ee81ba
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+HTML tables use the `caption` element to describe what the table is about. The `caption` element should always be the first child of a `table`, but can be positioned with the `caption-side` CSS property.
+
+Add a `caption` element to your first `table`, and give it the text `Assets`.
+
+# --hints--
+
+Your first `table` element should have a `caption` element.
+
+```js
+assert(document.querySelector('table')?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Assets`.
+
+```js
+assert(document.querySelector('caption')?.textContent === 'Assets');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
new file mode 100644
index 0000000000..2e0c363fd1
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
@@ -0,0 +1,86 @@
+---
+id: 61fd719788899952e67692b9
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+The `thead` and `tbody` elements are used to indicate which portion of your table is the header, and which portion contains the primary data or content.
+
+Add a `thead` and `tbody` to your first `table`, below the `caption` element.
+
+# --hints--
+
+Your first `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('thead'));
+```
+
+Your first `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+            <caption>Assets</caption>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
new file mode 100644
index 0000000000..083e60b9e9
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
@@ -0,0 +1,86 @@
+---
+id: 61fd71d596e8f253b9408b39
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+The `tr` element is used to indicate a table row. Add a `tr` element within your `thead` element. In your new `tr` element, add a `td` element, followed by three `th` elements.
+
+The `td` element indicates a data cell, while the `th` element indicates a header cell.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
new file mode 100644
index 0000000000..2bb7733877
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
@@ -0,0 +1,125 @@
+---
+id: 61fd75ea7f663457612dba02
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Within each of your new `th` elements, nest a `span` element with the `class` set to `sr-only year`. Give them the following text (in order): `2019`, `2020`, and `2021`.
+
+Give your third `th` element the `class` attribute set to `current`.
+
+Leave the `td` element empty. This element exists only to ensure your table has a four-column layout and associate the headers with the correct columns.
+
+# --hints--
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only year`.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+  assert(th?.children?.[0]?.classList?.contains('year'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your third `th` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current'));
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
new file mode 100644
index 0000000000..e45bc92ba6
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
@@ -0,0 +1,96 @@
+---
+id: 61fd7648a7ba2e5882436831
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Within your `tbody` element, add four `tr` elements. Give the first three a `class` attribute set to `data`, and the fourth a `class` attribute set to `total`.
+
+# --hints--
+
+Your `tbody` element should have four `tr` elements.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+Your first three `tr` elements should have the `class` attribute set to `data`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+Your fourth `tr` element should have the `class` attribute set to `total`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+--fcc-editable-region--
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
new file mode 100644
index 0000000000..413771781f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
@@ -0,0 +1,134 @@
+---
+id: 61fd778081276b59d59abad6
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+In your first `tr`, add a `th` element with the text `Cash This is the cash we currently have on hand.`. Wrap all of that text except `Cash` in a `span` element with the `class` set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$25`, `$30`, `$28`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your first `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Cash This is the cash we currently have on hand.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.');
+```
+
+You should wrap the text `This is the cash we currently have on hand.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$25`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$25');
+```
+
+Your second `td` element should have the text `$30`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$30');
+```
+
+Your third `td` element should have the text `$28`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$28');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
new file mode 100644
index 0000000000..65782d0b1e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
@@ -0,0 +1,138 @@
+---
+id: 61fd77f7ad2aeb5ae34d07d6
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In your second `tr` element, add a `th` element with the text `Checking Our primary transactional account.`. Wrap that text, except for `Checking`, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$54`, `$56`, `$53`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your second `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Checking Our primary transactional account.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.');
+```
+
+You should wrap the text `Our primary transactional account.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$54`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$54');
+```
+
+Your second `td` element should have the text `$56`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$56');
+```
+
+Your third `td` element should have the text `$53`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$53');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
new file mode 100644
index 0000000000..e0aef0b407
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
@@ -0,0 +1,142 @@
+---
+id: 61fd78621573aa5e8b512f5e
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In your third `tr` element, add a `th` element with the text `Savings Funds set aside for emergencies.`. Wrap that text, except for `Savings`, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$500`, `$650`, `$728`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your third `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Savings Funds set aside for emergencies.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.');
+```
+
+You should wrap the text `Funds set aside for emergencies.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$500`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+Your second `td` element should have the text `$650`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650');
+```
+
+Your third `td` element should have the text `$728`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
new file mode 100644
index 0000000000..2f7c60f29f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
@@ -0,0 +1,146 @@
+---
+id: 61fd7a160ed17960e971f28b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+In your fourth `tr` element, add a `th` element with the text `Total Assets`. Wrap the text `Assets` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$579`, `$736`, `$809`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your fourth `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Assets`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets');
+```
+
+You should wrap the text `Assets` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Assets');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$579`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579');
+```
+
+Your second `td` element should have the text `$736`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736');
+```
+
+Your third `td` element should have the text `$809`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
+```
+
+Your third `td` element should have the `class` attribute set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
new file mode 100644
index 0000000000..184f5dee82
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
@@ -0,0 +1,130 @@
+---
+id: 61fd7b3fcaa5406257abc5d1
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Time to move on to your second table. Start by giving it a `caption` element set to `Liabilities`. Then add your `thead` and `tbody`.
+
+# --hints--
+
+Your second `table` element should have a `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities');
+```
+
+Your second `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead'));
+```
+
+Your second `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
new file mode 100644
index 0000000000..40f7da84cd
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
@@ -0,0 +1,119 @@
+---
+id: 61fd8e491324ce717da97ffe
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Within your `thead`, add a `tr`. Inside that, add a `td` and three `th` elements.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
new file mode 100644
index 0000000000..55c85fb133
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
@@ -0,0 +1,149 @@
+---
+id: 61fd8fd08af43372f02952d0
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Give each `th` element a `span` element with the class set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
new file mode 100644
index 0000000000..abec451e89
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
@@ -0,0 +1,131 @@
+---
+id: 61fd9126aa72a474301fc49f
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Within the `tbody` element, add four `tr` elements. Give the first three the `class` attribute set to `data`, and the fourth the `class` attribute set to `total`.
+
+# --hints--
+
+Your `tbody` element should have four `tr` elements.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+Your first three `tr` elements should have the `class` attribute set to `data`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+Your fourth `tr` element should have the `class` attribute set to `total`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
new file mode 100644
index 0000000000..58a2b1e9bc
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
@@ -0,0 +1,169 @@
+---
+id: 61fd933ba685de776a94997e
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Within the first `tr`, add a `th` element with the text `Loans The outstanding balance on our startup loan.`. Wrap that text, except for `Loans`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$500`, `$250`, and `$0`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your first `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Loans The outstanding balance on our startup loan.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.');
+```
+
+You should wrap the text `The outstanding balance on our startup loan.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$500`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+Your second `td` element should have the text `$250`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$250');
+```
+
+Your third `td` element should have the text `$0`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$0');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
new file mode 100644
index 0000000000..1f8839c68a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
@@ -0,0 +1,173 @@
+---
+id: 61fd94056e0355785fbba4d3
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Within the second `tr`, add a `th` element with the text `Expenses Annual anticipated expenses, such as payroll.`. Wrap that text, except for `Expenses`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$200`, `$300`, and `$400`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your second `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Expenses Annual anticipated expenses, such as payroll.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.');
+```
+
+You should wrap the text `Annual anticipated expenses, such as payroll.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$200`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$200');
+```
+
+Your second `td` element should have the text `$300`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$300');
+```
+
+Your third `td` element should have the text `$400`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$400');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
new file mode 100644
index 0000000000..a7289e5738
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
@@ -0,0 +1,177 @@
+---
+id: 61fd986ddbcbd47ba8fbc5ec
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Within the third `tr`, add a `th` element with the text `Credit The outstanding balance on our credit card.`. Wrap that text, except for `Credit`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$50`, `$50`, and `$75`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your third `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Credit The outstanding balance on our credit card.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.');
+```
+
+You should wrap the text `The outstanding balance on our credit card.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$50');
+```
+
+Your second `td` element should have the text `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$50');
+```
+
+Your third `td` element should have the text `$75`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$75');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
new file mode 100644
index 0000000000..630afca73e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -0,0 +1,181 @@
+---
+id: 61fd990577d8227dd93fbeeb
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In your fourth `tr` element, add a `th` element with the text `Total Liabilities`. Wrap the text `Liabilities` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$750`, `$600`, `$475`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your fourth `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities');
+```
+
+You should wrap the text `Liabilities` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$750`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750');
+```
+
+Your second `td` element should have the text `$600`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600');
+```
+
+Your third `td` element should have the text `$475`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
new file mode 100644
index 0000000000..e2d2e4f80e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
@@ -0,0 +1,165 @@
+---
+id: 61fd9a4ff2fc4481b9157bd7
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+For your third table, add a `caption` with the text `Net Worth`, and set up a table header and table body.
+
+# --hints--
+
+Your third `table` element should have a `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth');
+```
+
+Your third `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead'));
+```
+
+Your third `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
new file mode 100644
index 0000000000..a6d495c907
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
@@ -0,0 +1,198 @@
+---
+id: 61fd9ad665a4a282c8106be3
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Within your `thead`, create a `tr` element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
new file mode 100644
index 0000000000..d0c5452488
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
@@ -0,0 +1,208 @@
+---
+id: 61fd9b7285bde783ad5b8aac
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Within the `tbody`, add a `tr` with the `class` set to `total`. In that, add a `th` with the text `Total Net Worth`, and wrap `Net Worth` in a `span` with the `class` set to `sr-only`.
+
+Then add three `td` elements, giving the third a `class` set to `current`, and giving each the following text: `$-171`, `$136`, `$334`.
+
+# --hints--
+
+Your `tbody` element should have one `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
+```
+
+Your `tr` element should have the `class` set to `total`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total'));
+```
+
+Your `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth');
+```
+
+You should wrap the text `Net Worth` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$-171`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171');
+```
+
+Your second `td` element should have the text `$136`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136');
+```
+
+Your third `td` element should have the text `$334`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
new file mode 100644
index 0000000000..a48fc24190
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
@@ -0,0 +1,158 @@
+---
+id: 61fd9d9fbdfe078800317055
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Time to style your table. Start by resetting the box model. Create an `html` selector and give it a `box-sizing` property set to `border-box`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have a `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
new file mode 100644
index 0000000000..2830b424ad
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
@@ -0,0 +1,168 @@
+---
+id: 61fda307bde0b091cf7d884a
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Create a `body` selector and give it a `font-family` property set to `sans-serif` and a `color` set to `#0a0a23`.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `font-family` property set to `sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family') === 'sans-serif');
+```
+
+Your `body` selector should have a `color` property set to `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
new file mode 100644
index 0000000000..fb2d7e6f93
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
@@ -0,0 +1,171 @@
+---
+id: 61fda339eadcfd92a6812bed
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Before you get too far into your styling, you should make use of the `sr-only` class. You can use CSS to make elements with this class completely hidden from the visual page, but still be announced by screen readers.
+
+The CSS you are about to write is a common set of properties used to ensure elements are completely hidden visually.
+
+The `span[class~="sr-only"]` selector will select any `span` element whose `class` *includes* `sr-only`. Create that selector, and give it a `border` property set to `0`.
+
+# --hints--
+
+You should have an `span[class~="sr-only"]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]'));
+```
+
+Your `span[class~="sr-only"]` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
new file mode 100644
index 0000000000..546bcc8998
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
@@ -0,0 +1,172 @@
+---
+id: 61fdac1e31692f9a9ad97295
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The CSS `clip` property is used to define the visible portions of an element. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
+
+The `clip-path` property determines the shape the `clip` property should take. Set the `clip-path` property to the value of `inset(50%)`, forming the clip-path into a rectangle within the element.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `clip` property set to `rect(1px, 1px, 1px, 1px)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)');
+```
+
+Your `span[class~="sr-only"]` selector should have a `clip-path` property set to `inset(50%)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
new file mode 100644
index 0000000000..e964962f3f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
@@ -0,0 +1,172 @@
+---
+id: 61fdaea3999cb19d76ce717b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Now you need to size these elements down. Give your `span[class~="sr-only"]` selector a `width` and `height` property set to `1px`.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `width` property set to `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px');
+```
+
+Your `span[class~="sr-only"]` selector should have a `height` property set to `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
new file mode 100644
index 0000000000..2865fbb968
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
@@ -0,0 +1,174 @@
+---
+id: 61fdaf9ff894b6a084ecdc1b
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+To prevent the text content from overflowing, give your `span[class~="sr-only"]` selector an `overflow` property set to `hidden` and a `white-space` property set to `nowrap`.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have an `overflow` property set to `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden');
+```
+
+Your `span[class~="sr-only"]` selector should have a `white-space` property set to `nowrap`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
new file mode 100644
index 0000000000..5a05cb1e81
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
@@ -0,0 +1,182 @@
+---
+id: 61fdafe6f07fd7a1c6785bc2
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Finally, you need to take these hidden elements out of the document flow. Give the `span[class~="sr-only"]` selector a `position` property set to `absolute`, a `padding` property set to `0`, and a `margin` property set to `-1px`. This will ensure that not only are they no longer visible, but they are not even within the page view.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute');
+```
+
+Your `span[class~="sr-only"]` selector should have a `padding` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px');
+```
+
+Your `span[class~="sr-only"]` selector should have a `margin` property set to `-1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
new file mode 100644
index 0000000000..f23a9e5e35
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
@@ -0,0 +1,192 @@
+---
+id: 61fdb04d9939f0a26ca51c2b
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Time to style your table heading. Create an `h1` selector. Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`.
+
+# --hints--
+
+You should have an `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+Your `h1` selector should have a `max-width` property set to `37.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width') === '37.25rem');
+```
+
+Your `h1` selector should have a `margin` property set to `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin') === '0px auto');
+```
+
+Your `h1` selector should have a `padding` property set to `1.5rem 1.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding') === '1.5rem 1.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
new file mode 100644
index 0000000000..04dd430379
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
@@ -0,0 +1,198 @@
+---
+id: 620159cd5431aa34bc6a4c9c
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Target your flex container with an `h1 .flex` selector. Give it a `display` property set to `flex` to enable the flexbox layout. Then set the `flex-direction` property to `column-reverse` - this will display the nested elements from bottom to top. Finally, set the `gap` property to `1rem` to create some space between the elements.
+
+# --hints--
+
+You should have an `h1 .flex` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex'));
+```
+
+Your `h1 .flex` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('display') === 'flex');
+```
+
+Your `h1 .flex` selector should have a `flex-direction` property set to `column-reverse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('flex-direction') === 'column-reverse');
+```
+
+Your `h1 .flex` selector should have a `gap` property set to `1rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
new file mode 100644
index 0000000000..c376c6a27a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
@@ -0,0 +1,194 @@
+---
+id: 62015a5da1c95c358f079ebb
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+The `:first-of-type` pseudo-selector is used to target the first element that matches the selector. Create an `h1 .flex span:first-of-type` selector to target the first `span` element in your `.flex` container. Remember that your `span` elements are reversed, visually, so this will appear to be the second element on the page.
+
+Give your new selector a `font-size` property of `0.7em` to make it look like a sub-heading.
+
+# --hints--
+
+You should have an `h1 .flex span:first-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type'));
+```
+
+Your `h1 .flex span:first-of-type` selector should have a `font-size` property set to `0.7em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.getPropertyValue('font-size') === '0.7em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
new file mode 100644
index 0000000000..988875664f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
@@ -0,0 +1,196 @@
+---
+id: 62015cd2654a1139321a89d2
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+The `:last-of-type` pseudo-selector does the exact opposite - it targets the last element that matches the selector. Create an `h1 .flex span:last-of-type` selector to target the last `span` in your flex container, and give it a `font-size` property set to `1.2em` to make it look like a header.
+
+# --hints--
+
+You should have an `h1 .flex span:last-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type'));
+```
+
+Your `h1 .flex span:last-of-type` selector should have a `font-size` property set to `1.2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.getPropertyValue('font-size') === '1.2em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
new file mode 100644
index 0000000000..bea49bb7f9
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
@@ -0,0 +1,212 @@
+---
+id: 62015d8942384c3aed48329e
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+You wrapped your table in a section element - now you can style that to give your table a border. Create a `section` selector, and give it a `max-width` property set to `40rem` for responsive design. Set the `margin` property to `0 auto` to center it, and set the `border` property to `2px solid #d0d0d5`.
+
+# --hints--
+
+You should have a `section` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section'));
+```
+
+Your `section` selector should have a `max-width` property set to `40rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('max-width') === '40rem');
+```
+
+Your `section` selector should have a `margin` property set to `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('margin') === '0px auto');
+```
+
+Your `section` selector should have a `border` property set to `2px solid #d0d0d5`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('border') === '2px solid rgb(208, 208, 213)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
new file mode 100644
index 0000000000..ec97094732
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
@@ -0,0 +1,224 @@
+---
+id: 620167374bb8b4455cd11125
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+The last part of your table heading is your years. Create a `#years` selector, and enable flexbox. Justify the content to the end of the flex direction, and make the element sticky. Fix it to the top of its container with `top: 0`.
+
+# --hints--
+
+You should have a `#years` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years'));
+```
+
+Your `#years` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex');
+```
+
+Your `#years` selector should have a `justify-content` property set to `flex-end`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('justify-content') === 'flex-end');
+```
+
+Your `#years` selector should have a `position` property set to `sticky`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('position') === 'sticky');
+```
+
+Your `#years` selector should have a `top` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
new file mode 100644
index 0000000000..be6eec61b2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
@@ -0,0 +1,212 @@
+---
+id: 620174ed519dd7506c1a4b61
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Now apply some color to your `#years`. Make the text `#fff` and the background `#0a0a23`.
+
+# --hints--
+
+Your `#years` should have a `color` property set to `#fff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)');
+```
+
+Your `#years` should have a `background-color` property set to `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
new file mode 100644
index 0000000000..9067889bef
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
@@ -0,0 +1,223 @@
+---
+id: 620175b3710a0951cfa86edf
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+The `calc()` function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:
+
+```css
+.example {
+  margin: 10px;
+  width: calc(100% - 20px);
+}
+```
+
+Give `#years` a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+# --hints--
+
+Your `#years` selector should have a `margin` property set to `0 -2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
+```
+
+Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+```js
+const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding');
+assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5rem 0px'].includes(padding));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
new file mode 100644
index 0000000000..bf3e0d8e19
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
@@ -0,0 +1,232 @@
+---
+id: 6201782cc420715562f36271
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Style the text within your `#years` element by creating a `#years span[class]` selector. The `span[class]` syntax will target any `span` element that has a `class` attribute set, regardless of the attribute's value.
+
+Give your new selector a `bold` font, a width of `4.5rem`, and text aligned to the right.
+
+# --hints--
+
+You should have a `#years span[class]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]'));
+```
+
+Your `#years span[class]` selector should have a `font-weight` property set to `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+Your `#years span[class]` selector should have a `width` property set to `4.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('width') === '4.5rem');
+```
+
+Your `#years span[class]` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('text-align') === 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
new file mode 100644
index 0000000000..4c0ab4ab20
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
@@ -0,0 +1,224 @@
+---
+id: 620179bc0a6a2358c72b90ad
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+You wrapped your tables in a container with the `table-wrap` class. Create a selector for that class, and give it a `padding` set to `0 0.75rem 1.5rem 0.75rem`.
+
+# --hints--
+
+You should have a `.table-wrap` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap'));
+```
+
+Your `.table-wrap` selector should have a `padding` property set to `0 0.75rem 1.5rem 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
new file mode 100644
index 0000000000..df7a3d561d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
@@ -0,0 +1,230 @@
+---
+id: 62017b6f47454059bf2d3bd1
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Before you start diving in to the table itself, your `span` elements are currently bolded. Create a `span:not(.sr-only)` selector and give it a `font-weight` property set to `normal`.
+
+The `:not()` pseudo-selector is used to target all elements that do not match the selector - in this case, any of your `span` elements that do not have the `sr-only` class. This ensures that your earlier rules for the `span[class~="sr-only"]` selector are not overwritten.
+
+# --hints--
+
+You should have a `span:not(.sr-only)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
+```
+
+Your `span:not(.sr-only)` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
new file mode 100644
index 0000000000..6563d6a1d2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
@@ -0,0 +1,291 @@
+---
+id: 62017f47c87be96457c49f46
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Rather than having to constantly double-check you are not overwriting your earlier properties, you can use the `!important` keyword to ensure these properties are always applied, regardless of order or specificity.
+
+Give each property in your `span[class~="sr-only"]` selector an `!important` keyword. Do not change any of the values.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have the `border` property set to `0 !important`.
+
+```js
+// log it
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `clip` property set to `rect(1px, 1px, 1px, 1px) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `clip-path` property set to `inset(50%) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip-path: inset(50%) !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `height` property set to `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('height: 1px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `width` property set to `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('width: 1px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `position` property set to `absolute !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('position: absolute !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `overflow` property set to `hidden !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('overflow: hidden !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `white-space` property set to `nowrap !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('white-space: nowrap !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `padding` property set to `0 !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('padding: 0px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `margin` property set to `-1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('margin: -1px !important;'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span:not(.sr-only) {
+  font-weight: normal;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
new file mode 100644
index 0000000000..131df23ce9
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
@@ -0,0 +1,236 @@
+---
+id: 62017fa5bbef406580ceb44f
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Now that you have added the `!important` keyword, you can remove the `:not(.sr-only)` from your `span` selector.
+
+# --hints--
+
+You should not have a `span:not(.sr-only)` selector.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')));
+```
+
+You should have a `span` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span'));
+```
+
+You should not change the `font-weight`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span:not(.sr-only) {
+  font-weight: normal;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
new file mode 100644
index 0000000000..68b9ddf74a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
@@ -0,0 +1,238 @@
+---
+id: 62018243f046a368fab8ffb6
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Create a `table` selector to target your tables. Set the `border-collapse` property to `collapse`, which will allow cell borders to collapse into a single border, instead of a border around each cell. Also set the `border` property to `0` to hide the borders themselves.
+
+# --hints--
+
+You should have a `table` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table'));
+```
+
+Your `table` selector should have a `border-collapse` property set to `collapse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-collapse') === 'collapse');
+```
+
+Your `table` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
new file mode 100644
index 0000000000..37746c9d7e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
@@ -0,0 +1,242 @@
+---
+id: 6201830cb0c74b69f1b41635
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Ensure your table fills its container with a `width` property set to `100%`, then position it relatively and give it a top margin of `3rem`.
+
+# --hints--
+
+Your `table` selector should have a `width` property set to `100%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%');
+```
+
+Your `table` selector should have a `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('position') === 'relative');
+```
+
+Your `table` selector should have a `margin-top` property set to `3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('margin-top') === '3rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+table {
+  border-collapse: collapse;
+  border: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
new file mode 100644
index 0000000000..a59b2617ab
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
@@ -0,0 +1,252 @@
+---
+id: 620186f4b6b8356d2def576b
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Next you need to style your `caption` elements to look more like headers. Create a `table caption` selector. Set the text to have a color of `#356eaf`, a size of `1.3em`, and a normal weight.
+
+# --hints--
+
+You should have a `table caption` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption'));
+```
+
+Your `table caption` selector should have a `color` property set to `#356eaf`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('color') === 'rgb(53, 110, 175)');
+```
+
+Your `table caption` selector should have a `font-size` property set to `1.3em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-size') === '1.3em');
+```
+
+Your `table caption` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
new file mode 100644
index 0000000000..c3938b04ac
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
@@ -0,0 +1,251 @@
+---
+id: 62018ba1aa263770c953be66
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Now give the captions an absolute position, and shift them `-2.25rem` from the top and `0.5rem` from the left.
+
+# --hints--
+
+Your `table caption` selector should have the `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute');
+```
+
+Your `table caption` selector should have the `top` property set to `-2.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('top') === '-2.25rem');
+```
+
+Your `table caption` selector should have the `left` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
new file mode 100644
index 0000000000..5d92ebdef9
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
@@ -0,0 +1,261 @@
+---
+id: 62018c3e94434a71af1d5eaa
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Create a selector to target your `td` elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container.
+
+# --hints--
+
+You should have a `tbody td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td'));
+```
+
+Your `tbody td` selector should have a `width` property set to `100vw`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('width') === '100vw');
+```
+
+Your `tbody td` selector should have a `min-width` property set to `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('min-width') === '4rem');
+```
+
+Your `tbody td` selector should have a `max-width` property set to `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('max-width') === '4rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
new file mode 100644
index 0000000000..842e7f51b6
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
@@ -0,0 +1,255 @@
+---
+id: 62018ec29b3ae674f40bef31
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Now target the `th` elements within your table body, and give them a width of the entire container, less `12rem`.
+
+# --hints--
+
+You should have a `tbody th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th'));
+```
+
+Your `tbody th` selector should have a `width` property set to `calc(100% - 12rem)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('width') === 'calc(100% - 12rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
new file mode 100644
index 0000000000..f20111ca92
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
@@ -0,0 +1,265 @@
+---
+id: 62019093fe30e278e797d2f6
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+The `[attribute="value"]` selector targets any element that has an attribute with a specific value. Create a `tr[class="total"]` selector to target specifically your `tr` elements with the `total` class. Give it a bottom border of `4px double #0a0a23` and make the font bold.
+
+# --hints--
+
+You should have a `tr[class="total"]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]'));
+```
+
+Your `tr[class="total"]` selector should have a `border-bottom` property set to `4px double #0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('border-bottom') === '4px double rgb(10, 10, 35)');
+```
+
+Your `tr[class="total"]` selector should have a `font-weight` property set to `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
new file mode 100644
index 0000000000..da1b2b6db3
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
@@ -0,0 +1,270 @@
+---
+id: 620191707bc65579ddd3ce15
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Using the same selector syntax, target the `th` elements within your table rows where the `class` is `total`. Align the text to the left, and give them a padding of `0.5rem 0 0.25rem 0.5rem`.
+
+# --hints--
+
+You should have a `tr[class="total"] th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th'));
+```
+
+Your `tr[class="total"] th` selector should have a `text-align` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left');
+```
+
+Your `tr[class="total"] th` selector should have a `padding` property set to `0.5rem 0 0.25rem 0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
new file mode 100644
index 0000000000..7b947bb3ee
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
@@ -0,0 +1,277 @@
+---
+id: 620192a767533a7ad19d96d7
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+The key difference between `tr[class="total"]` and `tr.total` is that the first will select `tr` elements where the *only* class is `total`. The second will select `tr` elements where the class *includes* `total`.
+
+In your case, `tr.total` will work. You can use this selector to target all `td` elements within your `.total` rows. Align the text to the right, and give them a padding of `0 0.25rem`.
+
+# --hints--
+
+You should have a `tr.total td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td'));
+```
+
+Your `tr.total td` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('text-align') === 'right');
+```
+
+Your `tr.total td` selector should have a `padding` property set to `0 0.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('padding') === '0px 0.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
new file mode 100644
index 0000000000..40864c9312
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
@@ -0,0 +1,274 @@
+---
+id: 6201995d9ab88e80f1989dce
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+The `:nth-of-type()` pseudo-selector is used to target specific elements based on their order among siblings of the same type. Use this pseudo-selector to target the third `td` element within your `total` table rows. Give it a right padding of `0.5rem`.
+
+# --hints--
+
+You should have a `tr.total td:nth-of-type(3)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)'));
+```
+
+Your `tr.total td:nth-of-type(3)` selector should have a `padding-right` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
new file mode 100644
index 0000000000..d0ec48a16c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
@@ -0,0 +1,278 @@
+---
+id: 620199c7a7a32c81d4db3410
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Give your `tr.total` elements a hover effect that changes the background to `#99c9ff`.
+
+# --hints--
+
+You should have a `tr.total:hover` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover'));
+```
+
+Your `tr.total:hover` selector should have the `background-color` property set to `#99c9ff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyValue('background-color') === 'rgb(153, 201, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
new file mode 100644
index 0000000000..8446e4d528
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
@@ -0,0 +1,284 @@
+---
+id: 6201a1a7af32c287bd6b8183
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Select your `td` elements with the `class` value of `current`, and make the font italic.
+
+# --hints--
+
+You should have a `td.current` selector.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('td.current') || def('td[class="current"]'));
+```
+
+Your `td.current` selector should have the `font-style` property set to `italic`.
+
+```js
+const font = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style');
+assert((font('td.current') || font('td[class="current"]')) === 'italic');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
new file mode 100644
index 0000000000..a1ea3f0dcd
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
@@ -0,0 +1,288 @@
+---
+id: 6201a1cc668a34888f5b2f52
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Select the `tr` elements with the `class` set to `data`. Give them a background image of `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+# --hints--
+
+You should have a `tr.data` selector.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('tr.data') || def('tr[class="data"]'));
+```
+
+Your `tr.data` selector should have the `background-image` property set to `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+```js
+const bg = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('background-image');
+assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
new file mode 100644
index 0000000000..0853021d6c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
@@ -0,0 +1,302 @@
+---
+id: 6201a20d742f5c89736c8cfb
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Select the `th` elements within your `tr.data` elements. Align the text to the left, and give them a top padding of `0.3rem` and a left padding of `0.5rem`.
+
+# --hints--
+
+You should have a `tr.data th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th'));
+```
+
+Your `tr.data th` selector should have a `text-align` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('text-align') === 'left');
+```
+
+Your `tr.data th` selector should have a `padding-top` property set to `0.3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-top') === '0.3rem');
+```
+
+Your `tr.data th` selector should have a `padding-left` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
new file mode 100644
index 0000000000..66cc4c45f6
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
@@ -0,0 +1,320 @@
+---
+id: 6201a42e39bf3b95b6a33bf3
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Create a `tr.data th .description` selector to target the elements with the `class` set to `description` that are within your `th` elements in your `.data` table rows. Give them a block display, make the text italic with a normal weight, and position them with a `padding` set to `1rem 0 0.75rem` and a right margin of `-13.5rem`.
+
+# --hints--
+
+You should have a `tr.data th .description` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description'));
+```
+
+Your `tr.data th .description` selector should have a `display` property set to `block`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('display') === 'block');
+```
+
+Your `tr.data th .description` selector should have a `font-style` property set to `italic`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-style') === 'italic');
+```
+
+Your `tr.data th .description` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-weight') === 'normal');
+```
+
+Your `tr.data th .description` selector should have a `padding` property set to `1rem 0 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('padding') === '1rem 0px 0.75rem');
+```
+
+Your `tr.data th .description` selector should have a `margin-right` property set to `-13.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('margin-right') === '-13.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
new file mode 100644
index 0000000000..55d65268a3
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
@@ -0,0 +1,296 @@
+---
+id: 6201a4adcc6414968b391592
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Your `span` elements now all have more specific styling, which means you can remove your `span` rule.
+
+# --hints--
+
+You should not have a `span` selector.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span {
+  font-weight: normal;
+}
+--fcc-editable-region--
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
new file mode 100644
index 0000000000..74ca4c192b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
@@ -0,0 +1,312 @@
+---
+id: 6201a5258af7b398b030bfaf
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Your dollar amounts are currently misaligned. Create a selector to target the `td` elements within your `tr.data` elements. Vertically align the text to the top, horizontally align the text to the right, and set the padding to `0.3rem 0.25rem 0`.
+
+# --hints--
+
+You should have a `tr.data td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td'));
+```
+
+Your `tr.data td` selector should have a `vertical-align` property set to `top`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('vertical-align') === 'top');
+```
+
+Your `tr.data td` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('text-align') === 'right');
+```
+
+Your `tr.data td` selector should have a `padding` property set to `0.3rem 0.25rem 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('padding') === '0.3rem 0.25rem 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
new file mode 100644
index 0000000000..672e43ac9c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
@@ -0,0 +1,589 @@
+---
+id: 6201a59be346d399c21d10b1
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Create another selector for the `td` elements within your `tr.data` element, but specifically select the last one. Give this a right padding of `0.5rem`.
+
+With this, your balance sheet is complete!
+
+# --hints--
+
+You should have a `tr.data td:last-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type'));
+```
+
+Your `tr.data td:last-of-type` selector should have a `padding-right` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+tr.data td:last-of-type {
+  padding-right: 0.5rem;
+}
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
new file mode 100644
index 0000000000..71388718e0
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
@@ -0,0 +1,209 @@
+---
+id: 64076bbeba941114b0027b6a
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Adding position `sticky` moved the element into its own stack. To ensure your `#years` element does not get hidden by different stacks, add a `z-index` property set to `999` in the `#years` rule.
+
+# --hints--
+
+Your `#years` selector should have a `z-index` property set to `999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index'), '999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
new file mode 100644
index 0000000000..6295eb77a1
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
@@ -0,0 +1,76 @@
+---
+id: 5d822fd413a79914d39e98cc
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Welcome to the CSS Variables Skyline project! Start by adding a `link` element that links your `styles.css` file within the `head` element.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.isNotNull(document.querySelector('link'));
+```
+
+You should not change your existing `head` tags. Make sure you did not delete the closing tag.
+
+```js
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
+```
+
+You should have one void `link` element.
+
+```js
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>    
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
new file mode 100644
index 0000000000..866b58f80c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
@@ -0,0 +1,56 @@
+---
+id: 5d822fd413a79914d39e98cd
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick that helps visualize where elements are and their size. You will remove this later.
+
+# --hints--
+
+You should use the `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+You should use the `border` property to style all the elements.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('border'));
+```
+
+All elements should have a `1px solid black` border.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles?.border, '1px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
new file mode 100644
index 0000000000..1ea4cc4156
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
@@ -0,0 +1,61 @@
+---
+id: 5d822fd413a79914d39e98ce
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements.
+
+# --hints--
+
+You should use the `box-sizing` property.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing'));
+```
+
+You should make use of the existing `*` selector.
+
+```js
+// Two selectors create two CSSStyleRule objects
+assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1);
+```
+
+All elements should have a `box-sizing` of `border-box`.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles.boxSizing, 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+}
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
new file mode 100644
index 0000000000..90efe5f935
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
@@ -0,0 +1,69 @@
+---
+id: 5d822fd413a79914d39e98cf
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport.
+
+# --hints--
+
+You should use the `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` should have a `height` of `100vh`.
+
+```js
+const bodyStyles = new __helpers.CSSHelp(document).getStyle('body');
+assert.equal(bodyStyles?.height, '100vh');
+```
+
+Your `body` should have a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+Your `body` should have the `overflow` property set to `hidden`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
new file mode 100644
index 0000000000..a49b3f5dff
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
@@ -0,0 +1,65 @@
+---
+id: 5d822fd413a79914d39e98d0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+Your `div` element should be within the `body`.
+
+```js
+assert(document.querySelector('div')?.parentElement?.localName === 'body');
+```
+
+Your `div` element should have a class of `background-buildings`
+
+```js
+assert([...document.querySelector('div')?.classList]?.includes('background-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
new file mode 100644
index 0000000000..56eebc0924
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
@@ -0,0 +1,68 @@
+---
+id: 5d822fd413a79914d39e98d1
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Give your `.background-buildings` element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`.
+
+# --hints--
+
+You should use the `background-buildings` class to select the correct element.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings'));
+```
+
+Your `.background-buildings` element should have a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%');
+```
+
+Your `.background-buildings` element should have a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
new file mode 100644
index 0000000000..fe650ce0a4
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
@@ -0,0 +1,83 @@
+---
+id: 5d822fd413a79914d39e98d2
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Nest a `div` with a class of `bb1` in the background buildings container. Open your `styles.css` file, and give `.bb1` a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div').length, 2);
+```
+
+You should give the new `div` a class of `bb1`.
+
+```js
+assert.exists(document.querySelector('div.bb1'));
+```
+
+You should use a `.bb1` class selector to style the element.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1'));
+```
+
+You should give the `.bb1` element a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%');
+```
+
+You should give the `.bb1` element a `height` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
new file mode 100644
index 0000000000..34ef10accb
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
@@ -0,0 +1,105 @@
+---
+id: 5d822fd413a79914d39e98d3
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections.
+
+# --hints--
+
+You should create four new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 6);
+```
+
+You should give one of the new `div` elements a class of `bb1a`.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+You should give one of the new `div` elements a class of `bb1b`.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+You should give one of the new `div` elements a class of `bb1c`.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+You should give one of the new `div` elements a class of `bb1d`.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+```
+
+You should place the new `div` elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d'));
+```
+
+You should place the new `div` elements within the `.bb1` element.
+
+```js
+assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+--fcc-editable-region--
+      <div class="bb1"></div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
new file mode 100644
index 0000000000..cae117f39b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
@@ -0,0 +1,138 @@
+---
+id: 5d822fd413a79914d39e98d4
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container.
+
+# --hints--
+
+You should use a class selector to style `.bb1a`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a'));
+```
+
+You should give `.bb1a` a `width` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%');
+```
+
+You should give `.bb1a` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1b`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b'));
+```
+
+You should give `.bb1b` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%');
+```
+
+You should give `.bb1b` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1c`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c'));
+```
+
+You should give `.bb1c` a `width` of `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%');
+```
+
+You should give `.bb1c` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1d`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d'));
+```
+
+You should give `.bb1d` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%');
+```
+
+You should give `.bb1d` a `height` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
new file mode 100644
index 0000000000..8f84d629f0
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
@@ -0,0 +1,112 @@
+---
+id: 5d822fd413a79914d39e98d5
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Center the parts of your building by turning the `.bb1` element into a flexbox parent. Use the `flex-direction` and `align-items` properties to center the children.
+
+# --hints--
+
+You should not change the `.bb1` `width` or `height` properties.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.width, '10%');
+assert.equal(bb1Style?.height, '70%');
+```
+
+You should give the `.bb1` element a `display` of `flex`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.display, 'flex');
+```
+
+You should give the `.bb1` element a `flex-direction` of `column`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.flexDirection, 'column');
+```
+
+You should give the `.bb1` element a `align-items` of `center`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.alignItems, 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
new file mode 100644
index 0000000000..f08fd7a1d9
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
@@ -0,0 +1,103 @@
+---
+id: 5d822fd413a79914d39e98d6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Now you have something that is resembling a building. You are ready to create your first variable. In the previous lecture videos you learned that variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the rule for the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`.
+
+# --hints--
+
+You should create a new variable named `--building-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1'));
+```
+
+You should define the `--building-color1` variable within `.bb1`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+```
+
+You should give `--building-color1` a value of `#999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
new file mode 100644
index 0000000000..7f714196cb
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
@@ -0,0 +1,100 @@
+---
+id: 5d822fd413a79914d39e98d7
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Whatever value you gave the variable will be applied to whatever property you use it on.
+
+Add the variable `--building-color1` you created in the previous step as the value of the `background-color` property of the `.bb1a` class.
+
+# --hints--
+
+The `background-color` of the `.bb1a` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
new file mode 100644
index 0000000000..01335d8d2d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98d8
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building.
+
+# --hints--
+
+The `background-color` of the `.bb1b` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+The `background-color` of the `.bb1c` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+The `background-color` of the `.bb1d` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
new file mode 100644
index 0000000000..3690866c53
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
@@ -0,0 +1,99 @@
+---
+id: 5d822fd413a79914d39e98d9
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable.
+
+# --hints--
+
+You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+--fcc-editable-region--
+  --building-color1: #999;
+--fcc-editable-region--
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
new file mode 100644
index 0000000000..a614918d18
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98da
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Your first building looks pretty good now. Nest three new `div` elements in the `.background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background.
+
+# --hints--
+
+You should create a `div` with a class of `bb2`.
+
+```js
+assert.exists(document.querySelector('div.bb2'));
+```
+
+You should create a `div` with a class of `bb3`.
+
+```js
+assert.exists(document.querySelector('div.bb3'));
+```
+
+You should create a `div` with a class of `bb4`.
+
+```js
+assert.exists(document.querySelector('div.bb4'));
+```
+
+You should create 3 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 9);
+```
+
+You should place these `div` elements within the `.background-buildings` element.
+
+```js
+assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4);
+```
+
+You should place the elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
new file mode 100644
index 0000000000..b90a51c1f5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98db
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive.
+
+# --hints--
+
+You should give `.bb2` a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%');
+```
+
+You should give `.bb2` a `height` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%');
+```
+
+You should give `.bb3` a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%');
+```
+
+You should give `.bb3` a `height` of `55%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%');
+```
+
+You should give `.bb4` a `width` of `11%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%');
+```
+
+You should give `.bb4` a `height` of `58%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
new file mode 100644
index 0000000000..43c97e479e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
@@ -0,0 +1,127 @@
+---
+id: 5d822fd413a79914d39e98dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+The buildings are currently stacked on top of each other. Align the buildings by turning the `.background-buildings` element into a flexbox parent. Use the `align-items` and `justify-content` properties to evenly space the buildings across the bottom of the element.
+
+# --hints--
+
+You should add a `display` of `flex` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex');
+```
+
+You should add an `align-items` of `flex-end` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end');
+```
+
+You should add a `justify-content` of `space-evenly` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
new file mode 100644
index 0000000000..45cde3a259
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98dd
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+The buildings are too spaced out. Squeeze them together by adding two empty `div` elements to the top of the `.background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center.
+
+# --hints--
+
+You should add two new `div` elements before the `.bb1` element.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('bb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('bb1'));
+```
+
+You should add one new `div` element between the `.bb3` and `.bb4` element.
+
+```js
+assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling);
+```
+
+You should add two new `div` elements after the `.bb4` element.
+
+```js
+const bb4 = document.querySelector('.bb4');
+assert.exists(bb4?.nextElementSibling);
+assert.exists(bb4?.nextElementSibling?.nextElementSibling);
+```
+
+You should add 5 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 14);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
new file mode 100644
index 0000000000..a7617deb09
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
@@ -0,0 +1,140 @@
+---
+id: 5d822fd413a79914d39e98de
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a new variable below your `--building-color1` variable. Name your new variable `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`.
+
+# --hints--
+
+You should define a new property variable called `--building-color2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2'));
+```
+
+You should give `--building-color2` a value of `#66cc99` within the `.bb1` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99');
+```
+
+You should set the `background-color` of `.bb2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor);
+```
+
+You should set the `background-color` using the `--building-color2` variable.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
new file mode 100644
index 0000000000..aa97fc4df8
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98df
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+That didn't work. You should add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`.
+
+# --hints--
+
+You should add a fallback value of `green` to the `background-color` property.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2,green)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
new file mode 100644
index 0000000000..cc38315c42
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98e0
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create a new variable below the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`.
+
+# --hints--
+
+You should define a new property variable called `--building-color3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3'));
+```
+
+You should give `--building-color3` a value of `#cc6699`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+You should set the `background-color` of `.bb3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor);
+```
+
+You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3,pink)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
new file mode 100644
index 0000000000..b146a3017d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
@@ -0,0 +1,155 @@
+---
+id: 5d822fd413a79914d39e98e1
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+That didn't work, because the variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there.
+
+# --hints--
+
+You should declare a `:root` selector at the top of the stylesheet.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root'));
+```
+
+You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff');
+```
+
+You should define `--building-color2` with a value of `#66cc99` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99');
+```
+
+You should define `--building-color3` with a value of `#cc6699` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+You should remove the custom property variables from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
new file mode 100644
index 0000000000..0d71f94d0c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
@@ -0,0 +1,135 @@
+---
+id: 5d822fd413a79914d39e98e2
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now.
+
+# --hints--
+
+You should remove the fallback in the `background-color` from `.bb2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+You should remove the fallback in the `background-color` from `.bb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
new file mode 100644
index 0000000000..9434a0ce33
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
@@ -0,0 +1,144 @@
+---
+id: 5d822fd413a79914d39e98e3
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building.
+
+# --hints--
+
+You should define a new property variable called `--building-color4`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4'));
+```
+
+You should give `--building-color4` a value of `#538cc6` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6');
+```
+
+You should add `background-color: var(--building-color4)` in the `.bb4` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.getPropVal('background-color', true), 'var(--building-color4)')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
new file mode 100644
index 0000000000..7aeec907b2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
@@ -0,0 +1,147 @@
+---
+id: 5d822fd413a79914d39e98e4
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+The background buildings are starting to look pretty good. Create a new `div` below the `.background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 15);
+```
+
+The new `div` should come after the `div.background-buildings` element.
+
+```js
+assert.exists(document.querySelector('div.background-buildings + div'));
+```
+
+Your new `div` should have a class of `foreground-buildings`.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
new file mode 100644
index 0000000000..d1b7b83393
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
@@ -0,0 +1,161 @@
+---
+id: 5d822fd413a79914d39e98e5
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+You want the `.foreground-buildings` container to sit directly on top of the `.background-buildings` element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner.
+
+# --hints--
+
+You should use a `.foreground-buildings` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+You should give the `.foreground-buildings` element a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%');
+```
+
+You should give the `.foreground-buildings` element a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%');
+```
+
+You should give the `.foreground-buildings` element a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute');
+```
+
+You should give the `.foreground-buildings` element a `top` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
new file mode 100644
index 0000000000..dc1a0644b0
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
@@ -0,0 +1,192 @@
+---
+id: 5d822fd413a79914d39e98e6
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground.
+
+# --hints--
+
+You should create a new `div` with a class of `fb1`.
+
+```js
+assert.exists(document.querySelector('div.fb1'));
+```
+
+You should create a new `div` with a class of `fb2`.
+
+```js
+assert.exists(document.querySelector('div.fb2'));
+```
+
+You should create a new `div` with a class of `fb3`.
+
+```js
+assert.exists(document.querySelector('div.fb3'));
+```
+
+You should create a new `div` with a class of `fb4`.
+
+```js
+assert.exists(document.querySelector('div.fb4'));
+```
+
+You should create a new `div` with a class of `fb5`.
+
+```js
+assert.exists(document.querySelector('div.fb5'));
+```
+
+You should create a new `div` with a class of `fb6`.
+
+```js
+assert.exists(document.querySelector('div.fb6'));
+```
+
+You should place these new `div` elements within the `.foreground-buildings` element.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings > div.fb1'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb2'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb3'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb4'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb5'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb6'));
+```
+
+You should place the new `div` elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
new file mode 100644
index 0000000000..215b44f2f3
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e98e7
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`.
+
+# --hints--
+
+You should create a `.fb1` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1'));
+```
+
+You should give the `.fb1` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%');
+```
+
+You should give the `.fb1` selector a `height` of `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%');
+```
+
+You should create a `.fb2` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2'));
+```
+
+You should give the `.fb2` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%');
+```
+
+You should give the `.fb2` selector a `height` of `40%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%');
+```
+
+You should create a `.fb3` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3'));
+```
+
+You should give the `.fb3` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%');
+```
+
+You should give the `.fb3` selector a `height` of `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%');
+```
+
+You should create a `.fb4` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4'));
+```
+
+You should give the `.fb4` selector a `width` of `8%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%');
+```
+
+You should give the `.fb4` selector a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%');
+```
+
+You should create a `.fb5` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5'));
+```
+
+You should give the `.fb5` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%');
+```
+
+You should give the `.fb5` selector a `height` of `33%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%');
+```
+
+You should create a `.fb6` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6'));
+```
+
+You should give the `.fb6` selector a `width` of `9%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%');
+```
+
+You should give the `.fb6` selector a `height` of `38%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
new file mode 100644
index 0000000000..dcfbd1726e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
@@ -0,0 +1,190 @@
+---
+id: 5d822fd413a79914d39e98e8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Add the same `display`, `align-items`, and `justify-content` properties and values to `.foreground-buildings` that you used on `.background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container.
+
+# --hints--
+
+You should give `.foreground-buildings` a `display` property of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex');
+```
+
+You should give `.foreground-buildings` an `align-items` property of `flex-end`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end');
+```
+
+You should give `.foreground-buildings` a `justify-content` property of `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
new file mode 100644
index 0000000000..2e1047c628
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98e9
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+You should optimize your code. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`.
+
+# --hints--
+
+You should not remove the `.foreground-buildings` declaration.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+You should remove the `position` property from `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position);
+```
+
+You should remove the `top` property from `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
+```
+
+You should add the `position` property of `absolute` to `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.position, 'absolute');
+```
+
+You should add the `top` property of `0` to `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.top, '0px');
+```
+
+You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.exists(eitherOr());
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
new file mode 100644
index 0000000000..1147503597
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
@@ -0,0 +1,181 @@
+---
+id: 5d822fd413a79914d39e98ea
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore.
+
+# --hints--
+
+You should delete the whole `.foreground-buildings` style declaration.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
new file mode 100644
index 0000000000..79fd7a2246
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98eb
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`.
+
+# --hints--
+
+You should give `.fb1` a `background-color` using `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.getPropVal('background-color', true), 'var(--building-color4)');
+```
+
+You should give `.fb2` a `background-color` using `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+You should give `.fb3` a `background-color` using `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+You should give `.fb4` a `background-color` using `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+You should give `.fb5` a `background-color` using `--building-color2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+You should give `.fb6` a `background-color` using `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
new file mode 100644
index 0000000000..bb4a29f503
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98ec
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`.
+
+# --hints--
+
+You should add two `div` elements as the first children of `.foreground-buildings`.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('fb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('fb1'));
+```
+
+You should add one `div` element between `.fb2` and `.fb3`.
+
+```js
+assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling);
+```
+
+
+You should add two `div` elements as the last children of `.foreground-buildings`.
+
+```js
+const fb6 = document.querySelector('.fb6');
+assert.exists(fb6?.nextElementSibling);
+assert.exists(fb6?.nextElementSibling?.nextElementSibling);
+```
+
+You should have added 5 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 26);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
new file mode 100644
index 0000000000..288de384a8
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
@@ -0,0 +1,202 @@
+---
+id: 5d822fd413a79914d39e98ed
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings.
+
+# --hints--
+
+You should give `.fb4` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative');
+```
+
+You should give `.fb4` a `left` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%');
+```
+
+You should give `.fb5` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative');
+```
+
+You should give `.fb5` a `right` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
new file mode 100644
index 0000000000..1b950d244f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
@@ -0,0 +1,196 @@
+---
+id: 5d822fd413a79914d39e98ee
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`.
+
+# --hints--
+
+You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector.
+
+```js
+assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code));
+```
+
+You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector.
+
+```js
+assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
new file mode 100644
index 0000000000..022722b6a3
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
@@ -0,0 +1,197 @@
+---
+id: 5d822fd413a79914d39e98ef
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings.
+
+# --hints--
+
+You should create a new variable in `:root` called `--window-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1'));
+```
+
+You should give the property variable `--window-color1` a value of `black`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
new file mode 100644
index 0000000000..d4e4ca6565
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
@@ -0,0 +1,218 @@
+---
+id: 5d822fd413a79914d39e98f0
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+In a previous module you learned that gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this:
+
+```css
+gradient-type(
+  color1,
+  color2
+);
+```
+
+In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a `background` property below the `background-color` property. Set it as a gradient of type `linear-gradient` that uses `--building-color1` as the first color and `--window-color1` as the second.
+
+# --hints--
+
+You should apply a `background` to `.bb1a` right after the `background-color`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+```
+
+You should give the `background` a `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
+```
+
+You should give the `background` a `linear-gradient` starting from `var(--building-color1)`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
+```
+
+You should give the `background` a `linear-gradient` ending at `var(--window-color1)`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
new file mode 100644
index 0000000000..13c9235203
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98f1
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+You want to add the same gradient to the next two sections. Instead of doing that, create a new class selector called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class selector.
+
+# --hints--
+
+You should create a new class selector called `bb1-window`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window'));
+```
+
+You should move the `height` property and value from `.bb1a` to `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%');
+```
+
+You should move the `background` property and value from `.bb1a` to `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+You should not move the `background-color` property from `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+You should not move the `width` property from `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
new file mode 100644
index 0000000000..d2c82337a1
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
@@ -0,0 +1,237 @@
+---
+id: 5d822fd413a79914d39e98f2
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them.
+
+# --hints--
+
+You should not remove the `bb1a` class.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+You should add the `bb1-window` class to the `.bb1a` element.
+
+```js
+assert.exists(document.querySelector('div.bb1a.bb1-window'));
+```
+
+You should not remove the `bb1b` class.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+You should add the `bb1-window` class to the `.bb1b` element.
+
+```js
+assert.exists(document.querySelector('div.bb1b.bb1-window'));
+```
+
+You should not remove the `bb1c` class.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+You should add the `bb1-window` class to the `.bb1c` element.
+
+```js
+assert.exists(document.querySelector('div.bb1c.bb1-window'));
+```
+
+You should not change the `.bb1d` element.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+assert.notExists(document.querySelector('div.bb1d.bb1-window'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
new file mode 100644
index 0000000000..5f4c0d8e10
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
@@ -0,0 +1,222 @@
+---
+id: 5d822fd413a79914d39e98f3
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them.
+
+# --hints--
+
+You should remove the `background-color` from `.bb1a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+You should remove the `height` property from `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height);
+```
+
+You should remove the `background-color` property from `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor);
+```
+
+You should remove the `height` property from `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height);
+```
+
+You should remove the `background-color` property from `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
new file mode 100644
index 0000000000..523c35e8e6
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e98f4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Gradients can use as many colors as you want like this:
+
+```css
+gradient-type(
+  color1,
+  color2,
+  color3
+);
+```
+
+Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property.
+
+# --hints--
+
+You should use the `background` on `.bb1d`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background);
+```
+
+You should give the `background` property a `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient');
+```
+
+You should use `orange` as the first color in the `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange');
+```
+
+You should use `--building-color1` as the second color in the `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)');
+```
+
+You should use `--window-color1` as the third color in the `linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
new file mode 100644
index 0000000000..457fe4acaf
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
@@ -0,0 +1,198 @@
+---
+id: 5d822fd413a79914d39e98f5
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`.
+
+# --hints--
+
+You should remove the `background-color` property and value from `.bb1d`
+
+```js
+assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
new file mode 100644
index 0000000000..d1f3fdc799
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f6
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+You can specify where you want a gradient transition to complete by adding it to the color like this:
+
+```css
+gradient-type(
+  color1,
+  color2 20%,
+  color3
+);
+```
+
+Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action.
+
+# --hints--
+
+You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
new file mode 100644
index 0000000000..0533f06214
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98f7
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half.
+
+# --hints--
+
+You should remove `orange` from the `linear-gradient`.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange');
+```
+
+You should change the now first `linear-gradient` color to transition at `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1) 80%,
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
new file mode 100644
index 0000000000..6bf8b3fe84
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
@@ -0,0 +1,210 @@
+---
+id: 5d822fd413a79914d39e98f8
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building.
+
+# --hints--
+
+You should add two `div` elements to `.bb2`.
+
+```js
+assert.equal(document.querySelector('div.bb2')?.children?.length, 2);
+```
+
+You should give the first `div` a class of `bb2a`.
+
+```js
+assert.exists(document.querySelector('div.bb2a'));
+```
+
+You should give the second `div` a class of `bb2b`.
+
+```js
+assert.exists(document.querySelector('div.bb2b'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+--fcc-editable-region--
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
new file mode 100644
index 0000000000..6fb4f46152
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f9
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later.
+
+# --hints--
+
+You should give `.bb2b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%');
+```
+
+You should give `.bb2b` a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
new file mode 100644
index 0000000000..3a67baddad
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fa
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building.
+
+# --hints--
+
+You should create a new property variable called `window-color2` within `:root`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2'));
+```
+
+You should give `window-color2` a value of `#8cd9b3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
new file mode 100644
index 0000000000..d1924b7bd4
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
@@ -0,0 +1,240 @@
+---
+id: 5d822fd413a79914d39e98fb
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Gradient transitions often gradually change from one color to another. When a more abrupt change is required, the transition can be made with a hard stop like this:
+
+```css
+linear-gradient(
+  var(--first-color) 0%,
+  var(--first-color) 40%,
+  var(--second-color) 40%,
+  var(--second-color) 80%
+);
+```
+
+Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`.
+
+# --hints--
+
+You should give `.bb2b` a `background` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background);
+```
+
+You should use a `linear-gradient` on the `background`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient");
+```
+
+You should use `--building-color2` from `0%` to `6%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/);
+```
+
+You should use `--window-color2` from `6%` to `9%`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%");
+```
+
+`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
new file mode 100644
index 0000000000..d11cd08f03
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fc
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them.
+
+# --hints--
+
+You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
new file mode 100644
index 0000000000..ff29e839ca
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
@@ -0,0 +1,209 @@
+---
+id: 5d822fd413a79914d39e98fd
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore.
+
+# --hints--
+
+You should remove the `background-color` from `.bb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
new file mode 100644
index 0000000000..b11ad202cd
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
@@ -0,0 +1,260 @@
+---
+id: 5d822fd413a79914d39e98fe
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Create and add the following properties to `.bb2a`:
+
+```css
+margin: auto;
+width: 5vw;
+height: 5vw;
+border-top: 1vw solid #000;
+border-bottom: 1vw solid #000;
+border-left: 1vw solid #999;
+border-right: 1vw solid #999;
+```
+
+After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building.
+
+# --hints--
+
+You should give `.bb2a` a `margin` of `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto");
+```
+
+You should give `.bb2a` a `width` of `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw");
+```
+
+You should give `.bb2a` a `height` of `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw");
+```
+
+You should give `.bb2a` a `border-top` of `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)");
+```
+
+You should give `.bb2a` a `border-bottom` of `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)");
+```
+
+You should give `.bb2a` a `border-left` of `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)");
+```
+
+You should give `.bb2a` a `border-right` of `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
new file mode 100644
index 0000000000..162a47660b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
@@ -0,0 +1,238 @@
+---
+id: 5d822fd413a79914d39e98ff
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle.
+
+# --hints--
+
+You should remove the `width` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width);
+```
+
+You should remove the `height` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height);
+```
+
+You should change the `border-left` to use `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)");
+```
+
+You should change the `border-right` to use `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  width: 5vw;
+  height: 5vw;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 1vw solid #999;
+  border-right: 1vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
new file mode 100644
index 0000000000..c5fec5174a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9900
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible.
+
+# --hints--
+
+You should change the `border-left` to use `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent");
+```
+
+You should change the `border-right` to use `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid #999;
+  border-right: 5vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
new file mode 100644
index 0000000000..6bbdfc4dd9
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9901
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building.
+
+# --hints--
+
+You should remove the `margin` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin);
+```
+
+You should remove the `border-top` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
new file mode 100644
index 0000000000..b4ade49d2f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e9902
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end.
+
+# --hints--
+
+You should change `border-bottom` to use `5vh`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh");
+```
+
+You should change `border-bottom` to use `--building-color2`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)");
+```
+
+`border-bottom` should be `5vh solid var(--building-color2)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
new file mode 100644
index 0000000000..860d5af5d1
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9903
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings.
+
+# --hints--
+
+You should define a new property variable `--window-color3`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3"));
+```
+
+You should give `--window-color3` a value of `#d98cb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
new file mode 100644
index 0000000000..7898c0a157
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9904
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this:
+
+```css
+gradient-type(
+  direction,
+  color1,
+  color2
+);
+```
+
+Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`.
+
+# --hints--
+
+You should give `.bb3` a `background` using `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
+```
+
+You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should use `--building-color3` for the first two colors.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)");
+```
+
+You should use `--window-color3` at `15%` for the third color.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
new file mode 100644
index 0000000000..e54093892a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9905
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now.
+
+# --hints--
+
+You should remove the `background-color` from `.bb3`.
+
+```js
+assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
new file mode 100644
index 0000000000..ecd54aa637
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
@@ -0,0 +1,249 @@
+---
+id: 5d822fd413a79914d39e9906
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order.
+
+# --hints--
+
+You should add three `div` elements within `.bb4`.
+
+```js
+assert.equal(document.querySelector("div.bb4")?.children?.length, 3);
+```
+
+You should give the first new `div` a class of `bb4a`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should give the second new `div` a class of `bb4b`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should give the third new `div` a class of `bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4a + div.bb4b"));
+assert.exists(document.querySelector("div.bb4b + div.bb4c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb4"></div>
+--fcc-editable-region--
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
new file mode 100644
index 0000000000..230af5f23f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9907
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`.
+
+# --hints--
+
+You should give `.bb4a` a `width` of `3%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%");
+```
+
+You should give `.bb4a` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%");
+```
+
+You should give `.bb4b` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%");
+```
+
+You should give `.bb4b` a `height` of `5%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%");
+```
+
+You should give `.bb4c` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%");
+```
+
+You should give `.bb4c` a `height` of `85%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
new file mode 100644
index 0000000000..b4bce92acb
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9908
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled.
+
+# --hints--
+
+You should remove the `background-color` from `.bb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor);
+```
+
+You should give `.bb4a` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+You should give `.bb4b` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+You should give `.bb4c` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+}
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
new file mode 100644
index 0000000000..80590e7dcf
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9909
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding.
+
+# --hints--
+
+You should create a new class declaration called `building-wrap`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
new file mode 100644
index 0000000000..9649bd40b5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
@@ -0,0 +1,277 @@
+---
+id: 5d822fd413a79914d39e990a
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class.
+
+# --hints--
+
+You should remove `display` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display);
+```
+
+You should move `display` with a value of `flex` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex");
+```
+
+You should remove `flex-direction` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection);
+```
+
+You should move `flex-direction` with a value of `column` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column");
+```
+
+You should remove `align-items` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems);
+```
+
+You should move `align-items` with a value of `center` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.building-wrap {
+
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
new file mode 100644
index 0000000000..6df3d6c40c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
@@ -0,0 +1,254 @@
+---
+id: 5d822fd413a79914d39e990b
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it.
+
+# --hints--
+
+You should add `building-wrap` to the `.bb1` element.
+
+```js
+assert.exists(document.querySelector("div.bb1.building-wrap"));
+```
+
+You should add `building-wrap` to the `.bb4` element.
+
+```js
+assert.exists(document.querySelector("div.bb4.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+--fcc-editable-region--
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
new file mode 100644
index 0000000000..ccaa99d42b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e990c
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building.
+
+# --hints--
+
+You should define a new property variable `--window-color4`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4"));
+```
+
+You should give `--window-color4` a value of `#8cb3d9`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
new file mode 100644
index 0000000000..a4de0a094a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
@@ -0,0 +1,255 @@
+---
+id: 5d822fd413a79914d39e990d
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building.
+
+# --hints--
+
+You should add four `div` elements to `.bb4c`.
+
+```js
+assert.equal(document.querySelector(".bb4c")?.children?.length, 4);
+```
+
+You should give each new `div` a class of `bb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
new file mode 100644
index 0000000000..f9c206b5ae
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
@@ -0,0 +1,265 @@
+---
+id: 5d822fd413a79914d39e990e
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`.
+
+# --hints--
+
+You should give `.bb4-window` a `width` of `18%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%");
+```
+
+You should give `.bb4-window` a `height` of `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%");
+```
+
+You should give `.bb4-window` a `background-color` of `--window-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
new file mode 100644
index 0000000000..26d3ed042d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
@@ -0,0 +1,279 @@
+---
+id: 5d822fd413a79914d39e990f
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+
+The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `window-wrap`. Make `.window-wrap` a flexbox container, and use the `align-items` and `justify-content` properties to center its child elements vertically and evenly space them in their parent, respectively.
+
+# --hints--
+
+You should create a `.window-wrap` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap"));
+```
+
+You should give `.window-wrap` a `display` of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex");
+```
+
+You should give `.window-wrap` an `align-items` of `center`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center");
+```
+
+You should give `.window-wrap` a `justify-content` of `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
new file mode 100644
index 0000000000..07de740896
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
@@ -0,0 +1,266 @@
+---
+id: 5d822fd413a79914d39e9910
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Add the new `window-wrap` class to the `.bb4c` element.
+
+# --hints--
+
+You should add a class of `window-wrap` to `.bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4c.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
new file mode 100644
index 0000000000..f229fafb01
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
@@ -0,0 +1,291 @@
+---
+id: 5d822fd413a79914d39e9911
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order.
+
+# --hints--
+
+You should add three `div` elements within `.fb1`.
+
+```js
+assert.equal(document.querySelector("div.fb1")?.children?.length, 3);
+```
+
+You should give the first new `div` a class of `fb1a`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1a"));
+```
+
+You should give the second new `div` a class of `fb1b`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1b"));
+```
+
+You should give the third new `div` a class of `fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1c"));
+```
+
+You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1a + div.fb1b"));
+assert.exists(document.querySelector("div.fb1b + div.fb1c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1"></div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
new file mode 100644
index 0000000000..6ad5fc43f3
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
@@ -0,0 +1,287 @@
+---
+id: 5d822fd413a79914d39e9912
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`.
+
+# --hints--
+
+You should give `.fb1b` a `width` of `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%");
+```
+
+You should give `.fb1b` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%");
+```
+
+You should give `.fb1c` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%");
+```
+
+You should give `.fb1c` a `height` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
new file mode 100644
index 0000000000..ea0469fd67
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
@@ -0,0 +1,280 @@
+---
+id: 5d822fd413a79914d39e9913
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Add the `building-wrap` class to the `.fb1` element to center the sections.
+
+# --hints--
+
+You should add the class `building-wrap` to `.fb1`.
+
+```js
+assert.exists(document.querySelector("div.fb1.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
new file mode 100644
index 0000000000..5b271b0f99
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
@@ -0,0 +1,284 @@
+---
+id: 5d822fd413a79914d39e9914
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Move the `background-color` property and value from `.fb1` to `.fb1b`.
+
+# --hints--
+
+You should remove `background-color` from `.fb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor);
+```
+
+You should add a `background-color` of `--building-color4` to `.fb1b`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
new file mode 100644
index 0000000000..e914af1b32
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
@@ -0,0 +1,391 @@
+---
+id: 5d822fd413a79914d39e9915
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+You don't need the `background-color` for this building anymore so you can remove that property.
+
+# --hints--
+
+You should remove the `background-color` of `.fb5`.
+
+```js
+assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
new file mode 100644
index 0000000000..4f6ab3e002
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
@@ -0,0 +1,297 @@
+---
+id: 5d822fd413a79914d39e9916
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building.
+
+Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`.
+
+# --hints--
+
+You should give `.fb1c` a `background` with a `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient");
+```
+
+You should use a direction of `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should use a first color of `--building-color4` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+You should use a second color of `transparent` from `10%` to `15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(transparent10%,transparent15%\)|transparent10%15%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
new file mode 100644
index 0000000000..aea76037d0
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
@@ -0,0 +1,307 @@
+---
+id: 5d822fd413a79914d39e9917
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+You can add multiple gradients to an element by separating them with a comma (`,`) like this:
+
+```css
+gradient1(
+  colors
+),
+gradient2(
+  colors
+);
+```
+
+Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last.
+
+# --hints--
+
+You should not alter the first `repeating-linear-gradient`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/);
+```
+
+You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+You should use a second color of `--window-color4` from `10%` to `90%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(var\(--window-color4\)10%,var\(--window-color4\)90%\)|var\(--window-color4\)10%90%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    )
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
new file mode 100644
index 0000000000..849d448b9a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
@@ -0,0 +1,298 @@
+---
+id: 5d822fd413a79914d39e9918
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements.
+
+# --hints--
+
+You should give `.fb1a` a `border-bottom`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom);
+```
+
+You should use a `border-bottom` of `7vh solid var(--building-color4)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
new file mode 100644
index 0000000000..089b59b3cf
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
@@ -0,0 +1,301 @@
+---
+id: 5d822fd413a79914d39e9919
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide.
+
+# --hints--
+
+You should give `.fb1a` a `border-left` of `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent");
+```
+
+You should give `.fb1a` a `border-right` of `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+}
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
new file mode 100644
index 0000000000..99fb0d6368
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
@@ -0,0 +1,312 @@
+---
+id: 5d822fd413a79914d39e991a
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order.
+
+# --hints--
+
+You should add two `div` elements within `.fb2`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2);
+```
+
+You should give the first new `div` a class of `fb2a`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2a"));
+assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild);
+```
+
+You should give the second new `div` a class of `fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+--fcc-editable-region--
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
new file mode 100644
index 0000000000..a021e0bafe
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
@@ -0,0 +1,314 @@
+---
+id: 5d822fd413a79914d39e991b
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`.
+
+# --hints--
+
+You should give `.fb2a` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%");
+```
+
+You should give `.fb2b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%");
+```
+
+You should give `.fb2b` a `height` of `75%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b"></div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
new file mode 100644
index 0000000000..f050e5dec8
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
@@ -0,0 +1,317 @@
+---
+id: 5d822fd413a79914d39e991c
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building.
+
+# --hints--
+
+You should add three `div` elements within `.fb2b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3);
+```
+
+You should give the three new `div` elements each a class of `fb2-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
new file mode 100644
index 0000000000..fdeac5d1d1
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
@@ -0,0 +1,315 @@
+---
+id: 5d822fd413a79914d39e991d
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Add your `window-wrap` class to `.fb2b` to position the new window elements.
+
+# --hints--
+
+You should add the class `window-wrap` to `.fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2b.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
new file mode 100644
index 0000000000..32508c44ee
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
@@ -0,0 +1,326 @@
+---
+id: 5d822fd413a79914d39e991e
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable.
+
+# --hints--
+
+You should give the `.fb2-window` elements a `width` of `22%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%");
+```
+
+You should give the `.fb2-window` elements a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%");
+```
+
+You should give the `.fb2-window` elements a `background-color` of `--window-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
new file mode 100644
index 0000000000..51ec85b766
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
@@ -0,0 +1,324 @@
+---
+id: 5d822fd413a79914d39e991f
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container.
+
+# --hints--
+
+You should remove the `background-color` property from `.fb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor);
+```
+
+You should give `.fb2b` a `background-color` of `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
new file mode 100644
index 0000000000..309d57ea7c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
@@ -0,0 +1,330 @@
+---
+id: 5d822fd413a79914d39e9920
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape.
+
+# --hints--
+
+You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)");
+```
+
+You should give `.fb2a` a `border-left` of `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent");
+```
+
+You should give `.fb2a` a `border-right` of `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+--fcc-editable-region--
+.fb2a {
+  width: 100%;
+}
+--fcc-editable-region--
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
new file mode 100644
index 0000000000..0347b2e840
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9921
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two.
+
+# --hints--
+
+You should add four `div` elements within `.fb3`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4);
+```
+
+You should give the first new `div` a class of `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a"));
+```
+
+You should give the second new `div` a class of `fb3b`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b"));
+```
+
+You should give the third new `div` a class of `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a"));
+```
+
+You should give the fourth new `div` a class of `fb3b`.
+
+```js
+assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3"></div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
new file mode 100644
index 0000000000..6d78586a55
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
@@ -0,0 +1,347 @@
+---
+id: 5d822fd413a79914d39e9922
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`.
+
+# --hints--
+
+You should give `.fb3a` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%");
+```
+
+You should give `.fb3a` a `height` of `15%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%");
+```
+
+You should give `.fb3b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%");
+```
+
+You should give `.fb3b` a `height` of `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--  
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
new file mode 100644
index 0000000000..9d484855c3
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9923
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`.
+
+# --hints--
+
+You should remove the `background-color` from `.fb3`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor);
+```
+
+You should give `.fb3a` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+You should give `.fb3b` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
new file mode 100644
index 0000000000..9849c03bbc
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
@@ -0,0 +1,340 @@
+---
+id: 5d822fd413a79914d39e9924
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Add your `building-wrap` class to the `.fb3` element to center the sections.
+
+# --hints--
+
+You should add the class `building-wrap` to `.fb3`.
+
+```js
+assert.exists(document.querySelector("div.fb3.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
new file mode 100644
index 0000000000..777990a363
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
@@ -0,0 +1,346 @@
+---
+id: 5d822fd413a79914d39e9925
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section.
+
+# --hints--
+
+You should add three `div` elements within the first `.fb3a` element.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3);
+```
+
+You should give each new `div` a class of `fb3-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a"></div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
new file mode 100644
index 0000000000..2bdf0e99db
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
@@ -0,0 +1,355 @@
+---
+id: 5d822fd413a79914d39e9926
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value.
+
+# --hints--
+
+You should give `.fb3-window` a `width` of `25%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%");
+```
+
+You should give `.fb3-window` a `height` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%");
+```
+
+You should give `.fb3-window` a `background-color` of `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
new file mode 100644
index 0000000000..98bb84bfe6
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
@@ -0,0 +1,350 @@
+---
+id: 5d822fd413a79914d39e9927
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+Add your `window-wrap` class to the `.fb3a` element to center and space the windows.
+
+# --hints--
+
+You should give `.fb3a` a class of `window-wrap`.
+
+```js
+assert.exists(document.querySelector("div.fb3a.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
new file mode 100644
index 0000000000..ed19c0331b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
@@ -0,0 +1,349 @@
+---
+id: 5d822fd413a79914d39e9928
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+With CSS variables you can change values without searching everywhere in the stylesheet. Change the `--window-color1` value to `#bb99ff`.
+
+# --hints--
+
+You should change the value of `--window-color1` to `#bb99ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
new file mode 100644
index 0000000000..cc5626304a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
@@ -0,0 +1,362 @@
+---
+id: 5d822fd413a79914d39e9929
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Only three more buildings to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now.
+
+# --hints--
+
+You should add two `div` elements within `.fb4`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2);
+```
+
+You should give the first new `div` a class of `fb4a`.
+
+```js
+assert.exists(document.querySelector("div.fb4a"));
+```
+
+You should give the second new `div` a class of `fb4b`.
+
+```js
+assert.exists(document.querySelector("div.fb4b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+--fcc-editable-region--
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
new file mode 100644
index 0000000000..e5fef28c8c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
@@ -0,0 +1,359 @@
+---
+id: 5d822fd413a79914d39e992a
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Give `.fb4b` a `width` of `100%` and `height` of `89%`.
+
+# --hints--
+
+You should give `.fb4b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%");
+```
+
+You should give `.fb4b` a `height` of `89%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
new file mode 100644
index 0000000000..544a93886a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
@@ -0,0 +1,361 @@
+---
+id: 5d822fd413a79914d39e992b
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`.
+
+# --hints--
+
+You should remove the `background-color` from `.fb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor);
+```
+
+You should give `.fb4b` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
new file mode 100644
index 0000000000..ce604acaff
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
@@ -0,0 +1,364 @@
+---
+id: 5d822fd413a79914d39e992c
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`.
+
+# --hints--
+
+You should add six `div` elements within `.fb4b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6);
+```
+
+You should give each new `div` a class of `fb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+--fcc-editable-region--
+        <div class="fb4b"></div>
+--fcc-editable-region--
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
new file mode 100644
index 0000000000..3f062a2400
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992d
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building.
+
+# --hints--
+
+You should give `.fb4-window` a `width` of `30%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%");
+```
+
+You should give `.fb4-window` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%");
+```
+
+You should give `.fb4-window` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
new file mode 100644
index 0000000000..d39b2877ef
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
@@ -0,0 +1,374 @@
+---
+id: 5d822fd413a79914d39e992e
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space.
+
+# --hints--
+
+You should give `.fb4-window` a `background-color` of `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+You should give `.fb4-window` a `margin` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
new file mode 100644
index 0000000000..c006f27898
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992f
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+The windows are stacked on top of each other on the rightmost purple building. Turn the building into a flexbox parent, and use the `flex-wrap` property to put the windows side by side, and push them down to a new row when they don't fit.
+
+# --hints--
+
+You should give `.fb4b` a `display` of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex");
+```
+
+You should give `.fb4b` a `flex-wrap` of `wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
new file mode 100644
index 0000000000..6a95d78f33
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
@@ -0,0 +1,381 @@
+---
+id: 5d822fd413a79914d39e9930
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color.
+
+# --hints--
+
+You should give `.fb4a` a `border-top` of `5vh solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent")
+```
+
+You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
new file mode 100644
index 0000000000..cf534fc4d5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
@@ -0,0 +1,404 @@
+---
+id: 5d822fd413a79914d39e9931
+title: Step 106
+challengeType: 0
+dashedName: step-106
+---
+
+# --description--
+
+You can remove the `background-color` for this building now, since it isn't needed.
+
+# --hints--
+
+You should remove the `background-color` of `.fb6`.
+
+```js
+assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
new file mode 100644
index 0000000000..659058a647
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
@@ -0,0 +1,396 @@
+---
+id: 5d822fd413a79914d39e9932
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`.
+
+# --hints--
+
+You should give `.fb5` a `background` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background);
+```
+
+You should give the `background` a `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient");
+```
+
+You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/);
+```
+
+You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
new file mode 100644
index 0000000000..25ba879145
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9933
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows.
+
+# --hints--
+
+You should give `.fb5` a second `repeating-linear-gradient` in the `background` property.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/);
+```
+
+You should give the second `repeating-linear-gradient` a direction of `90deg`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/);
+```
+
+You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/);
+```
+
+You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    )
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
new file mode 100644
index 0000000000..9d6a5a5b02
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9934
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`.
+
+# --hints--
+
+You should add a `repeating-linear-gradient` to `.fb6` in the `background` property.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient");
+```
+
+You should give the `repeating-linear-gradient` a direction of `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
new file mode 100644
index 0000000000..4f27e41fc9
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9935
+title: Step 105
+challengeType: 0
+dashedName: step-105
+---
+
+# --description--
+
+Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors.
+
+# --hints--
+
+You should give `.fb6` a second `repeating-linear-gradient` in the `background` property.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/);
+```
+
+You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+    90deg,
+    var(--building-color3),
+    var(--building-color3) 10%,
+    transparent 10%,
+    transparent 30%
+  )
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
new file mode 100644
index 0000000000..7bd61afd38
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9936
+title: Step 107
+challengeType: 0
+dashedName: step-107
+---
+
+# --description--
+
+Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together.
+
+# --hints--
+
+You should remove the `border` from the `*` selector.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
new file mode 100644
index 0000000000..029d1e069c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
@@ -0,0 +1,403 @@
+---
+id: 5d822fd413a79914d39e9937
+title: Step 108
+challengeType: 0
+dashedName: step-108
+---
+
+# --description--
+
+Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline.
+
+# --hints--
+
+You should add a class of `sky` to `.background-buildings`.
+
+```js
+assert.exists(document.querySelector("div.background-buildings.sky"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
new file mode 100644
index 0000000000..56759e1359
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
@@ -0,0 +1,421 @@
+---
+id: 5d822fd413a79914d39e9938
+title: Step 109
+challengeType: 0
+dashedName: step-109
+---
+
+# --description--
+
+Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun.
+
+# --hints--
+
+You should give `.sky` a `radial-gradient` in the `background` property.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient");
+```
+
+You should give the `radial-gradient` a first color of `#ffcf33`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/);
+```
+
+You should give the `radial-gradient` a second color of `#ffff66` at `21%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/);
+```
+
+You should give the `radial-gradient` a third color of `#bbeeff` at `100%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
new file mode 100644
index 0000000000..80e000e8b6
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
@@ -0,0 +1,410 @@
+---
+id: 5d822fd413a79914d39e9939
+title: Step 110
+challengeType: 0
+dashedName: step-110
+---
+
+# --description--
+
+At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves.
+
+# --hints--
+
+You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.sky {
+  background: radial-gradient(
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
new file mode 100644
index 0000000000..d2ce95a6e6
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
@@ -0,0 +1,422 @@
+---
+id: 5d822fd413a79914d39e993a
+title: Step 111
+challengeType: 0
+dashedName: step-111
+---
+
+# --description--
+
+In the previous module you learned that media queries can be used to change styles based on certain conditions, and they look like this:
+
+```css
+@media (condition) {
+
+}  
+```
+
+Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less.
+
+# --hints--
+
+You should add an empty media query with `max-width: 1000px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
new file mode 100644
index 0000000000..3d0bf68b6e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
@@ -0,0 +1,424 @@
+---
+id: 5d822fd413a79914d39e993b
+title: Step 112
+challengeType: 0
+dashedName: step-112
+---
+
+# --description--
+
+Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night.
+
+Note: You are going to need to scroll past the editable region to copy the class.
+
+# --hints--
+
+You should not delete the existing `.sky` declaration.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/);
+```
+
+You should copy the existing `.sky` declaration into the media query.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+@media (max-width: 1000px) {
+
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
new file mode 100644
index 0000000000..ce748ba40e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
@@ -0,0 +1,437 @@
+---
+id: 5d822fd413a79914d39e993c
+title: Step 113
+challengeType: 0
+dashedName: step-113
+---
+
+# --description--
+
+In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors.
+
+# --hints--
+
+You should change the first color values from `#ffcf33` to `#ccc`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/);
+```
+
+You should change the second color value from `#ffff66` to `#445`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/);
+```
+
+You should change the third color value from `#bbeeff` to `#223`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+closest-corner circle at 15% 15%,
+#ffcf33,
+#ffcf33 20%,
+#ffff66 21%,
+#bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3),
+var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color4),
+var(--building-color4) 10%,
+transparent 10%,
+transparent 15%
+    ),
+    repeating-linear-gradient(
+var(--building-color4),
+var(--building-color4) 10%,
+var(--window-color4) 10%,
+var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 5%,
+transparent 5%,
+transparent 10%
+    ),
+    repeating-linear-gradient(
+90deg,
+var(--building-color2),
+var(--building-color2) 12%,
+var(--window-color2) 12%,
+var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3) 10%,
+transparent 10%,
+transparent 30%
+    ),
+    repeating-linear-gradient(
+var(--building-color3),
+var(--building-color3) 10%,
+var(--window-color3) 10%,
+var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+  closest-corner circle at 15% 15%,
+  #ffcf33,
+  #ffcf33 20%,
+  #ffff66 21%,
+  #bbeeff 100%
+);
+  }
+--fcc-editable-region--
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
new file mode 100644
index 0000000000..57b5bb2de1
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
@@ -0,0 +1,450 @@
+---
+id: 5d822fd413a79914d39e993d
+title: Step 114
+challengeType: 0
+dashedName: step-114
+---
+
+# --description--
+
+Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there.
+
+# --hints--
+
+You should add a `:root` selector to the media query.
+
+```js
+assert.notDeepEqual(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root"), undefined);
+```
+
+You should add `--building-color1` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000");
+```
+
+You should add `--building-color2` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000");
+```
+
+You should add `--building-color3` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000");
+```
+
+You should add `--building-color4` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
new file mode 100644
index 0000000000..2b670dee03
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
@@ -0,0 +1,862 @@
+---
+id: 5d822fd413a79914d39e993e
+title: Step 115
+challengeType: 0
+dashedName: step-115
+---
+
+# --description--
+
+Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night.
+
+Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great!
+
+# --hints--
+
+You should add `--window-color1` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777");
+```
+
+You should add `--window-color2` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777");
+```
+
+You should add `--window-color3` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777");
+```
+
+You should add `--window-color4` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+  }
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+    --window-color1: #777;
+    --window-color2: #777;
+    --window-color3: #777;
+    --window-color4: #777;
+  }
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
new file mode 100644
index 0000000000..6a1bfc5b2b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
@@ -0,0 +1,65 @@
+---
+id: 619665c9abd72906f3ad30f9
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You will be building a happy Flappy Penguin, and further practicing CSS transforms and animations in the process.
+
+Begin with linking your stylesheet to the page.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.exists(document.querySelector('link'));
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
new file mode 100644
index 0000000000..2572b413a4
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
@@ -0,0 +1,56 @@
+---
+id: 61967e74a8e3690ab6292daa
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`.
+
+# --hints--
+
+You should use the `body` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+You should use the `background` property in the `body` selector.
+
+```js
+assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background'));
+```
+
+You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
new file mode 100644
index 0000000000..67e0a51de0
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
@@ -0,0 +1,53 @@
+---
+id: 61968df2acd5550bf1616c34
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Normalize your page's sizing, by removing the `body` element's `margin` and `padding`.
+
+# --hints--
+
+You should give `body` a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+You should give `body` a `padding` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
new file mode 100644
index 0000000000..ec42f16803
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
@@ -0,0 +1,51 @@
+---
+id: 61968e9243a4090cc805531c
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Remove both the horizontal and vertical scrollbars, using only one property.
+
+# --hints--
+
+You should give `body` an `overflow` of `--fcc-expected--`. But found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
new file mode 100644
index 0000000000..75b3097c34
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
@@ -0,0 +1,64 @@
+---
+id: 61968f8877c6720d6d61aaf5
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within the `body`, add a `div` with a `class` of `ground`.
+
+# --hints--
+
+You should add a new `div`.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+You should give the `div` a `class` of `ground`.
+
+```js
+assert.include(document.querySelector('div')?.className, 'ground');
+```
+
+You should place the `div` within the `body`.
+
+```js
+assert.exists(document.querySelector('body > div.ground'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
new file mode 100644
index 0000000000..2e20bd3589
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
@@ -0,0 +1,66 @@
+---
+id: 619691693bc14b0e528f5a20
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`.
+
+# --hints--
+
+You should use the `.ground` selector.
+
+```js
+assert.match(code, /\.ground\s*\{/);
+```
+
+You should give the `.ground` element a `width` of `100vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw');
+```
+
+You should give the `.ground` element a `height` of `400px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
new file mode 100644
index 0000000000..afa5d6f94b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
@@ -0,0 +1,58 @@
+---
+id: 6196928658b6010f28c39484
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`.
+
+# --hints--
+
+You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
new file mode 100644
index 0000000000..606e749c43
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
@@ -0,0 +1,73 @@
+---
+id: 619692ff79f5770fc6d8c0b4
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin.
+
+# --hints--
+
+You should add a new `div` within the `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 2);
+```
+
+You should give the `div` a `class` of `penguin`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin');
+```
+
+You should place `div.penguin` before `div.ground`.
+
+```js
+assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
new file mode 100644
index 0000000000..46ebd08c10
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
@@ -0,0 +1,75 @@
+---
+id: 6196990f966e8f10a40094f6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Target the `.penguin` element, and set its `width` and `height` to `300px`.
+
+# --hints--
+
+You should use the `.penguin` selector.
+
+```js
+assert.match(code, /\.penguin\s*\{/);
+```
+
+You should give `.penguin` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
+```
+
+You should give `.penguin` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
new file mode 100644
index 0000000000..860cde3323
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
@@ -0,0 +1,74 @@
+---
+id: 619699c10a0f6e11591d73c4
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`.
+
+# --hints--
+
+You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto');
+```
+
+You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
new file mode 100644
index 0000000000..3fa5992f53
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
@@ -0,0 +1,83 @@
+---
+id: 61969aa6acef5b12200f672e
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To create some scenery in the background, you will add two mountains.
+
+Above the `.penguin` element, add a `div` with a `class` of `left-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `left-mountain`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain');
+```
+
+You should place `.left-mountain` before `.penguin`.
+
+```js
+assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
new file mode 100644
index 0000000000..3568d09eeb
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
@@ -0,0 +1,89 @@
+---
+id: 61969c487ced6f12db8fef94
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`.
+
+# --hints--
+
+You should use the `.left-mountain` selector.
+
+```js
+assert.match(code, /\.left-mountain\s*\{/);
+```
+
+You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
+```
+
+You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
+```
+
+You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
new file mode 100644
index 0000000000..e8eba6e4ec
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
@@ -0,0 +1,76 @@
+---
+id: 61969d66cfcdba137d021558
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
new file mode 100644
index 0000000000..a182060c6c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
@@ -0,0 +1,91 @@
+---
+id: 61969e7451455614217e901b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by.
+
+Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis.
+
+# --hints--
+
+You should give `.left-mountain` a `transform` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
+```
+
+You should use the `skew` function on `transform`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
+```
+
+You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
new file mode 100644
index 0000000000..dc15f9983e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
@@ -0,0 +1,90 @@
+---
+id: 6196adc17f77a714d51485f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Set the stack level of the mountain element such that it remains directly behind the `.ground` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+You should not change the `z-index` of the `.ground` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
new file mode 100644
index 0000000000..870ce25dc1
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
@@ -0,0 +1,86 @@
+---
+id: 6196aead7ac7bf1584b17a7f
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`.
+
+# --hints--
+
+You should give `.left-mountain` a `margin-top` of `100px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px');
+```
+
+You should give `.ground` a `margin-top` of `-58px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
new file mode 100644
index 0000000000..b6ddd5cad7
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
@@ -0,0 +1,92 @@
+---
+id: 6196ce0415498d2463989e84
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 4);
+```
+
+You should give the `div` a `class` of `back-mountain`.
+
+```js
+assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain');
+```
+
+You should place `.back-mountain` after `.left-mountain`.
+
+```js
+assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
new file mode 100644
index 0000000000..bcbe4d3e9d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
@@ -0,0 +1,100 @@
+---
+id: 6196cee94c6da1253809dff9
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`.
+
+# --hints--
+
+You should use the `.back-mountain` selector.
+
+```js
+assert.match(code, /\.back-mountain\s*\{/);
+```
+
+You should give `.back-mountain` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px');
+```
+
+You should give `.back-mountain` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px');
+```
+
+You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
new file mode 100644
index 0000000000..4bb9ea8634
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
@@ -0,0 +1,87 @@
+---
+id: 6196d00a5d7292262bc02f4c
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.back-mountain` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
new file mode 100644
index 0000000000..d3fd004502
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
@@ -0,0 +1,100 @@
+---
+id: 6196d0cda039d026f7f78d1e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1');
+```
+
+You should not change the `z-index` of the `.left-mountain` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
new file mode 100644
index 0000000000..cdd348db03
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
@@ -0,0 +1,131 @@
+---
+id: 6196d1ac33c68d27dcda5796
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`.
+
+# --hints--
+
+You should use the `transform` property to rotate the element.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.notEmpty(backMountain?.transform);
+} else {
+  assert.notEmpty(backMountain?.rotate);
+}
+```
+
+You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.equal(backMountain?.transform, 'rotate(45deg)');
+} else {
+  assert.equal(backMountain?.rotate, '45deg');
+}
+```
+
+You should give `.back-mountain` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
+```
+
+You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
+```
+
+You should give `.back-mountain` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
+```
+
+You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
new file mode 100644
index 0000000000..151831dbd7
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
@@ -0,0 +1,104 @@
+---
+id: 6196d213d99f16287bff22ae
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`.
+
+# --hints--
+
+You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 5);
+```
+
+You should give the new `div` element a `class` of `sun`.
+
+```js
+assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun');
+```
+
+You should place the new `div` element immediately after the `.back-mountain` element.
+
+```js
+assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
new file mode 100644
index 0000000000..61cf99cfee
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
@@ -0,0 +1,112 @@
+---
+id: 6196d2c0f22ca0293107c048
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`.
+
+# --hints--
+
+You should use the `.sun` selector.
+
+```js
+assert.match(code, /\.sun\s*\{/);
+```
+
+You should give `.sun` a `width` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px');
+```
+
+You should give `.sun` a `height` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px');
+```
+
+You should give `.sun` a `background-color` of `yellow`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
new file mode 100644
index 0000000000..f924e1d525
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
@@ -0,0 +1,105 @@
+---
+id: 6196d32d1340d829f0f6f57d
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle.
+
+# --hints--
+
+You should give `.sun` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute');
+```
+
+You should give `.sun` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
new file mode 100644
index 0000000000..969618185d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
@@ -0,0 +1,107 @@
+---
+id: 6196d41d40bf9b2aaea5d520
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen.
+
+# --hints--
+
+You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px');
+```
+
+You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
new file mode 100644
index 0000000000..1253455f06
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
@@ -0,0 +1,118 @@
+---
+id: 6197cff995d03905b0cca8ad
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Your penguin will consist of two main sections: the head, and the body.
+
+Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`.
+
+# --hints--
+
+You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `penguin-head`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head');
+```
+
+You should give the second `div` a `class` of `penguin-body`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+--fcc-editable-region--
+    <div class="penguin">
+
+    </div>
+--fcc-editable-region--
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
new file mode 100644
index 0000000000..5256d40e7d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
@@ -0,0 +1,125 @@
+---
+id: 6197f40a16afea068c7e60c8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex);
+```
+
+You should give the `.penguin` element a `z-index` of `4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4');
+```
+
+You should give `.penguin` a `position` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position);
+```
+
+You should give `.penguin` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
new file mode 100644
index 0000000000..c34e5dc0b5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
@@ -0,0 +1,65 @@
+---
+id: 6197f667297bb30a552ce017
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`.
+
+# --hints--
+
+You should give `.ground` a `z-index` of `3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+You should give `.ground` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
new file mode 100644
index 0000000000..4f42960c10
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
@@ -0,0 +1,128 @@
+---
+id: 61993b72e874e709b8dfd666
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`.
+
+# --hints--
+
+You should use the `.penguin-head` selector.
+
+```js
+assert.match(code, /\.penguin-head\s*\{/);
+```
+
+You should give `.penguin-head` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%');
+```
+
+You should give `.penguin-head` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`.
+
+```js
+assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
new file mode 100644
index 0000000000..837b66e7b8
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
@@ -0,0 +1,122 @@
+---
+id: 61993cf26a8e0f0a553db223
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+_Most_ penguins do not have a square head.
+
+Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`.
+
+# --hints--
+
+You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`.
+
+```js
+// Maybe check for individual border-radius properties?
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
new file mode 100644
index 0000000000..42992c942d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
@@ -0,0 +1,139 @@
+---
+id: 61993dbb35adf30b10d49e38
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.
+
+# --hints--
+
+You should use the `.penguin-body` selector.
+
+```js
+assert.match(code, /\.penguin-body\s*\{/);
+```
+
+You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
+```
+
+You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
+```
+
+You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
new file mode 100644
index 0000000000..1304f820e2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
@@ -0,0 +1,133 @@
+---
+id: 61993e9adc9e9a0bb4d28fff
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Another interesting fact about penguins is that they do not have square bodies.
+
+Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body.
+
+# --hints--
+
+You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
new file mode 100644
index 0000000000..177fa37ed7
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
@@ -0,0 +1,139 @@
+---
+id: 6199409834ccaf0d10736596
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`.
+
+# --hints--
+
+You should use the `.penguin *` selector.
+
+```js
+assert.match(code, /\.penguin\s*\*\s*\{/);
+```
+
+You should give `.penguin *` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
new file mode 100644
index 0000000000..39d2becaa7
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
@@ -0,0 +1,154 @@
+---
+id: 6199429802b7c10dc79ff871
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-head` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
+```
+
+You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
+```
+
+You should give `.penguin-head` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
+```
+
+You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
new file mode 100644
index 0000000000..06adbcbaed
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
@@ -0,0 +1,156 @@
+---
+id: 619943285a41720e6370d985
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top);
+```
+
+You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%');
+```
+
+You should give `.penguin-body` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left);
+```
+
+You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
new file mode 100644
index 0000000000..841e0fac70
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
@@ -0,0 +1,146 @@
+---
+id: 619943876b706d0f35c01dbc
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex);
+```
+
+You should give the `.penguin-head` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
new file mode 100644
index 0000000000..71620d485d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
@@ -0,0 +1,148 @@
+---
+id: 6199442866286d0ff421a4fc
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string.
+
+# --hints--
+
+You should use the `.penguin-body::before` selector.
+
+```js
+assert.match(code, /\.penguin-body::before\s*\{/);
+```
+
+You should give `.penguin-body::before` a `content` of `""`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
new file mode 100644
index 0000000000..95939a0a79
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
@@ -0,0 +1,145 @@
+---
+id: 619bcf239fc15905ecd66fce
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Position the pseudo-element relative to its closest positioned ancestor.
+
+# --hints--
+
+You should give `.penguin-body::before` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
new file mode 100644
index 0000000000..144a263043
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
@@ -0,0 +1,158 @@
+---
+id: 619be73b3c806006ccc00bb0
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`.
+
+# --hints--
+
+You should give `.penguin-body::before` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
+```
+
+You should give `.penguin-body::before` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%');
+```
+
+You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
new file mode 100644
index 0000000000..32e8d7967e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Position the pseudo-element `10%` from the top and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
new file mode 100644
index 0000000000..f22f0e3944
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
@@ -0,0 +1,160 @@
+---
+id: 619be80062551a080e32c821
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`.
+
+# --hints--
+
+You should use the `border-radius` property to round off the crest.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
+```
+
+You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
new file mode 100644
index 0000000000..1c9a12db86
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
@@ -0,0 +1,152 @@
+---
+id: 619be8ce4ea49008c5bfbc30
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Increase the pseudo-element's transparency by `30%`.
+
+# --hints--
+
+You should give `.penguin-body::before` an `opacity` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
new file mode 100644
index 0000000000..088e47ba55
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
@@ -0,0 +1,166 @@
+---
+id: 619be946958c6009844f1dee
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`.
+
+# --hints--
+
+You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
+```
+
+You should give the second `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
new file mode 100644
index 0000000000..e25cfd80ce
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
@@ -0,0 +1,193 @@
+---
+id: 619c155df0063a0a3fec0e32
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`.
+
+# --hints--
+
+You should use the `.face` selector.
+
+```js
+assert.match(code, /\.face\s*\{/);
+```
+
+You should give `.face` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
+```
+
+You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
+```
+
+You should give `.face` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
+```
+
+You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
+```
+
+You should give `.face` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
+```
+
+You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
new file mode 100644
index 0000000000..999faf2cd7
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
@@ -0,0 +1,165 @@
+---
+id: 619c16debd0c270b01c5ce38
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`.
+
+# --hints--
+
+You should give `.face` a `border-radius` of `70% 70% 60% 60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
new file mode 100644
index 0000000000..1204286781
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
@@ -0,0 +1,169 @@
+---
+id: 619cfdf2e63ddf05feab86ad
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Position the `.face` elements so that they are `15%` from the top.
+
+# --hints--
+
+You should give `.face` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top);
+```
+
+You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
new file mode 100644
index 0000000000..3529e08289
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
@@ -0,0 +1,171 @@
+---
+id: 619d019488f98c06acbbb71a
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Currently, the two `.face` elements are on top of each other.
+
+Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element.
+
+# --hints--
+
+You should give a `class` of `left` to the first `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left');
+```
+
+You should give a `class` of `right` to the second `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
new file mode 100644
index 0000000000..cdb0268e02
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
@@ -0,0 +1,177 @@
+---
+id: 619d022dc8400c0763829a17
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Target the `.face` element with the `left` class, and position it `5%` left of its parent.
+
+# --hints--
+
+You should use the `.face.left` selector.
+
+```js
+assert.match(code, /\.face\.left\s*\{/);
+```
+
+You should give `.face.left` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left);
+```
+
+You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
new file mode 100644
index 0000000000..c81e359b35
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
@@ -0,0 +1,181 @@
+---
+id: 619d02c7bc95bf0827a5d296
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Target the `.face` element with the `right` class, and position it `5%` right of its parent.
+
+# --hints--
+
+You should use the `.face.right` selector.
+
+```js
+assert.match(code, /\.face\.right\s*\{/);
+```
+
+You should give `.face.right` a `right` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
+```
+
+You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+.face.left {
+  left: 5%;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
new file mode 100644
index 0000000000..7101cc6218
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
@@ -0,0 +1,184 @@
+---
+id: 619d033915012509031f309a
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Below the `.face.right` element, add a `div` element with a `class` of `chin`.
+
+# --hints--
+
+You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `chin`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.chin'));
+```
+
+You should place the `div` element below the `.face.right` element.
+
+```js
+assert.exists(document.querySelector('.face.right + .chin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
new file mode 100644
index 0000000000..8ff7447615
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
@@ -0,0 +1,210 @@
+---
+id: 619d03dadadb6509a16f4f5f
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`.
+
+# --hints--
+
+You should use the `.chin` selector.
+
+```js
+assert.match(code, /\.chin\s*\{/);
+```
+
+You should give `.chin` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width);
+```
+
+You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%');
+```
+
+You should give `.chin` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height);
+```
+
+You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%');
+```
+
+You should give `.chin` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor);
+```
+
+You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
new file mode 100644
index 0000000000..9177d13254
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
@@ -0,0 +1,206 @@
+---
+id: 619d0503e03a790a4179d463
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`.
+
+# --hints--
+
+You should give `.chin` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top);
+```
+
+You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%');
+```
+
+You should give `.chin` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left);
+```
+
+You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%');
+```
+
+You should give `.chin` a `border-radius` of `70% 70% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
new file mode 100644
index 0000000000..ca096090f1
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
@@ -0,0 +1,197 @@
+---
+id: 619d05c54dabca0b10058235
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+So far, the `.face` and `.chin` elements have the same `background-color`.
+
+Create a custom CSS property called `--penguin-face`, and set it to `white`.
+
+# --hints--
+
+You should use the `:root` selector.
+
+```js
+assert.match(code, /:root\s*\{/);
+```
+
+You should give `:root` a `--penguin-face` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face'));
+```
+
+You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
new file mode 100644
index 0000000000..207c0664d1
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
@@ -0,0 +1,197 @@
+---
+id: 619d0882f54bf40bdc4671ed
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Where relevant, replace property values with your `--penguin-face` variable.
+
+# --hints--
+
+You should give `.face` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should give `.chin` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should not use `var(--penguin-face)` in the `.penguin-body` selector.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
new file mode 100644
index 0000000000..a7caac10b5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
@@ -0,0 +1,222 @@
+---
+id: 619d090cd8d6db0c93dc5087
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5);
+```
+
+You should give the first new `div` a `class` of `eye`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye'));
+```
+
+You should give the second new `div` a `class` of `eye`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.right'));
+```
+
+You should place `div.eye.left` after `div.chin`.
+
+```js
+assert.exists(document.querySelector('.chin + .eye.left'));
+```
+
+You should place `div.eye.right` after `div.eye.left`.
+
+```js
+assert.exists(document.querySelector('.eye.left + .eye.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
new file mode 100644
index 0000000000..e2f3ce9e93
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
@@ -0,0 +1,207 @@
+---
+id: 619d0b51ca42ed0d74582186
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`.
+
+# --hints--
+
+You should use the `.eye` selector.
+
+```js
+assert.match(code, /\.eye\s*\{/);
+```
+
+You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%');
+```
+
+You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%');
+```
+
+You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
new file mode 100644
index 0000000000..a4e7d18c12
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
@@ -0,0 +1,200 @@
+---
+id: 619d0bc9cb05360e1bf549c3
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%');
+```
+
+You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
new file mode 100644
index 0000000000..b567a24805
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
@@ -0,0 +1,215 @@
+---
+id: 619d0c1594c38c0ebae75878
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent.
+
+# --hints--
+
+You should use the `.eye.left` selector.
+
+```js
+assert.match(code, /\.eye\.left\s*\{/);
+```
+
+You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%');
+```
+
+You should use the `.eye.right` selector.
+
+```js
+assert.match(code, /\.eye\.right\s*\{/);
+```
+
+You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
new file mode 100644
index 0000000000..2d324e7251
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
@@ -0,0 +1,225 @@
+---
+id: 619d0d18ca99870f884a7bff
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Within each `.eye` element, add a `div` with a `class` of `eye-lid`.
+
+# --hints--
+
+You should add one `div` element within `.eye.left`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
+```
+
+You should add one `div` element within `.eye.right`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
+```
+
+You should give the first new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.left > div.eye-lid'));
+```
+
+You should give the second new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.right > div.eye-lid'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+
+        </div>
+        <div class="eye right">
+
+        </div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
new file mode 100644
index 0000000000..224cfce88b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
@@ -0,0 +1,227 @@
+---
+id: 619d0daf214542102739b0da
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`.
+
+# --hints--
+
+You should use the `.eye-lid` selector.
+
+```js
+assert.match(code, /\.eye-lid\s*\{/);
+```
+
+You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%');
+```
+
+You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%');
+```
+
+You should give `.eye-lid` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
new file mode 100644
index 0000000000..e779df5c2d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
@@ -0,0 +1,226 @@
+---
+id: 619d0e56f9ca9710fcb974e3
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%');
+```
+
+You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%');
+```
+
+You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
new file mode 100644
index 0000000000..ed405abe92
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
@@ -0,0 +1,247 @@
+---
+id: 619d0eec0ac40611b41e2ccc
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7);
+```
+
+You should give the first new `div` a `class` of `blush`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush'));
+```
+
+You should give the second new `div` a `class` of `blush`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.right'));
+```
+
+You should place `.blush.right` after `.blush.left`.
+
+```js
+assert.exists(document.querySelector('.blush.left + .blush.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
new file mode 100644
index 0000000000..a346767374
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
@@ -0,0 +1,238 @@
+---
+id: 619d0fc9825c271253df28d4
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`.
+
+# --hints--
+
+You should use the `.blush` selector.
+
+```js
+assert.match(code, /\.blush\s*\{/);
+```
+
+You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%');
+```
+
+You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%');
+```
+
+You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
new file mode 100644
index 0000000000..78310b8e23
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
@@ -0,0 +1,231 @@
+---
+id: 619d102d786c3d13124c37c6
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%');
+```
+
+You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
new file mode 100644
index 0000000000..9431c4764e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
@@ -0,0 +1,246 @@
+---
+id: 619d107edf7ddf13cc77106a
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent.
+
+# --hints--
+
+You should use the `.blush.left` selector.
+
+```js
+assert.match(code, /\.blush\.left\s*\{/);
+```
+
+You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%');
+```
+
+You should use the `.blush.right` selector.
+
+```js
+assert.match(code, /\.blush\.right\s*\{/);
+```
+
+You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
new file mode 100644
index 0000000000..39348186b5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
@@ -0,0 +1,271 @@
+---
+id: 619d10cc98145f14820399c5
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9);
+```
+
+You should give the first new `div` a `class` of `beak`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak'));
+```
+
+You should give the second new `div` a `class` of `beak`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `top`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.top'));
+```
+
+You should give the second new `div` a `class` of `bottom`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.bottom'));
+```
+
+You should place `div.beak.top` after `div.blush.right`.
+
+```js
+assert.exists(document.querySelector('.blush.right + .beak.top'));
+```
+
+You should place `div.beak.bottom` after `div.beak.top`.
+
+```js
+assert.exists(document.querySelector('.beak.top + .beak.bottom'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
new file mode 100644
index 0000000000..ea381856af
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
@@ -0,0 +1,256 @@
+---
+id: 619d115e2adcd71538e82ebb
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should use the `.beak` selector.
+
+```js
+assert.match(code, /\.beak\s*\{/);
+```
+
+You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%');
+```
+
+You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange');
+```
+
+You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
new file mode 100644
index 0000000000..d1617d8dce
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
@@ -0,0 +1,262 @@
+---
+id: 619d11e6d5ef9515d2a16033
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent.
+
+# --hints--
+
+You should use the `.beak.top` selector.
+
+```js
+assert.match(code, /\.beak\.top\s*\{/);
+```
+
+You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%');
+```
+
+You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%');
+```
+
+You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
new file mode 100644
index 0000000000..e580633578
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
@@ -0,0 +1,267 @@
+---
+id: 619d129a417d0716a94de913
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`.
+
+# --hints--
+
+You should use the `.beak.bottom` selector.
+
+```js
+assert.match(code, /\.beak\.bottom\s*\{/);
+```
+
+You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%');
+```
+
+You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%');
+```
+
+You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
new file mode 100644
index 0000000000..4773a10cef
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
@@ -0,0 +1,267 @@
+---
+id: 619d1340361095175f4b5115
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element.
+
+# --hints--
+
+You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
+```
+
+You should give the new `div` a `class` of `shirt`.
+
+```js
+assert.exists(document.querySelector('.penguin > div.shirt'));
+```
+
+You should place the new `div` before `.penguin-body`.
+
+```js
+assert.exists(document.querySelector('.shirt + .penguin-body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
new file mode 100644
index 0000000000..ff117fcdd8
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
@@ -0,0 +1,263 @@
+---
+id: 619d15797b580c1828b05426
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Within the `.shirt` element, add a `div` with the following emoji as content: 💜
+
+# --hints--
+
+You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
+```
+
+You should give the new `div` a content of `💜`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > div')?.textContent, '💜');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
new file mode 100644
index 0000000000..b0330c317b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
@@ -0,0 +1,264 @@
+---
+id: 619d15d955d9d418c4487bbc
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS`
+
+# --hints--
+
+You should add one `p` element within `.shirt`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > p')?.length, 1);
+```
+
+You should give the `p` element the content `I CSS`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+        <div>💜</div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
new file mode 100644
index 0000000000..2ca7d6a5d8
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
@@ -0,0 +1,278 @@
+---
+id: 619d1629a8adc61960ca8b40
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`.
+
+# --hints--
+
+You should use the `.shirt` selector.
+
+```js
+assert.match(code, /\.shirt\s*\{/);
+```
+
+You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px');
+```
+
+You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif');
+```
+
+You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
new file mode 100644
index 0000000000..c21bb0f24d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
@@ -0,0 +1,272 @@
+---
+id: 619d1c5fc9f8941a400955da
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+In some browsers, the _heart_ emoji may look slightly different from the previous step. This is because some of the character's properties were overridden by the `font-weight` style of `bold`.
+
+Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value.
+
+# --hints--
+
+You should use the `.shirt div` selector to target the `div` with the heart emoji.
+
+```js
+assert.match(code, /\.shirt div\s*\{/);
+```
+
+You should give the `.shirt div` a `font-weight` of `initial` or `normal`.
+
+```js
+assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
new file mode 100644
index 0000000000..79b1e394fb
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
@@ -0,0 +1,273 @@
+---
+id: 619d1dab9ff3421ae1976991
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent.
+
+# --hints--
+
+You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px');
+```
+
+You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+.shirt div {
+  font-weight: initial;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
new file mode 100644
index 0000000000..0c23ce14f1
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
@@ -0,0 +1,281 @@
+---
+id: 619d1deb8b04811b8839ffe4
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element.
+
+# --hints--
+
+You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px');
+```
+
+You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px');
+```
+
+You should give the `.shirt` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
new file mode 100644
index 0000000000..e650139f7e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
@@ -0,0 +1,272 @@
+---
+id: 619d1e7a8e81a61c5a819dc4
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+For the shirt's final touch, set the `color` to `#6a6969`.
+
+# --hints--
+
+You should give `.shirt` a `color` of `#6a6969`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
new file mode 100644
index 0000000000..a3dc1fdbf5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
@@ -0,0 +1,306 @@
+---
+id: 619d1ed33c9a071cf657a0d6
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Fun fact: Penguins cannot stand without at least two feet.
+
+Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `foot`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot'));
+```
+
+You should give the second new `div` a `class` of `foot`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.right'));
+```
+
+You should place `.foot.right` after `.foot.left`.
+
+```js
+assert.exists(document.querySelector('.foot.left + .foot.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
new file mode 100644
index 0000000000..f685b84cb6
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
@@ -0,0 +1,295 @@
+---
+id: 619d1fb5d244c31db8a7fdb7
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`.
+
+# --hints--
+
+You should use the `.foot` selector.
+
+```js
+assert.match(code, /\.foot\s*\{/);
+```
+
+You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%');
+```
+
+You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%');
+```
+
+You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
new file mode 100644
index 0000000000..e26cf4e13a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
@@ -0,0 +1,288 @@
+---
+id: 619d204bd73ae51e743b8e94
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%');
+```
+
+You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
new file mode 100644
index 0000000000..b4d5cd859d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
@@ -0,0 +1,304 @@
+---
+id: 619d20b12996101f430920fb
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+The penguin's beak and feet share the same `color`.
+
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-picorna` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna'));
+```
+
+You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange');
+```
+
+You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+  top: 85%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
new file mode 100644
index 0000000000..d2083801b8
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
@@ -0,0 +1,304 @@
+---
+id: 619d21fe6a3f9b2016be9d9d
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent.
+
+# --hints--
+
+You should use the `.foot.left` selector.
+
+```js
+assert.match(code, /\.foot\.left\s*\{/);
+```
+
+You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%');
+```
+
+You should use the `.foot.right` selector.
+
+```js
+assert.match(code, /\.foot\.right\s*\{/);
+```
+
+You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
new file mode 100644
index 0000000000..003b9709c0
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
@@ -0,0 +1,312 @@
+---
+id: 619d229b0e542520cd91c685
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`.
+
+# --hints--
+
+You should give `.foot.left` a `transform` of `rotate(80deg)`.
+
+```js
+const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left');
+
+if (leftFoot?.transform) {
+  assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)');
+} else {
+  assert.equal(leftFoot.getPropVal('rotate', true), '80deg');
+}
+```
+
+You should give `.foot.right` a `transform` of `rotate(-80deg)`.
+
+```js
+const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right');
+
+if (rightFoot?.transform) {
+  assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)');
+} else {
+  assert.equal(rightFoot.getPropVal('rotate', true), '-80deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.foot.left {
+  left: 25%;
+
+}
+
+.foot.right {
+  right: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
new file mode 100644
index 0000000000..ef45038dbc
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
@@ -0,0 +1,295 @@
+---
+id: 619d23089e787e216a7043d6
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element.
+
+# --hints--
+
+You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
new file mode 100644
index 0000000000..906076ce8b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
@@ -0,0 +1,328 @@
+---
+id: 619d237a107c10221ed743fa
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Fun fact: Penguins cannot fly without wings.
+
+Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4);
+```
+
+You should give the first new `div` a `class` of `arm`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm'));
+```
+
+You should give the second new `div` a `class` of `arm`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.right'));
+```
+
+You should place `.arm.right` after `.arm.left`.
+
+```js
+assert.exists(document.querySelector('.arm.left + .arm.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
new file mode 100644
index 0000000000..94dcb78521
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
@@ -0,0 +1,317 @@
+---
+id: 619d26b12e651022d80cd017
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`.
+
+# --hints--
+
+You should use the `.arm` selector.
+
+```js
+assert.match(code, /\.arm\s*\{/);
+```
+
+You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%');
+```
+
+You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
+
+```js
+assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
new file mode 100644
index 0000000000..a3333bcfba
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
@@ -0,0 +1,332 @@
+---
+id: 619d2712853306238f41828e
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-skin` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin'));
+```
+
+You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))');
+```
+
+You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    gray,
+    rgb(209, 210, 199)
+  );
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
new file mode 100644
index 0000000000..b897e4cc61
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
@@ -0,0 +1,340 @@
+---
+id: 619d2b7a84e78b246f2d17a2
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent.
+
+# --hints--
+
+You should use the `.arm.left` selector.
+
+```js
+assert.match(code, /\.arm\.left\s*\{/);
+```
+
+You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%');
+```
+
+You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%');
+```
+
+You should use the `.arm.right` selector.
+
+```js
+assert.match(code, /\.arm\.right\s*\{/);
+```
+
+You should give `.arm.right` a `top` of `0%`.
+
+```js
+assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top);
+```
+
+You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
new file mode 100644
index 0000000000..a677c9a443
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
@@ -0,0 +1,325 @@
+---
+id: 619d2bd9c1d43c2526e96f1f
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent.
+
+# --hints--
+
+You should use the `transform-origin` property to do this.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`.
+
+```js
+assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
new file mode 100644
index 0000000000..ce148c7f62
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
@@ -0,0 +1,326 @@
+---
+id: 619d2d4e80400325ff89664a
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis.
+
+# --hints--
+
+You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left');
+
+if (leftArm?.rotate && leftArm?.transform) {
+  assert.equal(leftArm.getPropVal('rotate', true), '130deg');
+  assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)');
+} else {
+  assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
new file mode 100644
index 0000000000..7b8d308ed3
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
@@ -0,0 +1,326 @@
+---
+id: 619d2ebc81ba81271460850d
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+Rotate the right arm by `45deg` counterclockwise.
+
+# --hints--
+
+You should give `.arm.right` a `transform` of `rotate(-45deg)`.
+
+```js
+const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right');
+
+if (rightArm?.transform) {
+  assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)');
+} else {
+  assert.equal(rightArm?.getPropVal('rotate', true), '-45deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+--fcc-editable-region--
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
new file mode 100644
index 0000000000..cb6dc37d62
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
@@ -0,0 +1,327 @@
+---
+id: 619d2f0e9440bc27caee1cec
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Fun fact: Most, if not all, flippers are not naturally rectangles.
+
+Give the `.arm` elements' top-left, top-right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`.
+
+# --hints--
+
+You should give `.arm` a `border-radius` of `30% 30% 30% 120%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
new file mode 100644
index 0000000000..81854db2b7
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
@@ -0,0 +1,323 @@
+---
+id: 619d2fd3ff4f772882e3d998
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element.
+
+# --hints--
+
+You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
new file mode 100644
index 0000000000..f11d2a97f4
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
@@ -0,0 +1,333 @@
+---
+id: 619d30350883802921bfcccc
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Now, you are going to use CSS animations to make the penguin wave.
+
+Define a new `@keyframes` named `wave`.
+
+# --hints--
+
+You should define a new `@keyframes` rule.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes'));
+```
+
+You should give the `@keyframes` rule a name of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
new file mode 100644
index 0000000000..3294c31569
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
@@ -0,0 +1,351 @@
+---
+id: 619d324f5915c929f36ae91d
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Give `wave` four waypoints starting at `10%`, and incrementing by `10%`.
+
+# --hints--
+
+You should add a `10%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
+```
+
+You should add a `20%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
+```
+
+You should add a `30%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
+```
+
+You should add a `40%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
+```
+
+You should have 4 waypoints in your keyframe.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
new file mode 100644
index 0000000000..74235426b5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
@@ -0,0 +1,347 @@
+---
+id: 619d32c7fa21f32aaa91d499
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%');
+const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, '');
+const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
new file mode 100644
index 0000000000..ac97b33ea2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
@@ -0,0 +1,347 @@
+---
+id: 619d333b738e3c2b5d58b095
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%');
+const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
new file mode 100644
index 0000000000..fd1c9193d0
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
@@ -0,0 +1,362 @@
+---
+id: 619d337765b9f02c10e93722
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+For the third and fourth waypoints, repeat the `transform` pattern once more.
+
+# --hints--
+
+You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%');
+const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%');
+const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
new file mode 100644
index 0000000000..caa7a1fe0a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
@@ -0,0 +1,357 @@
+---
+id: 619d33c51140292cc5a21742
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function.
+
+# --hints--
+
+You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave');
+```
+
+You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s');
+```
+
+You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite');
+```
+
+You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
new file mode 100644
index 0000000000..e8ab0952d4
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
@@ -0,0 +1,347 @@
+---
+id: 619d3482f505452d861d0f62
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions.
+
+# --hints--
+
+You should use the `.penguin:active` selector.
+
+```js
+assert.match(code, /\.penguin:active\s*\{/);
+```
+
+You should give `.penguin:active` a `transform` of `scale(1.5)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
new file mode 100644
index 0000000000..3530454295
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
@@ -0,0 +1,346 @@
+---
+id: 619d3561a951bf2e41a24f10
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+When you activate the `.penguin` element, it might look as though you can drag it around. This is not true.
+
+Indicate this to users, by giving the active element a `cursor` property of `not-allowed`.
+
+# --hints--
+
+You should give `.penguin:active` a `cursor` property of `not-allowed`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin:active {
+  transform: scale(1.5);
+
+}
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
new file mode 100644
index 0000000000..b2fd620c1f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
@@ -0,0 +1,357 @@
+---
+id: 619d36103839c82efa95dd34
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`.
+
+# --hints--
+
+You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s');
+```
+
+You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out');
+```
+
+You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+
+}
+--fcc-editable-region--
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
new file mode 100644
index 0000000000..18d3c26b52
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
@@ -0,0 +1,670 @@
+---
+id: 619d3711d04d623000013e9e
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element.
+
+Congratulations! You have completed the Flappy Penguin Workshop.
+
+# --hints--
+
+You should give `.ground` a `height` of `calc(100vh - 300px)`.
+
+```js
+assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: calc(100vh - 300px);
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
new file mode 100644
index 0000000000..9d306c557a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Normalize your page, by setting the `width` to `100%`, and `height` to `100vh`.
+
+# --hints--
+
+You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
new file mode 100644
index 0000000000..2de5a239c2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
@@ -0,0 +1,43 @@
+---
+id: 61537bb9b1a29430ac15ad38
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Start this project by linking your `styles.css` file to the page.
+
+# --hints--
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
new file mode 100644
index 0000000000..ae7572fa05
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
@@ -0,0 +1,62 @@
+---
+id: 61537c5f81f0cf325b4a854c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Add a `header` element within the `body` element and assign a class of `header` to it.
+
+Inside the `header`, create an `h1` with `css flexbox photo gallery` as the text.
+
+# --hints--
+
+You should have a `header` element within your `body` element.
+
+```js
+assert.exists(document.querySelector('body')?.querySelector('header'));
+```
+
+Your `header` element should have a `class` with `header` as the value.
+
+```js
+assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
+```
+
+Your `header` element should have an `h1` element inside it.
+
+```js
+assert.exists(document.querySelector('.header')?.querySelector('h1'));
+```
+
+Your `h1` element should have the text `css flexbox photo gallery` inside it.
+
+```js
+assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html>
+  <head lang="en">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
new file mode 100644
index 0000000000..7461f43485
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
@@ -0,0 +1,65 @@
+---
+id: 61537c9eecea6a335db6da79
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Below your `.header` element, create a new `div` element and assign it a `class` of `gallery`. This `div` will act as a container for the gallery images.
+
+Inside that `.gallery` element, create nine `img` elements.
+
+# --hints--
+
+You should create a `div` element in your `body` element.
+
+```js
+assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1);
+```
+
+Your new `div` element should have a `class` with `gallery` set as the value.
+
+```js
+assert(document.querySelector('body')?.querySelector('.gallery'));
+```
+
+Your new `div` element should come after your `.header` element.
+
+```js
+assert(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery'));
+```
+
+Your `.gallery` element should have nine `img` elements.
+
+```js
+assert(document.querySelector('.gallery')?.querySelectorAll('img')?.length === 9);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
new file mode 100644
index 0000000000..6766539792
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
@@ -0,0 +1,111 @@
+---
+id: 61537d86bdc3dd343688fceb
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Next, give each `img` a `src` attribute according to its order in the document. The first `img` should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. The rest should be the same, except replace the `1` with the number the `img` is in the document.
+
+# --hints--
+
+All nine of your `img` elements should have a `src` attribute.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('src')));
+```
+
+Your first `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
+```
+
+Your second `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
+```
+
+Your third `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
+```
+
+Your fourth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
+```
+
+Your fifth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
+```
+
+Your sixth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
+```
+
+Your seventh `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
+```
+
+Your eighth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
+```
+
+Your ninth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+--fcc-editable-region--
+    <div class="gallery">
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
new file mode 100644
index 0000000000..c3de674b58
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
@@ -0,0 +1,83 @@
+---
+id: 615380dff67172357fcf0425
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Now your images are too big.
+
+Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`.
+
+Also set the `height` property to `300px` to keep your images a uniform size.
+
+# --hints--
+
+You should have a `.gallery img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
+```
+
+Your `.gallery img` selector should have a `width` property set to `100%` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
+```
+
+Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth, '350px');
+```
+
+Your `.gallery img` selector should have a `height` property set to `300px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height, '300px');
+```
+
+# --seed--
+
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
new file mode 100644
index 0000000000..e3bb0d435b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
@@ -0,0 +1,112 @@
+---
+id: 6153893900438b4643590367
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
+
+Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values.
+
+Add a `border-bottom` with `4px solid #fdb347` as the value.
+
+# --hints--
+
+You should have a `.header` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
+```
+
+Your `.header` selector should have a `text-align` property set to `center` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center');
+```
+
+Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase');
+```
+
+Your `.header` selector should have a `padding` property set to `32px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.padding, '32px');
+```
+
+Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor, 'rgb(10, 10, 35)');
+```
+
+Your `.header` selector should have a `color` property set to `#fff` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.color, 'rgb(255, 255, 255)');
+```
+
+Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom, '4px solid rgb(253, 179, 71)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+body  {
+  margin: 0;
+  font-family: sans-serif;
+  background-color: #f5f6f7;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
new file mode 100644
index 0000000000..3b04a4b69a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
@@ -0,0 +1,93 @@
+---
+id: 6153897c27f6334716ee5abe
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
+
+To use it, give an element a `display` property of `flex`. This will make the element a <em>flex container</em>. Any direct children of a flex container are called <em>flex items</em>.
+
+Create a `.gallery` selector and make it a flex container.
+
+
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `display` property set to `flex` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
new file mode 100644
index 0000000000..7f754c701b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
@@ -0,0 +1,94 @@
+---
+id: 6153908a366afb4d57185c8d
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Flexbox has a main and cross axis. The main axis is defined by the `flex-direction` property, which has four possible values:
+
+- `row` (default): horizontal axis with flex items from left to right
+- `row-reverse`: horizontal axis with flex items from right to left
+- `column`: vertical axis with flex items from top to bottom
+- `column-reverse`: vertical axis with flex items from bottom to top
+
+**Note**: The axes and directions will be different depending on the text direction. The values shown are for a left-to-right text direction.
+
+Try the different values to see how they affect the layout.
+
+When you are done, set an explicit `flex-direction` of `row` on the `.gallery` element.
+
+# --hints--
+
+Your `.gallery` selector should have a `flex-direction` property set to `row` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
new file mode 100644
index 0000000000..60f0140aab
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
@@ -0,0 +1,88 @@
+---
+id: 615392916d83fa4f02f7e2cf
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+
+The `flex-wrap` property determines how your flex items behave when the flex container is too small. Setting it to `wrap` will allow the items to wrap to the next row or column. `nowrap` (default) will prevent your items from wrapping and shrink them if needed.
+
+
+Make it so your flex items wrap to the next row when they run out of space.
+
+# --hints--
+
+Your `.gallery` selector should have a `flex-wrap` property set to `wrap` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap === 'wrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
new file mode 100644
index 0000000000..6f8a34d276
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
@@ -0,0 +1,87 @@
+---
+id: 6153938dce8b294ff8f5a4e9
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.
+
+Give your `.gallery` selector a `justify-content` property with `center` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have a `justify-content` property set to `center` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
new file mode 100644
index 0000000000..8803a6b2e2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
@@ -0,0 +1,88 @@
+---
+id: 6153947986535e5117e60615
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+The `align-items` property positions the flex content along the cross axis. In this case, with your `flex-direction` set to `row`, your cross axis would be vertical.
+
+To vertically center your images, give your `.gallery` selector an `align-items` property with `center` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have an `align-items` property set to `center` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
new file mode 100644
index 0000000000..1994f1565a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
@@ -0,0 +1,104 @@
+---
+id: 61539e07e7430b528fbffe21
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Give your `.gallery` selector a `padding` property set to `20px 10px` to create some space around the container.
+
+Then, give it a `max-width` of `1400px` and add a `margin` of `0 auto` to center it.
+
+# --hints--
+
+Your `.gallery` selector should have a `padding` property set to `20px 10px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingTop, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingBottom, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingLeft, '10px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingRight, '10px');
+```
+
+Your `.gallery` selector should have a `max-width` property set to `1400px` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth === '1400px');
+```
+
+Your `.gallery` element should be centered using a `margin` with `0 auto` as the value.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.gallery').cssText, 'margin: 0px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
new file mode 100644
index 0000000000..fa88f83ba5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
@@ -0,0 +1,92 @@
+---
+id: 61539f32a206bd53ec116465
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Notice how some of your images have become distorted. This is because the images have different aspect ratios. Rather than setting each aspect ratio individually, you can use the `object-fit` property to determine how images should behave.
+
+Give your `.gallery img` selector the `object-fit` property and set it to `cover`. This will tell the image to fill the `img` container while maintaining aspect ratio, resulting in cropping to fit.
+
+# --hints--
+
+Your `.gallery img` selector should have an `object-fit` property set to `cover` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
new file mode 100644
index 0000000000..23268a5f38
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
@@ -0,0 +1,95 @@
+---
+id: 6153a04847abee57a3a406ac
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Your images need some space between them.
+
+The `gap` CSS shorthand property sets the gaps, also known as gutters, between rows and columns. The `gap` property and its `row-gap` and `column-gap` sub-properties provide this functionality for flex, grid, and multi-column layout. You apply the property to the container element.
+
+Give your `.gallery` flex container a `gap` property with `16px` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have a `gap` property with `16px` set as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
new file mode 100644
index 0000000000..639e9b7cb6
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
@@ -0,0 +1,92 @@
+---
+id: 6153a3485f0b20591d26d2a1
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Smooth out your images a bit by giving the `.gallery img` selector a `border-radius` property with `10px` set as the value.
+
+# --hints--
+
+Your `.gallery img` selector should have a `border-radius` property with `10px` set as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
new file mode 100644
index 0000000000..44bec2cf27
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
@@ -0,0 +1,112 @@
+---
+id: 6153a3952facd25a83fe8083
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `::after` pseudo-element creates an element that is the last child of the selected element. You can use it to add an empty element after the last image. If you give it the same `width` as the images it will push the last image to the left when the gallery is in a two-column layout. Right now, it is in the center because you set `justify-content: center` on the flex container.
+
+Example:
+
+```CSS
+.container::after {
+  content: "";
+  width: 860px;
+}
+```
+
+Create a new selector using an `::after` pseudo-element on the `.gallery` element. Add a `content` property set to an empty string `""` and `350px` set for the `width` property.
+
+# --hints--
+
+Your `.gallery::after` selector should have an empty string `""` set for the `content` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\"");
+```
+
+Your `.gallery::after` selector should have `350px` set for the `width` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
new file mode 100644
index 0000000000..971b0ddd65
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
@@ -0,0 +1,181 @@
+---
+id: 6153a3ebb4f7f05b8401b716
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+
+The `alt` image attribute should describe the image content. Screen readers announce the alternative text in place of images. If the image can't be loaded, this text is presented in place of the image.
+
+To complete the project, add an `alt` attribute to all nine of your cat images to describe them. Use a value at least five characters long for each.
+
+
+# --hints--
+
+All nine of your `img` elements should have a `alt` attribute with text describing each image, with each description using at least `5` letters.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('alt')));
+assert(images.every(image => image.getAttribute('alt').length >= 5));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      --fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="Gallery">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
new file mode 100644
index 0000000000..9765d1e93b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
@@ -0,0 +1,92 @@
+---
+id: 615f171d05def3218035dc85
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Remove the margin from your body element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.
+
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `margin` property set to 0 as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
+```
+
+Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
+```
+
+Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
new file mode 100644
index 0000000000..4b6ce33d27
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
@@ -0,0 +1,75 @@
+---
+id: 6493bc0d99879635209565aa
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `border-box` sizing model does the opposite of `content-box`. The total width of the element, including padding and border, will be the explicit width set. The content of the element will shrink to make room for the padding and border.
+
+Change the `box-sizing` property to `border-box`. Notice how your blue image borders now fit within your red gallery border.
+
+# --hints--
+
+
+Your * selector should have a `box-sizing` property set to `border-box` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+--fcc-editable-region--
+ * {
+  box-sizing: content-box;
+}
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
new file mode 100644
index 0000000000..11895a275c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
@@ -0,0 +1,83 @@
+---
+id: 6494da0daf5df5197963671d
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
+
+The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
+
+Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
+
+# --hints--
+
+You should have a `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
+```
+
+Your `*` selector should have its `box-sizing` property set to `content-box`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+  ```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
new file mode 100644
index 0000000000..40a707dd74
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
@@ -0,0 +1,126 @@
+---
+id: 64dd076a1b33c86d84b4232f
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+In order to better visualize how your elements are sized, adding a border can be helpful.
+
+Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
+
+Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
+```
+
+Your `.gallery` selector should have a `width` property set to `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
+```
+
+Your `.gallery` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
+```
+
+Your `.gallery` selector should have a `border` property set to `5px solid red`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
+```
+
+You should have an `img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+Your `img` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
+```
+
+Your `img` selector should have a `width` property set to `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
+```
+
+Your `img` selector should have a `padding` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
+```
+
+Your `img` selector should have a `padding` property set to `5px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
+```
+
+Your `img` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
+```
+
+Your `img` selector should have a `border` property set to `5px solid blue`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
new file mode 100644
index 0000000000..92603787c3
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
@@ -0,0 +1,79 @@
+---
+id: 64dd136e4e8b0894f9c70d86
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.
+
+Remove your `.gallery` and `img` selectors, and all rules within.
+
+# --hints--
+
+You should not have a `.gallery` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+You should not have an `img` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+ * {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md b/curriculum/challenges/espanol/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
index bb0c606947..21742924b4 100644
--- a/curriculum/challenges/espanol/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
@@ -7,7 +7,7 @@ dashedName: step-3
 
 # --description--
 
-To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropraite message in the block of each condition.
+To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropriate message in the block of each condition.
 
 Starting with the duplex loan, check if `annualIncome` is greater than or equal to `minIncomeForDuplex` AND if `creditScore` is greater than `minCreditScoreForDuplex`.
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
new file mode 100644
index 0000000000..10c2147f74
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
@@ -0,0 +1,58 @@
+---
+id: 615f2abbe7d18d49a1e0e1c8
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You've been provided with a basic HTML boilerplate.
+
+Create an `h1` element within your `body` element and give it the text `Nutrition Facts`.
+
+# --hints--
+
+You should add a new `h1` element.
+
+```js
+assert.exists(document.querySelector('h1'));
+```
+
+Your `h1` element should be within your `body` element.
+
+```js
+assert(document.querySelector('h1')?.parentElement?.localName === 'body');
+```
+
+Your `h1` element should have the text `Nutrition Facts`.
+
+```js
+assert(document.querySelector('h1')?.innerText === 'Nutrition Facts');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
new file mode 100644
index 0000000000..272ccd55ff
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
@@ -0,0 +1,62 @@
+---
+id: 615f2d4150fe0d4cbd0f2628
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Below your `h1` element, add a `p` element with the text `8 servings per container`.
+
+# --hints--
+
+You should add a new `p` element.
+
+```js
+assert.exists(document.querySelector('p'));
+```
+
+Your `p` element should be within your `body` element.
+
+```js
+assert(document.querySelector('p')?.parentElement?.localName === 'body');
+```
+
+Your `p` element should come after your `h1` element.
+
+```js
+assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1');
+```
+
+Your `p` element should have the text `8 servings per container`.
+
+```js
+assert(document.querySelector('p')?.innerText === '8 servings per container');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
new file mode 100644
index 0000000000..2ae877fe38
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
@@ -0,0 +1,63 @@
+---
+id: 615f34948891834dd77655a6
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Add a second `p` element with the text `Serving size 2/3 cup (55g)`.
+
+# --hints--
+
+You should have a second `p` element.
+
+```js
+assert(document.querySelectorAll('p')?.length === 2);
+```
+
+Your second `p` element should be within your `body` element.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.parentElement?.localName === 'body');
+```
+
+Your second `p` element should come after your existing `p` element.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p');
+```
+
+Your second `p` element should have the text `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
new file mode 100644
index 0000000000..986fa60763
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
@@ -0,0 +1,88 @@
+---
+id: 615f34ecc1091b4fd5a8a484
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Within your `head` element, add a `link` element with the `rel` attribute set to `stylesheet` and the `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+This will import the `Open Sans` font family, with the font weight values `400`, `700`, and `800`.
+
+Also add a `link` element to link your `styles.css` file.
+
+# --hints--
+
+Your code should have two `link` elements.
+
+```js
+assert.strictEqual(document.querySelectorAll('link').length, 2);
+```
+
+Your `link` elements should be void elements, they should not have a end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/);
+```
+
+Your two `link` elements should be inside the `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.strictEqual(headElement.querySelectorAll('link').length, 2);
+```
+
+Both of your `link` elements should have the `rel` attribute set to `stylesheet`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert.isTrue(links.every(link => link.getAttribute('rel') === 'stylesheet'));
+```
+
+One of your `link` elements should have an `href` attribute set to `styles.css`.
+
+```js
+const styleElement = document.querySelector('[data-href]');
+assert.isNotNull(styleElement);
+```
+
+One of your `link` elements should have an `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert.exists(links.find(link => link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
new file mode 100644
index 0000000000..d66790fd30
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
@@ -0,0 +1,55 @@
+---
+id: 615f357957e370510f21ea16
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `body` selector and give it a `font-family` set to `Open Sans` with a fallback of `sans-serif`.
+
+Remember that fonts with spaces in the name must be wrapped in quotes for CSS.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `font-family` property set to `"Open Sans", sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === '"Open Sans", sans-serif');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
new file mode 100644
index 0000000000..82f736ff48
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
@@ -0,0 +1,57 @@
+---
+id: 615f378014c2da526a109c81
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The font is a bit small. Create an `html` selector and set the font to have a size of `16px`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have a `font-size` property set to `16px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
new file mode 100644
index 0000000000..6ceffde047
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
@@ -0,0 +1,66 @@
+---
+id: 615f38279e5c3d53692ea441
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Wrap your `h1` and `p` elements in a `div` element. Give that `div` a `class` attribute set to `label`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelector('div'));
+```
+
+Your new `div` element should have the `class` attribute set to `label`.
+
+```js
+assert(document.querySelector('div')?.classList?.contains('label'));
+```
+
+Your `h1` and `p` elements should be within your new `.label` element.
+
+```js
+const children = [...document.querySelectorAll('h1'), ...document.querySelectorAll('p')];
+assert(children?.every(child => child?.parentElement?.classList?.contains('label')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+--fcc-editable-region--
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
new file mode 100644
index 0000000000..1ea4ac044a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
@@ -0,0 +1,65 @@
+---
+id: 615f38cabc64e3556f98cc1a
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Borders can be used to group and prioritize content.
+
+Create a `.label` selector and give it a `border` set to `2px solid black`.
+
+# --hints--
+
+You should have a `.label` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label'));
+```
+
+Your `.label` selector should have a `border` property set to `2px solid black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
new file mode 100644
index 0000000000..e436f20dcd
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
@@ -0,0 +1,61 @@
+---
+id: 615f3949f58e12577dcefb00
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Good use of white space can bring focus to the important elements of your page, and help guide your user's eyes through your text.
+
+Give your `.label` selector a `width` property set to `270px`.
+
+# --hints--
+
+Your `.label` selector should have a `width` property set to `270px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.width === '270px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
new file mode 100644
index 0000000000..ca53749464
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
@@ -0,0 +1,66 @@
+---
+id: 615f39d7da41b15851fa3fb9
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Give your `.label` selector a `margin` property set to `20px auto`, and a `padding` property set to `0 7px`.
+
+# --hints--
+
+Your `.label` selector should have a `margin` property set to `20px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.margin === '20px auto');
+```
+
+Your `.label` selector should have a `padding` property set to `0 7px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+  width: 270px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
new file mode 100644
index 0000000000..694a4e9ff3
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
@@ -0,0 +1,72 @@
+---
+id: 615f3b091162165948e1cb33
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+If you inspect your `.label` element with your browser's developer tools, you may notice that it's actually 288 pixels wide instead of 270. This is because, by default, the browser includes the border and padding when determining an element's size.
+
+To solve this, reset the box model by creating a `*` selector and giving it a `box-sizing` property of `border-box`.
+
+# --hints--
+
+You should create a `*` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
new file mode 100644
index 0000000000..84ea6cab71
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
@@ -0,0 +1,76 @@
+---
+id: 615f3cafd794015aa9547a6d
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Remember that the use of `h1`, `h2`, and similar tags determine the semantic structure of your HTML. However, you can adjust the CSS of these elements to control the visual flow and hierarchy.
+
+Create an `h1` rule and set the `font-weight` property to `800`. This will make your `h1` text bolder.
+
+# --hints--
+
+You should create an `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+Your `h1` selector should have a `font-weight` property set to `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
new file mode 100644
index 0000000000..fe53466124
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
@@ -0,0 +1,70 @@
+---
+id: 615f3d9e59db4b5b8e960762
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Give your `h1` selector a `text-align` property of `center`.
+
+# --hints--
+
+Your `h1` selector should have a `text-align` property set to `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
new file mode 100644
index 0000000000..0c437fb4e8
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
@@ -0,0 +1,71 @@
+---
+id: 615f3e1b7233ee5c7595771f
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Fine-tune the placement of your `h1` by giving it a top and bottom margin of `-4px` and a left and right margin of `0`.
+
+# --hints--
+
+Your `h1` selector should have a `margin` property set to `-4px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.margin === '-4px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
new file mode 100644
index 0000000000..2448838c5f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
@@ -0,0 +1,80 @@
+---
+id: 615f3e4af8008c5d494d3afe
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Create a `p` selector and remove all margins.
+
+# --hints--
+
+You should create a `p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p'));
+```
+
+Your `p` selector should have a `margin` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
new file mode 100644
index 0000000000..53f6d70c15
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
@@ -0,0 +1,96 @@
+---
+id: 615f3ed16592445e57941aec
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Lines can help separate and group important content, especially when space is limited.
+
+Create a `div` element below your `h1` element, and give it a `class` attribute set to `divider`.
+
+# --hints--
+
+You should create a new `div`.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('divider'));
+```
+
+Your `.divider` element should be within your `.label` element.
+
+```js
+assert(document.querySelector('.label')?.querySelector('.divider'));
+```
+
+Your `.divider` element should come after your `h1` element.
+
+```js
+assert(document.querySelector('.divider')?.previousElementSibling?.localName === 'h1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
new file mode 100644
index 0000000000..f8e43c0a29
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
@@ -0,0 +1,91 @@
+---
+id: 615f405b89a7ec5f8e2d11f4
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Create a selector for your new `.divider` and set the `border-bottom` property to `1px solid #888989`. Also give it a top and bottom margin of `2px`. It should not have any left or right margin.
+
+# --hints--
+
+You should create a `.divider` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider'));
+```
+
+Your `.divider` selector should have a `border-bottom` property set to `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+Your `.divider` selector should have a `margin` property set to `2px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.margin === '2px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
new file mode 100644
index 0000000000..aa3594ecc5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
@@ -0,0 +1,84 @@
+---
+id: 615f40b01f680e608d360ed4
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+The `letter-spacing` property can be used to adjust the space between each character of text in an element.
+
+Give your `h1` selector a `letter-spacing` property set to `0.15px` to space them out a bit more.
+
+# --hints--
+
+Your `h1` selector should have a `letter-spacing` property set to `0.15px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
new file mode 100644
index 0000000000..a1f84535ff
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
@@ -0,0 +1,91 @@
+---
+id: 615f4172e9eec061d6456221
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Nutrition labels have a lot of bold text to draw attention to important information. Rather than targeting each element that needs to be bold, it is more efficient to use a class to apply the bold styling to every element.
+
+Give your second `p` element a `class` attribute set to `bold`.
+
+# --hints--
+
+Your second `p` element should have a `class` attribute set to `bold`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.classList?.contains('bold'));
+```
+
+Your first `p` element should not have a `class` attribute set to `bold`.
+
+```js
+assert(!document.querySelector('p')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
new file mode 100644
index 0000000000..bcbaaf757a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
@@ -0,0 +1,104 @@
+---
+id: 615f41c979787462e76dab90
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Your new class does not have any styling yet. Create a `.bold` selector and give it a `font-weight` property set to `800` to make the text bold.
+
+Go ahead and remove the `font-weight` property from your `h1` selector as well.
+
+# --hints--
+
+You should have a `.bold` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold'));
+```
+
+Your `.bold` selector should have a `font-weight` property set to `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold')?.fontWeight === '800');
+```
+
+Your `h1` selector should not have a `font-weight` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === "");
+```
+
+You should not remove your `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
new file mode 100644
index 0000000000..05d8bb7562
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
@@ -0,0 +1,86 @@
+---
+id: 615f423cf65d5864132a0956
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Give your `h1` element a `class` attribute set to `bold`. This will make the text bold again.
+
+# --hints--
+
+Your `h1` element should have a `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('h1')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
new file mode 100644
index 0000000000..64189f1570
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
@@ -0,0 +1,100 @@
+---
+id: 615f42a021625f656101ef93
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Horizontal spacing between equally important elements can increase the readability of your text.
+
+Wrap the text `2/3 cup (55g)` in a `span` element.
+
+# --hints--
+
+You should create a new `span` element.
+
+```js
+assert(document.querySelector('span'));
+```
+
+Your `span` element should have the text `2/3 cup (55g)`.
+
+```js
+assert(document.querySelector('span')?.textContent?.trim() === '2/3 cup (55g)');
+```
+
+Your `p` element should still have the text `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
new file mode 100644
index 0000000000..686336b2dc
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
@@ -0,0 +1,92 @@
+---
+id: 615f4bfb9de4a16703b56eb6
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now we can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`.
+
+# --hints--
+
+Your `p` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.display === 'flex');
+```
+
+Your `p` selector should have a `justify-content` property set to `space-between`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.justifyContent === 'space-between');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+--fcc-editable-region--
+p {
+  margin: 0;
+}
+--fcc-editable-region--
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
new file mode 100644
index 0000000000..4c960b7219
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
@@ -0,0 +1,104 @@
+---
+id: 615f4ce9d877b668417c0c42
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Wrap everything within the `.label` element in a new `header` element.
+
+# --hints--
+
+You should create a new `header` element.
+
+```js
+assert(document.querySelector('header'));
+```
+
+Your `header` element should be within your `.label` element.
+
+```js
+assert(document.querySelector('header')?.parentElement?.classList?.contains('label'));
+```
+
+Your `h1`, `div`, and `p` elements should be within your new `header` element.
+
+```js
+const children = document.querySelector('header')?.children;
+assert(children?.[0]?.localName === 'h1');
+assert(children?.[1]?.localName === 'div');
+assert(children?.[2]?.localName === 'p');
+assert(children?.[3]?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
new file mode 100644
index 0000000000..ea61500923
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
@@ -0,0 +1,105 @@
+---
+id: 615f4dde9d72e3694cb9ee3b
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Now update your `h1` selector to be `header h1` to specifically target your `h1` element within your new `header`.
+
+# --hints--
+
+You should have a `header h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('header h1'));
+```
+
+You should not have an `h1` selector.
+
+```js
+assert.isNull(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+You should not change any properties in the selector.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('header h1');
+assert(style?.textAlign === 'center');
+assert(style?.margin === '-4px 0px');
+assert(style?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
new file mode 100644
index 0000000000..6830eadac2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
@@ -0,0 +1,105 @@
+---
+id: 615f4ec58334106a4170c2a8
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Create a new `div` element below your `header` element, and give it a `class` attribute set to `divider large`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 3);
+```
+
+Your new `div` element should come after your `header` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` element should have the `class` attribute set to `divider large`.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider'));
+assert(div?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
new file mode 100644
index 0000000000..4fd89a7f1f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
@@ -0,0 +1,111 @@
+---
+id: 615f4f9e4a40566b776a8f38
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Create a new `.large` selector and give it a `height` property set to `10px`. Also create an `.large, .medium` selector and set the `background-color` property to `black`.
+
+# --hints--
+
+You should have a new `.large` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large'));
+```
+
+Your `.large` selector should have a `height` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large')?.height === '10px');
+```
+
+You should have a new `.large, .medium` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium'));
+```
+
+Your `.large, .medium` selector should have a `background-color` property set to `black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.backgroundColor === 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
new file mode 100644
index 0000000000..971d93624c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
@@ -0,0 +1,101 @@
+---
+id: 615f50473cc0196c6dd3892a
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+You may notice there is still a small border at the bottom of your `.large` element. To reset this, give your `.large, .medium` selector a `border` property set to `0`.
+
+Note: the `medium`(medium) class will be utilized later for the thinner bars of the nutrition label.
+
+# --hints--
+
+Your `.large, .medium` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.borderWidth === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+--fcc-editable-region--
+.large, .medium {
+  background-color: black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
new file mode 100644
index 0000000000..47197f64cc
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
@@ -0,0 +1,113 @@
+---
+id: 615f51257a8a516d80b6c743
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Create a new `div` below your `.large` element and give it a `class` attribute set to `calories-info`.
+
+# --hints--
+
+You should create another `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 4);
+```
+
+Your new `div` should have a `class` attribute set to `calories-info`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info'));
+```
+
+Your new `div` should come after the `.large` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
new file mode 100644
index 0000000000..136c3e5dfc
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
@@ -0,0 +1,128 @@
+---
+id: 615f51e4e5b24a6e80eccce1
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Within your `.calories-info` element, create a `div` element. Give that `div` element a `class` attribute set to `left-container`. Within the newly created `div` element, create a `h2` element with the text `Amount per serving`. Give the `h2` element a `class` attribute set to `bold small-text`.
+
+# --hints--
+
+You should create a new `div` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'div');
+```
+
+Your new `div` element should have a `class` attribute set to `left-container`.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('left-container'));
+```
+
+You should create a new `h2` element within your `.left-container` element.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.localName === 'h2');
+```
+
+Your new `h2` element should have a `class` attribute set to `bold small-text`.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('bold'));
+assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('small-text'));
+```
+
+Your new `h2` element should have the text `Amount per serving`.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.innerText === 'Amount per serving');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+    <div class="calories-info">
+
+    </div>
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
new file mode 100644
index 0000000000..c71a25214c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
@@ -0,0 +1,115 @@
+---
+id: 615f522dea4f776f64dc3e91
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `rem` unit stands for `root em`, and is relative to the font size of the `html` element.
+
+Create a `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`).
+
+# --hints--
+
+You should have an `.small-text` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.small-text'));
+```
+
+Your `.small-text` selector should have a `font-size` property set to `0.85rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.small-text')?.fontSize === '0.85rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
new file mode 100644
index 0000000000..deabca353f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
@@ -0,0 +1,143 @@
+---
+id: 615f5486b8fd4b71633f69b0
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Below your `.small-text` element, create a new `p` element with the text `Calories`. Also below the `.left-container` element, create a new `span` element with the text `230`.
+
+# --hints--
+
+You should have a new `p` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.querySelector('p'))
+```
+
+You should have a new `span` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.querySelector('span'))
+```
+
+Your `p` element should come after your `.small-text` element.
+
+```js
+assert(document.querySelector('.small-text')?.nextElementSibling?.localName === 'p');
+```
+
+Your `span` element should come after your `.left-container` element.
+
+```js
+assert(document.querySelector('.left-container')?.nextElementSibling?.localName ==='span');
+```
+
+Your `p` element should have the text `Calories`.
+
+```js
+assert(document.querySelector('.small-text')?.nextElementSibling?.innerText === 'Calories');
+```
+
+Your `span` element should have the text `230`.
+
+```js
+assert(document.querySelector('.left-container')?.nextElementSibling?.innerText === '230');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
new file mode 100644
index 0000000000..14f20ffb78
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
@@ -0,0 +1,144 @@
+---
+id: 615f575b50b91e72af079480
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Create a new `.left-container p` selector setting the top and bottom margin to `-5px`, and the left and right margin to `-2px`. Also set the `font-size` to `2em` and `font-weight` to `700`.
+
+# --hints--
+
+You should have a new `.left-container p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p'));
+```
+
+Your new `.left-container p` selector should have a `margin` property set to `-5px -2px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginTop, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginBottom, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginLeft, '-2px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginRight, '-2px');
+```
+
+Your new `.left-container p` selector should have a `font-size` property set to `2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontSize === '2em');
+```
+
+Your new `.left-container p` selector should have a `font-weight` property set to `700`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontWeight === '700');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
new file mode 100644
index 0000000000..b833b5f471
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
@@ -0,0 +1,141 @@
+---
+id: 615f5af373a68e744a3c5a76
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Create a `.calories-info span` selector, set its `font-size` to `2.4em` and `font-weight` to `700`.
+
+# --hints--
+
+You should create a `.calories-info span` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span'));
+```
+
+Your `.calories-info span` selector should have a `font-size` property set to `2.4em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '2.4em');
+```
+
+Your `.calories-info span` selector should have a `font-weight` property set to `700`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontWeight === '700');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
new file mode 100644
index 0000000000..84d0ba9d98
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
@@ -0,0 +1,134 @@
+---
+id: 615f5fd85d0062761f288364
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Typography is often more art than science. You may have to tweak things like alignment until it looks correct.
+
+Give your `.calories-info span` selector a `margin` set to `-7px -2px`. This will shift your `230` text into place.
+
+# --hints--
+
+Your `.calories-info span` selector should have a `margin` set to `-7px -2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.margin === '-7px -2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+.calories-info span {
+  font-size: 2.4em;
+  font-weight: 700;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
new file mode 100644
index 0000000000..31f049fa2d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
@@ -0,0 +1,141 @@
+---
+id: 615f61338c8ca176d6445574
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider medium`.
+
+# --hints--
+
+You should create a new `div` within your `.label` element.
+
+```js
+assert(document.querySelectorAll('.label > div')?.length === 3)
+```
+
+Your new `div` should have the `class` attribute set to `divider medium`. This div should be the last element in your `.label` element.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider') && div?.classList?.contains('medium'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
new file mode 100644
index 0000000000..f074a2cf76
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
@@ -0,0 +1,142 @@
+---
+id: 615f666ac5edea782feb7e75
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Create an `.medium` selector and give it a `height` property of `5px`.
+
+# --hints--
+
+You should create an `.medium` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.medium'));
+```
+
+Your `.medium` selector should have a `height` property set to `5px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.medium')?.height === '5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
new file mode 100644
index 0000000000..0c0aa78424
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
@@ -0,0 +1,167 @@
+---
+id: 615f671b6d1919792745aa5d
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Create a new `div` element below your `.medium` element. Give it a `class` attribute set to `daily-value small-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `bold right`.
+
+# --hints--
+
+You should create a new `div` element after your `.medium` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('medium'));
+```
+
+Your new `div` should have a `class` attribute set to `daily-value small-text`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value'));
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('small-text'));
+```
+
+Your new `div` element should have a `p` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `% Daily Value *`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *');
+```
+
+Your new `p` element should have a `class` attribute set to `bold right`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    --fcc-editable-region--
+    <div class="divider medium"></div>
+
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
new file mode 100644
index 0000000000..3873e85fbf
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
@@ -0,0 +1,157 @@
+---
+id: 615f6823d0815b7a991f2a75
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Use your existing `.divider` element as an example to add a new divider after the `p` element.
+
+# --hints--
+
+You should create a new `div` within your `.daily-value` element.
+
+```js
+assert(document.querySelectorAll('.daily-value.small-text > div')?.length === 1)
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text > div')?.classList?.contains('divider'))
+```
+
+Your new `div` should come after your `p` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text > div')?.previousElementSibling?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
new file mode 100644
index 0000000000..74ebd1c18c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
@@ -0,0 +1,182 @@
+---
+id: 615f6b2d164f81809efd9bdc
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Then, wrap the text `Total Fat` in one `span` element, the text `10%` in another, and give them each a class of `bold`.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Total Fat 8g 10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g[\s|\n]+10%/));
+```
+
+Your `p` element should have two `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
+```
+
+One `span` element should wrap the text `Total Fat`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat');
+```
+
+The `span` element around `Total Fat` should have the `class` set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.className === 'bold');
+```
+
+A `span` element should wrap the text `10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span + span')?.innerText === '10%');
+```
+
+The `span` element around `10%` should have the `class` set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
new file mode 100644
index 0000000000..de2aab3150
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
@@ -0,0 +1,172 @@
+---
+id: 615f6cc778f7698258467596
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Below your element with the `Total Fat` text, create a new `p` element with the text `Saturated Fat 1g 5%`. Wrap the `5%` in a `span` with the `class` attribute set to `bold`. In this case this is enough to align the percentage to `5%`.
+
+# --hints--
+
+You should create a new `p` element below your element with the `Total Fat` text.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/));
+```
+
+Your new `p` element should have the text `Saturated Fat 1g 5%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.localName === 'span');
+```
+
+Your `span` element should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+Your `span` element should wrap the `5%` text.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === "5%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
new file mode 100644
index 0000000000..5f2aad0b62
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
@@ -0,0 +1,148 @@
+---
+id: 615f6fddaac1e083502d3e6a
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+This new `p` element will need to be indented. Give it a `class` set to `indent`.
+
+# --hints--
+
+Your `p` element with the text `Saturated Fat 1g 5%` should have a `class` attribute set to `indent`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p>Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
new file mode 100644
index 0000000000..2e1a5c3f79
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
@@ -0,0 +1,163 @@
+---
+id: 615f70077a4ff98424236c1e
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create a new `.indent` selector and give it a `margin-left` property set to `1em`.
+
+# --hints--
+
+You should have a new `.indent` selector.
+
+```js
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.indent'));
+```
+
+Your `.indent` selector should have a `margin-left` property set to `1em`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft, '1em');
+```
+
+Your `.indent` selector should only set the `margin-left` property, not other margin properties.
+
+```js
+const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.indent') ?? {};
+assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
new file mode 100644
index 0000000000..1d696789f3
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
@@ -0,0 +1,160 @@
+---
+id: 615f72a872354a850d4f533e
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Create a `.daily-value p` selector to target all of your `p` elements in the `daily-value` section. Give this new selector a `border-bottom` set to `1px solid #888989`.
+
+# --hints--
+
+You should have a new `.daily-value p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+Your `.daily-value p` selector should have a `border-bottom` property set to `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
new file mode 100644
index 0000000000..96cbc9639f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
@@ -0,0 +1,166 @@
+---
+id: 615f74a71f1e498619e38ee8
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+The bottom borders under your `% Daily Value *` and `Saturated Fat 1g 5%` elements do not extend the full width of the label. Add `no-divider` to the `class` for these two elements.
+
+# --hints--
+
+Your `p` element with the text `% Daily Value *` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.firstElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('bold'));
+```
+
+Your `p` element with the text `Saturated Fat 1g 5%` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
new file mode 100644
index 0000000000..d3d0a81e57
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
@@ -0,0 +1,181 @@
+---
+id: 615f7ad94380408d971d14f6
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+The `:not` pseudo-selector can be used to select all elements that do not match the given CSS rule.
+
+```css
+div:not(#example) {
+  color: red;
+}
+```
+
+The above selects all `div` elements without an `id` of `example`.
+
+Modify your `.daily-value p` selector to exclude the `.no-divider` elements.
+
+# --hints--
+
+You should have a `.daily-value p:not(.no-divider)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)'));
+```
+
+You should not have a `.daily-value p` selector.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+You should not change the properties in the `.daily-value p:not(.no-divider)` selector.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)');
+assert(style?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
new file mode 100644
index 0000000000..aac27eb5b6
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
@@ -0,0 +1,165 @@
+---
+id: 615f7bc680f7168ea01ebf99
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Now you will have to add separate dividers below your `.no-divider` elements.
+
+Your first `.no-divider` element has a `.divider` after it. Create another `.divider` after your second `.no-divider` element.
+
+# --hints--
+
+You should create a new `div` at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
new file mode 100644
index 0000000000..6504be1b04
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
@@ -0,0 +1,196 @@
+---
+id: 615f7c71eab8218f846e4503
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+After your last `.divider`, create another `p` element with the text `Trans Fat 0g`. Italicize the word `Trans` by wrapping it in an `i` element. Give the new `p` element the `class` attribute set to `indent no-divider`. Wrap `Trans Fat 0g` in a `span` element for alignment.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Trans Fat 0g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText === 'Trans Fat 0g');
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(p?.classList?.contains('indent'));
+assert(p?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have an `i` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i'));
+```
+
+Your `i` element should wrap the text `Trans`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i')?.innerText === 'Trans');
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span'));
+```
+
+Your `span` element should wrap the text `Trans Fat 0g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText?.match(/Trans[\s|\n]+Fat 0g/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
new file mode 100644
index 0000000000..b038b1dfc2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
@@ -0,0 +1,165 @@
+---
+id: 615f7d489a581590d1350288
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Create another `.divider` after your last `p` element.
+
+# --hints--
+
+You should create a new `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` element should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
new file mode 100644
index 0000000000..ce39f09eae
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
@@ -0,0 +1,215 @@
+---
+id: 615f7de4487b64919bb4aa5e
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Then, wrap the text `Cholesterol` in a `span` element, `0%` in another, and give each of them a class of `bold`.
+
+Finally, nest the `span` element containing the text `Cholesterol` along with the text `0mg`, in an additional `span` element for alignment.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Cholesterol 0mg 0%`.
+
+```js
+const text = document.querySelector('.daily-value.small-text')?.lastElementChild?.textContent?.trim()?.replace(/\n/g, ' ')?.replace(/\s\s+/g, ' ');
+assert(text === 'Cholesterol 0mg 0%');
+```
+
+Your new `p` element should have exactly three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+The text `Cholesterol` should be nested in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
+assert(cholesterolSpan.length === 1);
+```
+
+Your `Cholesterol` `span` should have the `class` attribute set to `bold`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
+assert(cholesterolSpan[0]?.classList?.contains('bold'));
+```
+
+The text `0%` should be nested in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
+assert(zeroPercentSpan.length === 1);
+```
+
+Your `0%` `span` should have the `class` attribute set to `bold`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
+assert(zeroPercentSpan[0]?.classList?.contains('bold'));
+```
+
+Your `Cholesterol` `span` and your `0mg` text should be wrapped in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolZeroSpan = spans.filter(span => span?.innerText === 'Cholesterol 0mg');
+assert(cholesterolZeroSpan.length === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
new file mode 100644
index 0000000000..f165c8568f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
@@ -0,0 +1,205 @@
+---
+id: 615f7e7281626a92bbd62da8
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Put `Sodium` and `7%` each in their own `span` with a class of a `bold` like you did with the others.
+
+Then, add an additional `span` element around `Sodium 160mg` for alignment again.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Sodium 160mg 7%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Sodium[\s|\n]160mg[\s|\n]+7%/));
+```
+
+Your new `p` element should have three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+A `span` element should wrap the text `Sodium 160mg`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/));
+```
+
+A `span` element should wrap the text `Sodium`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === "Sodium");
+```
+
+The `span` around `Sodium` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+A `span` element should wrap the text `7%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '7%');
+```
+
+The `span` element around `7%` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
new file mode 100644
index 0000000000..58d410f432
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
@@ -0,0 +1,210 @@
+---
+id: 615f7ecb09de9a938ef94756
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below your last `p` element, add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Then, wrap the nutrient and amount in a `span` for alignment again.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Total Carbohydrate 37g 13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g[\s|\n]+13%/));
+```
+
+Your new `p` element should have three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+One `span` element should wrap the text `Total Carbohydrate 37g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g/));
+```
+
+One `span` element should wrap the text `Total Carbohydrate`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Total Carbohydrate');
+```
+
+The `span` element around `Total Carbohydrate` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+A `span` element should wrap the text `13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
+```
+
+The `span` element around `13%` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+Your second `span` element should wrap the text `13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
new file mode 100644
index 0000000000..15003310e7
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
@@ -0,0 +1,183 @@
+---
+id: 615f7fa959ab75948f96a0d6
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Below your last `p` element, add another `p` element with the text `Dietary Fiber 4g`. Give the `p` element the `class` necessary to indent it and remove the dividing border. Then create a divider below that `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Dietary Fiber 4g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/));
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
new file mode 100644
index 0000000000..b47f77498e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
@@ -0,0 +1,185 @@
+---
+id: 615f808d85793195b0f53be9
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Create another `p` element after your last `.divider`, and give it the text `Total Sugars 12g`. Assign that `p` element the `class` values necessary to indent it and remove the bottom border. Then create another `.divider` below your new `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Total Sugars 12g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/));
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
new file mode 100644
index 0000000000..d7b411b930
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
@@ -0,0 +1,169 @@
+---
+id: 615f829d07b18f96f6f6684b
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+The advantage to creating these dividers is that you can apply specific classes to style them individually. Add `double-indent` to the `class` for your last `.divider`.
+
+# --hints--
+
+Your last `.divider` element should have `double-indent` added to the `class`. Do not remove the existing value.
+
+```js
+const last = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(last?.classList?.contains('double-indent'));
+assert(last?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      --fcc-editable-region-- 
+      <div class="divider"></div>
+      --fcc-editable-region-- 
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
new file mode 100644
index 0000000000..1c85a5b53a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
@@ -0,0 +1,182 @@
+---
+id: 615f83ef928ec9982b785b6a
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Create a `.double-indent` selector and give it a left margin of `2em`.
+
+# --hints--
+
+You should have a new `.double-indent` selector.
+
+```js
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.double-indent'));
+```
+
+Your `.double-indent` selector should have a `margin-left` property set to `2em`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.double-indent')?.marginLeft, '2em');
+```
+
+Your `.double-indent` selector should only set the `margin-left` property, not other margin properties.
+
+```js
+const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.double-indent') ?? {};
+assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region-- 
+
+--fcc-editable-region-- 
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
new file mode 100644
index 0000000000..a39f4b879c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
@@ -0,0 +1,211 @@
+---
+id: 615f84f246e8ba98e3cd97be
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Below your `.double-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. Your new `p` element should also be double indented, and have no bottom border. Use a `span` to make the `20%` bold and right aligned.
+
+Then create another divider after that `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Includes 10g Added Sugars 20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/));
+```
+
+Your new `p` element should have the `class` attribute set to `double-indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('double-indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.localName === 'span');
+```
+
+Your `span` element should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.classList?.contains('bold'));
+```
+
+Your `span` element should wrap the text `20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type span')?.innerText === '20%');
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
new file mode 100644
index 0000000000..d4af4e85bd
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
@@ -0,0 +1,208 @@
+---
+id: 615f887466db4ba14b5342cc
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+After your last divider, create another `p` element with the text `Protein 3g`. Use the necessary classes to remove the bottom border, and a `span` to make the `Protein` bold. Then wrap the text `Protein 3g` including the new `span` element, in a new `span` element.
+
+Following this element, create a large divider.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Protein 3g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/));
+```
+
+Your new `p` element should have the `class` attribute set to `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+You should have a `span` element with the class `bold` around the text `Protein`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type span.bold')?.innerText === 'Protein');
+```
+
+You should have a `span` element around the text `Protein 3g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text > p:last-of-type > span > span.bold')?.innerText === 'Protein');
+assert(document.querySelector('.daily-value.small-text > p:last-of-type > span')?.innerText === 'Protein 3g');
+```
+
+Your new `div` should have the `class` attribute set to `divider large`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
new file mode 100644
index 0000000000..0477e6cf30
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
@@ -0,0 +1,195 @@
+---
+id: 615f89e055040ba294719d2f
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`.
+
+The `p` element contains only text, you can wrap the percentage in a `span` element so that it is considered a separate entity from the rest of the text, and it's moved to the right.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Vitamin D 2mcg 10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+Your `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
new file mode 100644
index 0000000000..1f4bf4fb22
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
@@ -0,0 +1,219 @@
+---
+id: 615f8bfe0f30a1a3c340356b
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Create another `p` element, give it the text `Calcium 260mg 20%`. Align `20%` to the right. Below that, create a `p` element with the text `Iron 8mg 45%`, aligning the `45%` to the right.
+
+# --hints--
+
+You should create two new `p` elements at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+```
+
+Your first new `p` element should have the text `Calcium 260mg 20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/));
+```
+
+Your first new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span');
+```
+
+Your first `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold'));
+```
+
+Your first `span` element should wrap the text `20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%');
+```
+
+Your second new `p` element should have the text `Iron 8mg 45%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/));
+```
+
+Your second new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.localName === 'span');
+```
+
+Your second `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
new file mode 100644
index 0000000000..9734aee18e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
@@ -0,0 +1,202 @@
+---
+id: 615f8f1223601fa546e93f31
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Create the final `p` element for your `.daily-value` section. Give it the text `Potassium 235mg 6%`. Align the `6%` text to the right, and remove the bottom border of the `p` element.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the `class` attribute set to `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have the text `Potassium 235mg 6%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+Your `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+    </div>
+    --fcc-editable-region--      
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
new file mode 100644
index 0000000000..c098518ca5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
@@ -0,0 +1,211 @@
+---
+id: 615f905fbd1017a65ca224eb
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Add a medium divider after your `.daily-value` element. Below that new divider, create a `p` element with the `class` attribute set to `note`.
+
+Give the `p` element the following text:
+
+```markup
+* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
+```
+
+# --hints--
+
+You should create a new `div` after your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div');
+```
+
+Your new `div` should have the `class` set to `divider medium`.
+
+```js
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('medium'));
+```
+
+You should create a `p` element after your new `div` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the `class` set to `note`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note'));
+```
+
+Your new `p` element should have the provided text.
+
+```js
+assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    --fcc-editable-region--      
+
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
new file mode 100644
index 0000000000..0dd1ac2ee2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
@@ -0,0 +1,196 @@
+---
+id: 615f94786869e1a7fec54375
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Create a `.note` selector, and set the size of the font to `0.6rem`. Also set the top and bottom margins to `5px`, removing the left and right margins.
+
+# --hints--
+
+You should have a new `.note` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note'));
+```
+
+Your `.note` selector should have a `font-size` property set to `0.6rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem');
+```
+
+Your `.note` selector should have a `margin` property set to `5px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
new file mode 100644
index 0000000000..845b9f2d7f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
@@ -0,0 +1,365 @@
+---
+id: 615f951dff9317a900ef683f
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Give the `.note` selector a left and right padding of `8px`, removing the top and bottom padding. Also set the `text-indent` property to `-8px`.
+
+With these last changes, your nutrition label is complete!
+
+# --hints--
+
+Your `.note` selector should have a `padding` property set to `0 8px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px');
+```
+
+Your `.note` selector should have a `text-indent` property set to `-8px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+  padding: 0 8px;
+  text-indent: -8px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
new file mode 100644
index 0000000000..93d1888599
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
@@ -0,0 +1,153 @@
+---
+id: 635bde33c91c80540eae239b
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+The text `% Daily Value *` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it.
+
+# --hints--
+
+You should have a `.right` selector.
+
+```js
+const hasRight = new __helpers.CSSHelp(document).getStyle('.right');
+assert(hasRight);
+
+```
+
+The `.right` selector should have the `justify-content` property set to `flex-end`.
+
+```js
+const rightJustifyContent = new __helpers.CSSHelp(document).getStyle('.right')?.getPropertyValue('justify-content');
+assert(rightJustifyContent === 'flex-end');
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
new file mode 100644
index 0000000000..e6f009b7e0
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
@@ -0,0 +1,117 @@
+---
+id: 6395d33ab5d91bf317107c48
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Create a `.calories-info h2` selector and remove all margins.
+
+# --hints--
+
+Create a `.calories-info h2` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2'));
+```
+
+Your `.calories-info h2` selector should have a `margin` set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
new file mode 100644
index 0000000000..6a2dbb37aa
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
@@ -0,0 +1,135 @@
+---
+id: 6396e33fe478dd264ebbf278
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Create a new `.calories-info` selector and give it a `display` property set to `flex`. Also give it a `justify-content` property set to `space-between` and `align-items` property set to `flex-end`.
+
+# --hints--
+
+You should create a `.calories-info` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info'));
+```
+
+Your `.calories-info` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.display === 'flex');
+```
+
+Your `.calories-info` selector should have a `justify-content` property set to `space-between`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.justifyContent === 'space-between');
+```
+
+Your `.calories-info` selector should have a `align-items` property set to `flex-end`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.alignItems === 'flex-end');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.calories-info h2 {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
new file mode 100644
index 0000000000..170468d17b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
@@ -0,0 +1,147 @@
+---
+id: 667d1bb875f5961913176069
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Notice how the text `8g` appears centered in the preview. Nest the `span` element containing the text `Total Fat` along with the text `8g`, in an additional `span` element for alignment.
+
+# --hints--
+
+You should have a `span` element around the code `<span class="bold">Total Fat</span> 8g`.
+
+```js
+assert.match(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerHTML, /^<span class=("|')bold\1>Total Fat<\/span> 8g\s?$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+--fcc-editable-region--
+      <p><span class="bold">Total Fat</span> 8g <span class="bold">10%</span></p>
+--fcc-editable-region--
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
new file mode 100644
index 0000000000..3a5d413485
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
@@ -0,0 +1,58 @@
+---
+id: 612e78af05201622d4bab8aa
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Create a `div` element within your `body` element with the `id` set to `piano`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+const div = document.querySelector('div');
+assert.exists(div);
+```
+
+Your `div` should be within your `body` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.parentElement?.localName === 'body');
+```
+
+Your `div` should have the `id` set to `piano`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.getAttribute('id') === 'piano');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
new file mode 100644
index 0000000000..e5c80cf6b4
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
@@ -0,0 +1,60 @@
+---
+id: 612e7d1c29fb872d6384379c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Nest a second `div` within your existing `div`, and set the `class` to be `keys`.
+
+# --hints--
+
+You should create a second `div` element.
+
+```js
+const divDiv = document.querySelectorAll('div');
+assert(divDiv?.length === 2);
+```
+
+Your new `div` element should be within your existing `div` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.length === 1);
+assert(div?.children?.[0]?.localName === 'div');
+```
+
+Your new `div` element should have the `class` set to `keys`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.[0]?.className === 'keys');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="piano">
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
new file mode 100644
index 0000000000..bfbbe7748d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
@@ -0,0 +1,60 @@
+---
+id: 612e804c54d5e7308d7ebe56
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `.keys` element, add seven `div` elements, each with the class `key`.
+
+# --hints--
+
+You should create seven new `div` elements.
+
+```js
+const divDivDiv = document.querySelectorAll('div');
+assert(divDivDiv?.length === 9);
+```
+
+Your seven new `div` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].length === 7);
+assert([...keys?.children].every(child => child?.tagName === 'DIV'));
+```
+
+Your seven new `div` elements should all have the `class` set to `key`.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].every(child => child?.classList?.contains('key')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys"></div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
new file mode 100644
index 0000000000..93e60db476
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
@@ -0,0 +1,95 @@
+---
+id: 612e813b3ba67633222cbe54
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Remember, a `class` attribute can hold multiple values. To differentiate between your white and black keys, add a second `class` value of `black--key` to your second, third, fifth, sixth, and seventh `.key` elements.
+
+# --hints--
+
+Your second `.key` element should also have a `class` of `black--key`.
+
+```js
+const key = document.querySelectorAll('.key')?.[1];
+assert(key?.className?.includes('black--key'));
+```
+
+Your third `.key` should have `black--key` in the `class`.
+
+```js
+const third = document.querySelectorAll('.key')?.[2];
+assert(third?.classList?.contains('black--key'));
+```
+
+Your fifth `.key` should have `black--key` in the `class`.
+
+```js
+const fifth = document.querySelectorAll('.key')?.[4];
+assert(fifth?.classList?.contains('black--key'));
+```
+
+Your sixth `.key` should have `black--key` in the `class`.
+
+```js
+const sixth = document.querySelectorAll('.key')?.[5];
+assert(sixth?.classList?.contains('black--key'));
+```
+
+Your seventh `.key` should have `black--key` in the `class`.
+
+```js
+const seventh = document.querySelectorAll('.key')?.[6];
+assert(seventh?.classList?.contains('black--key'));
+```
+
+You should have five `.black--key` elements.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 5);
+```
+
+You should have seven `.key` elements.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 7);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
new file mode 100644
index 0000000000..d42477e30c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
@@ -0,0 +1,74 @@
+---
+id: 612e8279827a28352ce83a72
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Now, copy the set of seven `.key` elements and paste two additional sets into the `.keys` div.
+
+# --hints--
+
+You should have 21 `.key` elements.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 21);
+```
+
+You should have 15 `.black--key` elements.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 15);
+```
+
+All `.key` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.key')?.length === 21);
+```
+
+All `.black--key` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.black--key')?.length === 15);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
new file mode 100644
index 0000000000..1f4190864e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
@@ -0,0 +1,107 @@
+---
+id: 612e83ec2eca1e370f830511
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Add a `link` element inside your `head` element. Set its `rel` attribute to `stylesheet` and its `href` attribute to `styles.css`.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.isNotNull(document.querySelector('link'));
+```
+
+You should not change your existing `head` tags. Make sure you did not delete the closing tag.
+
+```js
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
+```
+
+You should have one `link` element.
+
+```js
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
+```
+
+Your `link` element should be inside your `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    --fcc-editable-region--
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    --fcc-editable-region--
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e89562043183c86df287c.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
new file mode 100644
index 0000000000..a5dad2247f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
@@ -0,0 +1,77 @@
+---
+id: 612e89562043183c86df287c
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Browsers often apply default margin and padding values to specific elements. To make sure your piano layout displays correctly, you need to reset the box model.
+
+Add an `html` rule selector to your CSS file, and set the `box-sizing` property to `border-box`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have the `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
new file mode 100644
index 0000000000..cd1ca1882c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
@@ -0,0 +1,83 @@
+---
+id: 612e89d254fe5d3df7d6693d
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you've reset the `html` box model, you need to apply this to the elements inside it as well. To do this, set the `box-sizing` property to `inherit`, which ensures that the targeted elements adopt the same value as their parent element.
+
+You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the `::before` and `::after` pseudo-elements.
+
+The `::before` selector creates a pseudo-element which is the first child of the selected element, while the `::after` selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project.
+
+For now, create a CSS selector to target all elements using `*`, and include the pseudo-elements `::before` and `::after`. Set the `box-sizing` property to `inherit`.
+
+# --hints--
+
+You should have a `*, ::before, ::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
+```
+
+Your `*, ::before, ::after` selector should have the `box-sizing` property set to `inherit`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+html {
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
new file mode 100644
index 0000000000..46f69e2b59
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
@@ -0,0 +1,95 @@
+---
+id: 612e8eebe3a6dc3fcc33a66f
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Now target your `#piano` element with an `id` selector. Set its `background-color` property to `#00471b`, the `width` property to `992px` and the `height` property to `290px`.
+
+# --hints--
+
+You should have a `#piano` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano'));
+```
+
+Your `#piano` selector should have the `background-color` property set to `#00471b`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)');
+```
+
+Your `#piano` selector should have a `width` property set to `992px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px');
+```
+
+Your `#piano` selector should have the `height` set to `290px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
new file mode 100644
index 0000000000..85c97c2924
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
@@ -0,0 +1,81 @@
+---
+id: 612e95ef2e4bdf41f69067f9
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Set the `margin` of the `#piano` to `80px auto`.
+
+# --hints--
+
+Your `#piano` selector should have the `margin` property set to `80px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
new file mode 100644
index 0000000000..26f7c9217a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
@@ -0,0 +1,102 @@
+---
+id: 612e96fc87fe8e44f69f7ec5
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Time to style the keys. Below the `#piano` rule, target the `.keys` element with a `class` selector. Give the new rule a `background-color` property of `#040404`, a `width` property of `949px` and a `height` property of `180px`.
+
+# --hints--
+
+You should have a `.keys` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys'));
+```
+
+Your `.keys` selector should have a `background-color` property set to `#040404`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
+```
+
+Your `.keys` selector should have the `width` property set to `949px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
+```
+
+Your `.keys` selector should have a `height` property set to `180px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
new file mode 100644
index 0000000000..d877f447ad
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
@@ -0,0 +1,88 @@
+---
+id: 612e98f3245c98475e49cfc6
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Give the `.keys` a `padding-left` of `2px`.
+
+# --hints--
+
+Your `.keys` selector should have a `padding-left` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
new file mode 100644
index 0000000000..01ea9f27a9
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
@@ -0,0 +1,89 @@
+---
+id: 612e9a21381a1949327512e6
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Move the keys into position by adjusting the `#piano` selector. Set the `padding` property to `90px 20px 0 20px`.
+
+# --hints--
+
+Your `#piano` selector should have the `padding` property set to `90px 20px 0 20px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
new file mode 100644
index 0000000000..0f8ca9d6ba
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
@@ -0,0 +1,117 @@
+---
+id: 612e9d142affc44a453655db
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Time to style the keys themselves. Create a `class` selector for the `.key` elements. Set the `background-color` set to the value `#ffffff`, the `position` property to `relative`, the `width` property to `41px`, and the `height` property to `175px`.
+
+# --hints--
+
+You should have a `.key` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key'));
+```
+
+Your `.key` selector should have a `background-color` property set to `#ffffff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)');
+```
+
+Your `.key` selector should have the `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative');
+```
+
+Your `.key` selector should have a `width` property set to `41px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px');
+```
+
+Your `.key` selector should have a `height` property set to `175px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
new file mode 100644
index 0000000000..28c5419dac
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
@@ -0,0 +1,103 @@
+---
+id: 612e9f1e7e5ccd4fa9ada0be
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Give the `.key` a `margin` of `2px` and a `float` property set to `left`.
+
+# --hints--
+
+Your `.key` selector should have a `margin` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
+```
+
+Your `.key` selector should have a `float` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
new file mode 100644
index 0000000000..f0e8088dd8
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
@@ -0,0 +1,119 @@
+---
+id: 612ea4c4993aba52ab4aa32e
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now it's time to use the pseudo-selectors you set up earlier. To create the black keys, add a new `.key.black--key::after` selector. This targets elements with both `key` and `black--key` classes and selects the pseudo-element created after these elements in the HTML.
+
+In the new selector, set the `background-color` to `#1d1e22`. Also set the `content` property to `""`. This will make the pseudo-elements empty.
+
+The `content` property is used to set or override the content of an element. By default, the pseudo-elements created by the `::before` and `::after` selectors are empty, which means they are not rendered on the page. By setting the `content` property to an empty string `""`, you ensure that the pseudo-elements are rendered, while still appearing empty.
+
+If you would like to experiment, try removing the `background-color` property and setting different values for the `content` property, such as `"♥"`. Remember to undo these changes when you are done so the tests pass.
+
+# --hints--
+
+You should have a `.key.black--key::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
+```
+
+Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
+```
+
+Your `.key.black--key::after` selector should have a `content` property set to `""`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
new file mode 100644
index 0000000000..a7340d458d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
@@ -0,0 +1,110 @@
+---
+id: 612ea97df5742154772f312e
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Give the `.key.black--key::after` a `position` property set to `absolute` and a `left` property set to `-18px`.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute');
+```
+
+Your `.key.black--key::after` selector should have a `left` property set to `-18px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
new file mode 100644
index 0000000000..72dbf9cc19
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
@@ -0,0 +1,112 @@
+---
+id: 612ead8788d28655ef8db056
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+For the `.key.black--key::after`, set the `width` to `32px` and the `height` to `100px`.
+
+# --hints--
+
+Your `.key.black--key::after` should have a `width` property set to `32px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px');
+```
+
+Your `.key.black--key::after` should have a `height` property set to `100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
new file mode 100644
index 0000000000..37d6779238
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
@@ -0,0 +1,144 @@
+---
+id: 612eaf56b7ba3257fdbfb0db
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The piano needs the freeCodeCamp logo to make it official.
+
+Add an `img` element before your `.keys` element. Give the `img` a `class` of `logo`, and set the `src` to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Give it an `alt` text of `freeCodeCamp Logo`.
+
+# --hints--
+
+You should add a new `img` element.
+
+```js
+assert(document.querySelectorAll('img')?.length === 1);
+```
+
+Your `img` element should come before your first `.keys` element.
+
+```js
+const img = document.querySelector('img');
+assert(img?.nextElementSibling?.className === 'keys');
+assert(img?.previousElementSibling === null);
+```
+
+Your `img` element should have a `class` set to `logo`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.className === 'logo');
+```
+
+Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
+```
+
+Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo');
+```
+
+Remember that casing and spelling matter.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+    --fcc-editable-region--
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
new file mode 100644
index 0000000000..2e461ef48a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
@@ -0,0 +1,129 @@
+---
+id: 612eb4893b63c75bb9251ddf
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Start styling the logo by creating a `.logo` selector. Set the `width` to `200px`, a `position` of `absolute` and a `top` set to `23px`.
+
+# --hints--
+
+You should have a `.logo` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo'));
+```
+
+Your `.logo` selector should have a `width` property set to `200px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px');
+```
+
+Your `.logo` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute');
+```
+
+Your `.logo` selector should have a `top` property set to `23px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
new file mode 100644
index 0000000000..dc900814fd
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
@@ -0,0 +1,115 @@
+---
+id: 612eb75153591b5e3b1ab65e
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `img` element needs its parent to have a `position` set as a point of reference. Set the `position` of the `#piano` selector to `relative`.
+
+# --hints--
+
+Your `#piano` selector should have a `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
new file mode 100644
index 0000000000..62dbbd5686
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
@@ -0,0 +1,116 @@
+---
+id: 612eb7ca8c275d5f89c73333
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+To soften the sharp edges of the piano and its keys, start by giving the `#piano` a `border-radius` of `10px`.
+
+# --hints--
+
+Your `#piano` selector should have a `border-radius` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
new file mode 100644
index 0000000000..777b6e023b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
@@ -0,0 +1,117 @@
+---
+id: 612eb8e984cd73677a92b7e9
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Give the `.key` selector a `border-radius` value of `0 0 3px 3px`.
+
+# --hints--
+
+Your `.key` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+--fcc-editable-region--
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
new file mode 100644
index 0000000000..80785c1dbf
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
@@ -0,0 +1,118 @@
+---
+id: 612eb934f64a4d6890a45518
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Give the `.key.black--key::after` selector a `border-radius` of `0 0 3px 3px` to match the keys.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+--fcc-editable-region--
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
new file mode 100644
index 0000000000..a0c170c27e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
@@ -0,0 +1,139 @@
+---
+id: 612ebcba99bfa46a15370b11
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+The `@media` at-rule, also known as a media query, is used to conditionally apply CSS. Media queries are commonly used to apply CSS based on the viewport width using the `max-width` and `min-width` properties.
+
+In the below example the padding is applied to the `.card` class when the viewport is `960px` wide and below.
+
+```css
+@media (max-width: 960px) {
+  .card {
+    padding: 2rem;
+  }
+}
+```
+
+Add a media query that will be applied when the viewport is `768px` wide and below.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
+```
+
+Your `@media` query should have a `max-width` of `768px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
new file mode 100644
index 0000000000..3291a4dac2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
@@ -0,0 +1,133 @@
+---
+id: 612ebe7fe6d07e6b76d1cae2
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Add a new `#piano` selector within your `@media` query, and set the `width` to `358px`.
+
+# --hints--
+
+Your `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `358px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '358px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
new file mode 100644
index 0000000000..5cfe1e3cac
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
@@ -0,0 +1,136 @@
+---
+id: 612ebedec97e096c8bf64999
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Within the `@media` query, add a `.keys` selector and set the `width` to `318px`.
+
+# --hints--
+
+
+Your `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `318px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '318px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
new file mode 100644
index 0000000000..0dbf2d1e3c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
@@ -0,0 +1,139 @@
+---
+id: 612ebf9a210f2b6d77001e68
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Now add a `.logo` selector to the `@media` query, and set the `width` property to `150px`.
+
+# --hints--
+
+Your `@media` rule should have a `.logo` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo);
+```
+
+Your new `.logo` selector should have a `width` of `150px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo?.style.width === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
new file mode 100644
index 0000000000..a32cab125e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
@@ -0,0 +1,133 @@
+---
+id: 612ec0490ae8626e9adf82e4
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+You may have noticed that the keys collapse when the browser window is smaller than `768px`. To address this issue, set `overflow` to `hidden` in the first `.keys` selector. This property will hide any elements that are pushed outside the defined `width` of `.keys`, preventing unwanted layout changes.
+
+# --hints--
+
+Your original `.keys` selector should have the `overflow` property set to `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+--fcc-editable-region--
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
new file mode 100644
index 0000000000..097b595db2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
@@ -0,0 +1,154 @@
+---
+id: 612ec19d5268da7074941f84
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Logical operators can be used to construct more complex media queries. The `and` logical operator is used to query two media conditions.
+
+For example, a media query that targets a display width between 500px and 1000px would be:
+
+```css
+@media (min-width: 500px) and (max-width: 1000px){
+
+}
+```
+
+Add another `@media` rule to apply if the browser window is wider than `769px` but smaller than `1199px`.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
+```
+
+Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`.
+
+```js
+const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText;
+assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
new file mode 100644
index 0000000000..de83d05ac4
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
@@ -0,0 +1,288 @@
+---
+id: 612ec29c84b9a6718b1f5cec
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+For the new `@media` rule, set the `width` of the `#piano` to `675px` and the `width` of the `.keys` to `633px`.
+
+With that, your piano is complete!
+
+# --hints--
+
+Your second `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `675px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '675px');
+```
+
+Your second `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `633px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '633px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+@media (max-width: 1199px) and (min-width: 769px) {
+
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+@media (max-width: 1199px) and (min-width: 769px) {
+  #piano {
+    width: 675px;
+  }
+
+  .keys {
+    width: 633px;
+  }
+}
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
new file mode 100644
index 0000000000..9d986165f5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
@@ -0,0 +1,36 @@
+---
+id: 66fbcdfed6848e48947dbbc9
+title: Step 1
+challengeType: 1
+dashedName: step-1
+---
+
+# --description--
+
+In this workshop, you will create a recipe tracker using JavaScript objects.
+
+Start by creating an empty array named `recipes`. This is the array you'll push the recipe objects into later.
+
+# --hints--
+
+You should create an array named `recipes`.
+
+```js
+assert.isArray(recipes)
+```
+
+Your `recipes` array should be empty.
+
+```js
+assert.isEmpty(recipes)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
new file mode 100644
index 0000000000..0186623c8b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
@@ -0,0 +1,81 @@
+---
+id: 66fbcf750a62784cf11f562d
+title: Step 2
+challengeType: 1
+dashedName: step-2
+---
+
+# --description--
+
+Create an object named `recipe1`. Inside the `recipe1` object, create a `name` property with the value `"Spaghetti Carbonara"`.
+
+Also inside the `recipe1` object, create an `ingredients` property with an array as the value. The array should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` inside it.
+
+Create another `ratings` property with array value. The array should have `4`, `5`, `4`, and `5` inside it.
+
+# --hints--
+
+You should create an object named `recipe1`.
+
+```js
+assert.isObject(recipe1)
+```
+
+Your `recipe1` object should have a `name` property.
+
+```js
+assert.property(recipe1, 'name');
+```
+
+Your `name` property should be set to `Spaghetti Carbonara`.
+
+```js
+assert.equal(recipe1.name, 'Spaghetti Carbonara');
+```
+
+Your `recipe1` object should have an `ingredients` property.
+
+```js
+assert.property(recipe1, 'ingredients');
+```
+
+Your `ingredients` property should have an array value.
+
+```js
+assert.isArray(recipe1.ingredients)
+```
+
+The array value of your `ingredients` property should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` in it.
+
+```js
+assert.deepEqual(recipe1.ingredients, ["spaghetti", "Parmesan cheese", "pancetta", "black pepper"]);
+```
+
+Your `recipe1` object should have a `ratings` property.
+
+```js
+assert.property(recipe1, "ratings");
+```
+
+Your `ratings` property should have an array value.
+
+```js
+assert.isArray(recipe1.ratings)
+```
+
+The array value of your `ratings` property should have `4`, `5`, `4`, and `5` in it.
+
+```js
+assert.deepEqual(recipe1.ratings, [4, 5, 4, 5]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
new file mode 100644
index 0000000000..77dac4da29
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
@@ -0,0 +1,152 @@
+---
+id: 66fbcf750a62784cf11f562e
+title: Step 4
+challengeType: 1
+dashedName: step-4
+---
+
+# --description--
+
+Create another `recipe2` object with the following properties and values:
+
+| Key                | Value                                                                   |
+| ------------------ | ----------------------------------------------------------------------- |
+| `name`             | `Chicken Curry`                                                         |
+| `ingredients`      | `["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]` |
+| `ratings`          | `[4, 5, 5, 5]`                                                          |
+| `cookingTime`      | `42`                                                                    |
+| `totalIngredients` | `null`                                                                  |
+| `difficultyLevel`  | `''`                                                                    |
+| `averageRating`    | `null`                                                                  |
+
+# --hints--
+
+You should create an object named `recipe2`.
+
+```js
+assert.isObject(recipe2)
+```
+
+Your `recipe2` object should have a `name` property.
+
+```js
+assert.property(recipe2, "name");
+```
+
+Your `name` property should be set to `Chicken Curry`.
+
+```js
+assert.equal(recipe2.name, "Chicken Curry");
+```
+
+Your `recipe2` object should have an `ingredients` property.
+
+```js
+assert.property(recipe2, "ingredients");
+```
+
+Your `ingredients` property should have an array value.
+
+```js
+assert.isArray(recipe2.ingredients)
+```
+
+The array value of your `ingredients` property should have `chicken breast`, `coconut milk`, `curry powder`, `onion` and `garlic` in it.
+
+```js
+assert.deepEqual(recipe2.ingredients, ["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]);
+```
+
+Your `recipe2` object should have a `ratings` property.
+
+```js
+assert.property(recipe2, "ratings");
+```
+
+Your `ratings` property should have an array value.
+
+```js
+assert.isArray(recipe2.ratings)
+```
+
+The array value of your `ratings` property should have `4`, `5`, `5`, and `5` in it.
+
+```js
+assert.deepEqual(recipe2.ratings, [4, 5, 5, 5]);
+```
+
+Your `recipe2` object should have a `cookingTime` property.
+
+```js
+assert.property(recipe2, "cookingTime");
+```
+
+Your `cookingTime` property value should be a number.
+
+```js
+assert.isNumber(recipe2.cookingTime);
+```
+
+Your `cookingTime` property should be set to `42`.
+
+```js
+assert.equal(recipe2.cookingTime, 42);
+```
+
+Your `recipe2` object should have a `totalIngredients` property.
+
+```js
+assert.property(recipe2, "totalIngredients");
+```
+
+Your `totalIngredients` property should be set to `null`.
+
+```js
+assert.isNull(recipe2.totalIngredients);
+```
+
+Your `recipe2` object should have a `difficultyLevel` property.
+
+```js
+assert.property(recipe2, "difficultyLevel");
+```
+
+Your `difficultyLevel` property should be set to an empty string.
+
+```js
+assert.deepEqual(recipe2.difficultyLevel, "");
+```
+
+Your `recipe2` object should have an `averageRating` property.
+
+```js
+assert.property(recipe2, "averageRating");
+```
+
+Your `averageRating` property should be set to `null`.
+
+```js
+assert.isNull(recipe2.averageRating);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
new file mode 100644
index 0000000000..a010c6c140
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
@@ -0,0 +1,98 @@
+---
+id: 66fbcf750a62784cf11f5630
+title: Step 6
+challengeType: 1
+dashedName: step-6
+---
+
+# --description--
+
+A third `recipe3` object has been filled in for you. It has the same properties as `recipe1` and `recipe2`.
+
+You should now push the three objects into the `recipes` array. To do thus, you can use the `push()` method.
+
+Use the `push()` method to push all the recipe objects into the `recipes` array. Make sure to push `recipe1`, `recipe2`, and `recipe3` in that order.
+
+# --hints--
+
+You should remove `recipe1Name` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe1Name\s*=\s*recipe1\.name;?\s*console\.log\(recipe1Name\);?/)
+```
+
+You should remove `recipe2Name` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe2Name\s*=\s*recipe2\.name;?\s*console\.log\(recipe2Name\);?/)
+```
+
+You should remove `recipe1CookingTime` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe1CookingTime\s*=\s*recipe1\.cookingTime;?\s*console\.log\(recipe1CookingTime\);?/)
+```
+
+You should remove `recipe2CookingTime` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe2CookingTime\s*=\s*recipe2\.cookingTime;?\s*console\.log\(recipe2CookingTime\);?/)
+```
+
+You should push all the recipes objects into the `recipes` array. Make sure to push them in the order they are declared.
+
+```js
+assert.deepEqual(recipes, [recipe1, recipe2, recipe3]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+const recipe1Name = recipe1.name;
+console.log(recipe1Name);
+
+const recipe2Name = recipe2.name;
+console.log(recipe2Name);
+
+const recipe1CookingTime = recipe1.cookingTime;
+console.log(recipe1CookingTime);
+
+const recipe2CookingTime = recipe2.cookingTime;
+console.log(recipe2CookingTime);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
new file mode 100644
index 0000000000..292feedbae
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
@@ -0,0 +1,104 @@
+---
+id: 66fbcf750a62784cf11f5631
+title: Step 7
+challengeType: 1
+dashedName: step-7
+---
+
+# --description--
+
+Now, you should work on calculating the `averageRating`, `totalIngredients`, and the `difficultyLevel` for each recipe in the `recipes` array.
+
+Start by creating a `getAverageRating` function that takes a `ratings` parameter. Inside the function, calculate the average rating using the items in the `ratings` property of each recipe.
+
+Your `getAverageRating` function must return a number.
+
+# --hints--
+
+You should create a `getAverageRating` function.
+
+```js
+assert.isFunction(getAverageRating)
+```
+
+Your `getAverageRating` function should have a `ratings` parameter.
+
+```js
+assert.match(getAverageRating.toString(), /ratings/);
+```
+
+Your `getAverageRating` function should return a number.
+
+```js
+assert.isNumber(getAverageRating(recipe1.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.00`.
+
+```js
+assert.isNumber(getAverageRating(recipe2.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.75`.
+
+```js
+assert.isNumber(getAverageRating(recipe2.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.50`.
+
+```js
+assert.isNumber(getAverageRating(recipe1.ratings))
+```
+
+Your `getAverageRating` function should return the correct rating.
+
+```js
+assert.equal(getAverageRating(recipe1.ratings), 4.50)
+assert.equal(getAverageRating(recipe2.ratings), 4.75)
+assert.equal(getAverageRating(recipe3.ratings), 4.00)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
new file mode 100644
index 0000000000..ace358ab7f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
@@ -0,0 +1,105 @@
+---
+id: 66fbcf750a62784cf11f5632
+title: Step 8
+challengeType: 1
+dashedName: step-8
+---
+
+# --description--
+
+Create a `getTotalIngredients` function that takes an `ingredients` parameter. This function should return the number of ingredients for each recipe by returning the length of the `ingredients` array.
+
+# --hints--
+
+You should create a `getTotalIngredients` function.
+
+```js
+assert.isFunction(getTotalIngredients)
+```
+
+You `getTotalIngredients` function should have an `ingredients` parameter.
+
+```js
+assert.match(getTotalIngredients.toString(), /ingredients/);
+```
+
+Your `getTotalIngredients` function should return a number.
+
+```js
+assert.isNumber(getTotalIngredients(recipe1.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `5`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe2.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `3`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe3.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `4`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe1.ingredients))
+```
+
+Your `getTotalIngredients` function should return the correct number of ingredients.
+
+```js
+assert.equal(getTotalIngredients(recipe1.ingredients), 4)
+assert.equal(getTotalIngredients(recipe2.ingredients), 5)
+assert.equal(getTotalIngredients(recipe3.ingredients), 3)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
new file mode 100644
index 0000000000..c686ff0e9a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
@@ -0,0 +1,106 @@
+---
+id: 66fbcf750a62784cf11f5633
+title: Step 9
+challengeType: 1
+dashedName: step-9
+---
+
+# --description--
+
+Create a `getDifficultyLevel` function that takes `cookingTime` as a parameter.
+
+If `cookingTime` is less than `30`, the function should return `"easy"`. If it is less than or equal to `60`, the function should return `"medium"`. Otherwise, the function should return `"hard"`.
+
+# --hints--
+
+You should create a `getDifficultyLevel` function.
+
+```js
+assert.isFunction(getDifficultyLevel)
+```
+
+You `getDifficultyLevel` function should have a `cookingTime` parameter.
+
+```js
+assert.match(getDifficultyLevel.toString(), /cookingTime/);
+```
+
+Your `getDifficultyLevel` function should return `"easy"` when the `cookingTime` is less than or equal to `30`.
+
+```js
+assert.strictEqual(getDifficultyLevel(10), "easy")
+assert.strictEqual(getDifficultyLevel(20), "easy")
+assert.strictEqual(getDifficultyLevel(29), "easy")
+assert.strictEqual(getDifficultyLevel(30), "easy")
+```
+
+Your `getDifficultyLevel` function should return `"medium"` when the `cookingTime` is greater than `31` and less than `60`.
+
+```js
+assert.strictEqual(getDifficultyLevel(31), "medium")
+assert.strictEqual(getDifficultyLevel(40), "medium")
+assert.strictEqual(getDifficultyLevel(50), "medium")
+assert.strictEqual(getDifficultyLevel(60), "medium")
+```
+
+Your `getDifficultyLevel` function should return `"hard"` when the `cookingTime` is greater than `60`.
+
+```js
+assert.strictEqual(getDifficultyLevel(61), "hard")
+assert.strictEqual(getDifficultyLevel(65), "hard")
+assert.strictEqual(getDifficultyLevel(70), "hard")
+assert.strictEqual(getDifficultyLevel(75), "hard")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
new file mode 100644
index 0000000000..38ec100fd5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
@@ -0,0 +1,133 @@
+---
+id: 66fbcf750a62784cf11f5634
+title: Step 10
+challengeType: 1
+dashedName: step-10
+---
+
+# --description--
+
+It's time to test each of the functions. You can use any of the recipes for this, but let's start with `recipe1`.
+
+Create three new variables: `recipe1AverageRating`, `recipe1TotalIngredients`, and `recipe1DifficultyLevel`. Assign them the values by calling the corresponding function for each variable and passing in the appropriate `recipe1` property.
+
+Finally, log each variable to the console to see the results.
+
+# --hints--
+
+You should create a `recipe1AverageRating` variable.
+
+```js
+assert.isNotNull(recipe1AverageRating)
+```
+
+Your `recipe1AverageRating` variable should be set to `getAverageRating(recipe1.ratings)`.
+
+```js
+assert.equal(recipe1AverageRating, getAverageRating(recipe1.ratings));
+```
+
+You should log `recipe1AverageRating` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1AverageRating\);?/)
+```
+
+You should create a `recipe1TotalIngredients` variable.
+
+```js
+assert.isNotNull(recipe1TotalIngredients)
+```
+
+Your `recipe1TotalIngredients` variable should be set to `getTotalIngredients(recipe1.ingredients)`.
+
+```js
+assert.equal(recipe1TotalIngredients, getTotalIngredients(recipe1.ingredients));
+```
+
+You should log `recipe1TotalIngredients` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1TotalIngredients\);?/)
+```
+
+You should create a `recipe1DifficultyLevel` variable.
+
+```js
+assert.isNotNull(recipe1DifficultyLevel)
+```
+
+Your `recipe1DifficultyLevel` variable should be set to `getDifficultyLevel(recipe1.cookingTime)`.
+
+```js
+assert.equal(recipe1DifficultyLevel, getDifficultyLevel(recipe1.cookingTime));
+```
+
+You should log `recipe1DifficultyLevel` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1DifficultyLevel\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
new file mode 100644
index 0000000000..3a34c4658f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
@@ -0,0 +1,124 @@
+---
+id: 66fbcf750a62784cf11f5635
+title: Step 11
+challengeType: 1
+dashedName: step-11
+---
+
+# --description--
+
+You can now fill in each item of the `recipes` array with values for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties.
+
+To do this, access the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of each recipe object and assign them the results of the corresponding function calls with the appropriate arguments.
+
+For now, access the `averageRating`, `totalIngredients`, and `difficultyLevel` of `recipe1` and set them to the appropriate function calls and arguments.
+
+# --hints--
+
+You should access the `averageRating` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.averageRating/)
+```
+
+You should set the `averageRating` of `recipe1` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter.
+
+```js
+assert.match(code, /recipe1\.averageRating\s*=\s*getAverageRating\(recipe1\.ratings\);?/)
+```
+
+You should access the `totalIngredients` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.totalIngredients/)
+```
+
+You should set the `totalIngredients` of `recipe1` you accessed to the calling of `getTotalIngredients` with `recipe1.ingredients` as its parameter.
+
+```js
+assert.match(code, /recipe1\.totalIngredients\s*=\s*getTotalIngredients\(recipe1\.ingredients\);?/)
+```
+
+You should access the `difficultyLevel` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.difficultyLevel/)
+```
+
+You should set the `difficultyLevel` of `recipe1` you accessed to the calling of `getDifficultyLevel` with `recipe1.cookingTime` as its parameter.
+
+```js
+assert.match(code, /recipe1\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe1\.cookingTime\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
new file mode 100644
index 0000000000..bd9aceddf5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
@@ -0,0 +1,124 @@
+---
+id: 66fbcf750a62784cf11f5636
+title: Step 12
+challengeType: 1
+dashedName: step-12
+---
+
+# --description--
+
+Repeat the process for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe2`.
+
+# --hints--
+
+You should access the `averageRating` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.averageRating/)
+```
+
+You should set the `averageRating` of `recipe2` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter.
+
+```js
+assert.match(code, /recipe2\.averageRating\s*=\s*getAverageRating\(recipe2\.ratings\);?/)
+```
+
+You should access the `totalIngredients` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.totalIngredients/)
+```
+
+You should set the `totalIngredients` of `recipe2` you accessed to the calling of `getTotalIngredients` with `recipe2.ingredients` as its parameter.
+
+```js
+assert.match(code, /recipe2\.totalIngredients\s*=\s*getTotalIngredients\(recipe2\.ingredients\);?/)
+```
+
+You should access the `difficultyLevel` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.difficultyLevel/)
+```
+
+You should set the `difficultyLevel` of `recipe2` you accessed to the calling of `getDifficultyLevel` with `recipe2.cookingTime` as its parameter.
+
+```js
+assert.match(code, /recipe2\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe2\.cookingTime\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
new file mode 100644
index 0000000000..032cb8cd78
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
@@ -0,0 +1,186 @@
+---
+id: 66fbcf750a62784cf11f5637
+title: Step 13
+challengeType: 1
+dashedName: step-13
+---
+
+# --description--
+
+The `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe3` have been filled in for you.
+
+Now, log the `recipes` array to the console to see all its items filled with the updated values.
+
+With that, your recipes tracker project is complete.
+
+# --hints--
+
+You should log the `recipes` array to the console.
+
+```js
+assert.match(code, /console\.log\(recipes\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+recipe2.averageRating = getAverageRating(recipe2.ratings);
+recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients);
+recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime);
+
+recipe3.averageRating = getAverageRating(recipe3.ratings);
+recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients)
+recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime)
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return (total / ratings.length).toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(`Recipe 1 Average Rating ${recipe1AverageRating}`);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(`Recipe 1 Total Ingredients: ${recipe1TotalIngredients}`);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(`Recipe 1 Difficulty: ${recipe1DifficultyLevel}`);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+recipe2.averageRating = getAverageRating(recipe2.ratings);
+recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients);
+recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime);
+
+recipe3.averageRating = getAverageRating(recipe3.ratings);
+recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients)
+recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime)
+
+console.log(recipes);
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
new file mode 100644
index 0000000000..193d3d702f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
@@ -0,0 +1,86 @@
+---
+id: 66ff02792b3042a2b811f475
+title: Step 3
+challengeType: 1
+dashedName: step-3
+---
+
+# --description--
+
+Add the following properties to the `recipe1` object:
+
+| Key                | Value  |
+| ------------------ | ------ |
+| `cookingTime`      | `22`   |
+| `totalIngredients` | `null` |
+| `difficultyLevel`  | `""`   |
+| `averageRating`    | `null` |
+
+The properties with `null` and empty string values will be updated later after you calculate them.
+
+# --hints--
+
+Your `recipe1` object should have a `cookingTime` property.
+
+```js
+assert.property(recipe1, "cookingTime");
+```
+
+Your `cookingTime` property should be set to `22`.
+
+```js
+assert.equal(recipe1.cookingTime, 22);
+```
+
+Your `recipe1` object should have a `totalIngredients` property.
+
+```js
+assert.property(recipe1, "totalIngredients");
+```
+
+Your `totalIngredients` property should be set to `null`.
+
+```js
+assert.isNull(recipe1.totalIngredients);
+```
+
+Your `recipe1` object should have a `difficultyLevel` property.
+
+```js
+assert.property(recipe1, "difficultyLevel");
+```
+
+Your `difficultyLevel` property should be set to an empty string.
+
+```js
+assert.deepEqual(recipe1.difficultyLevel, "");
+```
+
+Your `recipe1` object should have a `averageRating` property.
+
+```js
+assert.property(recipe1, "averageRating");
+```
+
+Your `averageRating` property should be set to `null`.
+
+```js
+assert.isNull(recipe1.averageRating);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  ratings: [4, 5, 4, 5],
+--fcc-editable-region--
+
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
new file mode 100644
index 0000000000..6e051af223
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
@@ -0,0 +1,135 @@
+---
+id: 670e4f45f7116c0f216a5177
+title: Step 5
+challengeType: 1
+dashedName: step-5
+---
+
+# --description--
+
+Before we move on, you should practice how to access properties from an object.
+
+You can use either dot (`.`) or bracket (`[]`) notation to do this. Here's an example:
+
+```js
+const person = {
+  name: 'John',
+  age: 30,
+  job: 'Software Engineer'
+};
+
+console.log(person.name); // John
+console.log(person['age']);  // 30
+```
+
+Access the `name` properties of both `recipe1` and `recipe2`, and assign them to the variables `recipe1Name` and `recipe2Name`, respectively.
+
+Next, access the `cookingTime` properties of both recipes and assign them to the variables `recipe1CookingTime` and `recipe2CookingTime`, respectively.
+
+Make sure all the variables you created are logged to the console.
+
+# --hints--
+
+You should create a `recipe1Name` variable.
+
+```js
+assert.isNotNull(recipe1Name)
+```
+
+You should set your `recipe1Name` variable to the accessment of the `name` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.name|recipe1\[("|'|`)name("|'|`)\]/)
+```
+
+You should log `recipe1Name` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1Name\)/)
+```
+
+You should create a `recipe2Name` variable.
+
+```js
+assert.isNotNull(recipe2Name)
+```
+
+You should set your `recipe2Name` variable to the accessment of the `name` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.name|recipe2\[("|'|`)name("|'|`)\]/)
+```
+
+You should log `recipe2Name` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe2Name\)/)
+```
+
+You should create a `recipe1CookingTime` variable.
+
+```js
+assert.isNotNull(recipe1CookingTime)
+```
+
+You should set your `recipe1CookingTime` variable to the accessment of the `cookingTime` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.cookingTime|recipe1\[("|'|`)cookingTime("|'|`)\]/)
+```
+
+You should log `recipe1CookingTime` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1CookingTime\)/)
+```
+
+You should create a `recipe2CookingTime` variable.
+
+```js
+assert.isNotNull(recipe2CookingTime)
+```
+
+You should set your `recipe2CookingTime` variable to the accessment of the `cookingTime` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.cookingTime|recipe2\[("|'|`)cookingTime("|'|`)\]/)
+```
+
+You should log `recipe2CookingTime` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe2CookingTime\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
new file mode 100644
index 0000000000..f86b2c6d43
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996b
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Begin your project by adding an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` within the `body` element.
+
+# --hints--
+
+Your code should have an `img` element.
+
+```js
+assert(document.querySelectorAll('img').length === 1);
+```
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
new file mode 100644
index 0000000000..ba70369909
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
@@ -0,0 +1,42 @@
+---
+id: 60a3e3396c7b40068ad6996c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+In the previous lecture videos about the CSS box model, you learned that every HTML element is treated as a box with four areas.
+
+Imagine you receive a box from your favorite online retailer — the content is the item in the box, or in your case, a header, paragraph, or image element.
+
+Change the `src` attribute in the `<img>` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`.
+
+# --hints--
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
new file mode 100644
index 0000000000..53f6395c12
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
@@ -0,0 +1,41 @@
+---
+id: 60a3e3396c7b40068ad6996d
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it.
+
+Think of the border like the cardboard box your item was shipped in.
+
+Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+# --hints--
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
new file mode 100644
index 0000000000..070dc57d06
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Margin is the area outside of the box, and can be used to control the space between other boxes or elements.
+
+Here the bottom element has a larger top margin, pushing it further down the page.
+
+Now that you quickly reviewed the CSS box model, let's get started on the Rothko painting.
+
+Remove the `<img>` element.
+
+# --hints--
+
+You should not have an `img` element in your code.
+
+```js
+assert(document.querySelector('img') === null);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
new file mode 100644
index 0000000000..33aa91b710
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
@@ -0,0 +1,47 @@
+---
+id: 60a3e3396c7b40068ad6996f
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Add a `div` element in the `body`.
+
+Set the `class` attribute equal to `canvas`.
+
+This will act as the canvas for your painting.
+
+# --hints--
+
+Your code should have a `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 1)
+```
+
+The `div` element should have a `class` with the value `canvas`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('canvas'))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
new file mode 100644
index 0000000000..4ef6fabe87
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
@@ -0,0 +1,53 @@
+---
+id: 60a3e3396c7b40068ad69970
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Before you can start styling the `div` you added, you need to link your CSS to your HTML.
+
+Add a `link` element to link your `styles.css` file. Set the `href` to `styles.css`, and remember to set the `rel` attribute to `stylesheet`.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert(/<link/.test(code))
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert.match(code, /<link.*?rel=('|"|`)stylesheet\1/)
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link.*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
new file mode 100644
index 0000000000..286d537b9e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69971
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Time for CSS.
+
+Even though your `<div>` has no text, it's still treated as a box with content. Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels. Here's a CSS rule that sets the width of the class `card` to 300 pixels:
+
+```css
+.card {
+  width: 300px;
+}
+```
+
+# --hints--
+
+Your code should have a `.canvas` selector.
+
+```js
+const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas');
+assert(hasCanvas)
+```
+
+You should set the `width` property to `500px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px')
+assert(hasWidth);
+```
+
+Your `.canvas` element should have a `width` of `500px`.
+
+```js
+const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width');
+assert(width === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
new file mode 100644
index 0000000000..9151276320
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
@@ -0,0 +1,54 @@
+---
+id: 60a3e3396c7b40068ad69972
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Add the `height` property with the value `600px` to your `.canvas` rule.
+
+# --hints--
+
+You should set the `height` property to `600px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px');
+assert(hasHeight);
+```
+
+Your `.canvas` element should have a `height` of `600px`.
+
+```js
+const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height');
+assert(canvasHeight === '600px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
new file mode 100644
index 0000000000..66a17e01da
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
@@ -0,0 +1,55 @@
+---
+id: 60a3e3396c7b40068ad69973
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Change the `background-color` of the canvas to `#4d0f00`.
+
+# --hints--
+
+You should set the `background-color` property to `#4d0f00`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)');
+assert(hasBackground);
+```
+
+Your `.canvas` element should have a `background-color` of `#4d0f00`.
+
+```js
+const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color');
+assert(canvasBackground === 'rgb(77, 15, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
new file mode 100644
index 0000000000..45d4fc208c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69974
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Every painting needs a frame.
+
+Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class.
+# --hints--
+
+You should add a new `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 2)
+```
+
+Your `.canvas` element should be nested in the new `div` element.
+
+```js
+assert(document.querySelector('.canvas').parentElement.tagName === 'DIV');
+```
+
+Your new `div` should have a `class` with the value `frame`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('frame'));
+```
+
+Your new `div` should be within your `body` element.
+
+```js
+assert(document.querySelector('div').parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+--fcc-editable-region--
+
+    <div class="canvas">
+    </div>
+
+--fcc-editable-region--
+  </body>
+  ```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
new file mode 100644
index 0000000000..8943f3095f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69975
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Write a new rule using the `.frame` class selector.
+
+Use the `border` shorthand declaration to give the `.frame` element a solid, black border with a width of `50px`.
+
+# --hints--
+
+Your code should have a `.frame` selector.
+
+```js
+const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame');
+assert(hasFrame);
+```
+
+You should set the `border` property to `50px solid black`.
+
+```js
+const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black');
+assert(hasBorder);
+```
+
+Your `.frame` element should have a `50px solid black` `border`.
+
+```js
+const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border');
+assert(frameBorder === '50px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
new file mode 100644
index 0000000000..67d334708d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
@@ -0,0 +1,64 @@
+---
+id: 60a3e3396c7b40068ad69976
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+The frame is much too wide.
+
+In `.frame`, set its `width` to 500 pixels.
+
+# --hints--
+
+You should set the `width` property to `500px`.
+
+```js
+const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px');
+assert(widthFilter.length === 2);
+```
+
+Your `.frame` element should have a `width` of `500px`.
+
+```js
+const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width');
+assert(frameWidth === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
new file mode 100644
index 0000000000..bba60c94f2
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
@@ -0,0 +1,65 @@
+---
+id: 60a3e3396c7b40068ad69977
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Use padding to adjust the spacing within an element.
+
+In `.frame`, use the `padding` shorthand property to increase the space between the `.frame` and `.canvas` elements by `50px`. The shorthand will increase space in the top, bottom, left, and right of the element's border and canvas within.
+
+# --hints--
+
+You should set the `padding` property to `50px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px');
+assert(hasPadding);
+```
+
+Your `.frame` element should have a `padding` value of `50px`.
+
+```js
+const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding');
+assert(framePadding === '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
new file mode 100644
index 0000000000..5bdf662a15
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
@@ -0,0 +1,66 @@
+---
+id: 60a3e3396c7b40068ad69978
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Use margins to adjust the spacing outside of an element.
+
+Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. This will move the frame down 20 pixels and horizontally center it on the page.
+
+# --hints--
+
+You should set the `margin` property to `20px auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto');
+assert(hasMargin);
+```
+
+Your `.frame` element should have a `margin` value of `20px auto`.
+
+```js
+const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin');
+assert(frameMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
new file mode 100644
index 0000000000..cbbaa5bd1d
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad69979
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Add a new `div` element inside of your `.canvas` element.
+
+Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 3);
+```
+
+You should nest the new `div` element within your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[0].tagName === 'DIV');
+```
+
+Your new `div` should have a `class` attribute with a value `one`.
+
+```js
+assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
new file mode 100644
index 0000000000..de2c2b089c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997a
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Write a new rule that targets `.one` and set its `width` to 425 pixels.
+
+# --hints--
+
+You should have a `.one` selector.
+
+```js
+const hasOne = new __helpers.CSSHelp(document).getStyle('.one');
+assert(hasOne);
+```
+
+You should set the `width` property to `425px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px');
+assert(hasWidth);
+```
+
+Your `.one` element should have a `width` value of `425px`.
+
+```js
+const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width');
+assert(oneWidth === '425px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
new file mode 100644
index 0000000000..aa9033dc8b
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
@@ -0,0 +1,70 @@
+---
+id: 60a3e3396c7b40068ad6997b
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Now set the `height` for `.one` to 150 pixels.
+
+# --hints--
+
+You should set the `height` property to `150px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px');
+assert(hasHeight);
+```
+
+Your `.one` element should have a `height` value of `150px`.
+
+```js
+const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height');
+assert(oneHeight === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
new file mode 100644
index 0000000000..bec4b8fdf3
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad6997c
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Set the `background-color` of `.one` to `#efb762`.
+
+# --hints--
+
+You should set the `background-color` property to `#efb762`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)');
+assert(hasBackground)
+```
+
+Your `.one` element should have a `background-color` value of `#efb762`.
+
+```js
+const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color');
+assert(oneBackground === 'rgb(239, 183, 98)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
new file mode 100644
index 0000000000..29042741c7
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997d
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Use margins to position the `.one` element on the canvas.
+
+Add the shorthand `margin` property with a vertical margin of `20px` and a horizontal margin of `auto`.
+
+# --hints--
+
+You should set the `margin` property to `20px auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto');
+assert(marginFilter.length === 2);
+```
+
+Your `.one` element should have a `margin` value of `20px auto`.
+
+```js
+const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin');
+assert(oneMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
new file mode 100644
index 0000000000..365ecbaec6
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
@@ -0,0 +1,75 @@
+---
+id: 60a3e3396c7b40068ad6997e
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels.
+
+Add `padding` of `1px` to the `.canvas` element to give the `.one` element something solid to push off of.
+
+# --hints--
+
+You should set the `padding` property to `1px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
+assert(hasPadding);
+```
+
+Your `.canvas` element should have a `padding` value of `1px`.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding');
+assert(canvasPadding === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
new file mode 100644
index 0000000000..9ffd481ee9
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
@@ -0,0 +1,82 @@
+---
+id: 60a3e3396c7b40068ad6997f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels.
+
+Replace the `padding` property with `overflow` set to `hidden` - changing the canvas back to its original dimensions.
+
+# --hints--
+
+You should remove the `padding` property from the `.canvas` selector.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding');
+assert(!canvasPadding);
+```
+
+You should set the `overflow` property to `hidden`.
+
+```js
+const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden');
+assert(hasOverflow);
+```
+
+Your `.canvas` element should have an `overflow` value of `hidden`.
+
+```js
+const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow');
+assert(canvasOverflow === 'hidden')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+  padding: 1px;
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
new file mode 100644
index 0000000000..84694dcaba
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69980
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle.
+
+# --hints--
+
+You should not change the existing `.one` element.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+```
+
+You should have a second `div` element in your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[1].tagName === 'DIV');
+```
+
+Your second `div` element should have a `class` value of `two`.
+
+```js
+assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two'));
+```
+
+Your `.two` element should come after your `.one` element.
+
+```js
+assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
new file mode 100644
index 0000000000..905c846534
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69981
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels.
+
+# --hints--
+
+You should have a `.two` selector.
+
+```js
+const hasTwo = new __helpers.CSSHelp(document).getStyle('.two');
+assert(hasTwo);
+```
+
+You should set the `width` property to `475px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px');
+assert(hasWidth);
+```
+
+Your `.two` element should have a `width` value of `475px`.
+
+```js
+const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width');
+assert(twoWidth === '475px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
new file mode 100644
index 0000000000..deb83104e5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
@@ -0,0 +1,79 @@
+---
+id: 60a3e3396c7b40068ad69982
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Set the `height` of the `.two` element to 200 pixels.
+
+# --hints--
+
+You should set the `height` property to `200px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px');
+assert(hasHeight);
+```
+
+Your `.two` element should have a `height` value of `200px`.
+
+```js
+const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height');
+assert(twoHeight === '200px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
new file mode 100644
index 0000000000..b473fbe95e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
@@ -0,0 +1,80 @@
+---
+id: 60a3e3396c7b40068ad69983
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Set the `background-color` of the `.two` element to `#8f0401`.
+
+# --hints--
+
+You should set the `background-color` property to `#8f0401`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)');
+assert(hasBackground);
+```
+
+Your `.two` element should have a `background-color` value of `#8f0401`.
+
+```js
+const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color');
+assert(twoBackground === 'rgb(143, 4, 1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
new file mode 100644
index 0000000000..aa6bfc9b10
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
@@ -0,0 +1,81 @@
+---
+id: 60a3e3396c7b40068ad69984
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Center the `.two` element by setting its `margin` to `auto`.
+
+# --hints--
+
+You should set the `margin` property to `auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto');
+assert(hasMargin);
+```
+
+Your `.two` element should have a `margin` value of `auto`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
new file mode 100644
index 0000000000..d4e9204170
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad69986
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle.
+
+# --hints--
+
+Your existing `.one` and `.two` elements should not be changed.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+assert(document.querySelectorAll('.two').length === 1);
+```
+
+Your new `div` should be nested in your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
+```
+
+Your new `div` should come after your `.two` element.
+
+```js
+assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
+```
+
+Your new `div` element should have a `class` with the value `three`.
+
+```js
+assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
new file mode 100644
index 0000000000..a8ed43828e
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
@@ -0,0 +1,94 @@
+---
+id: 60a3e3396c7b40068ad69987
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+You don't always have to use pixels when sizing an element.
+
+Create a new rule, `.three`, and set its `width` to `91%`.
+
+# --hints--
+
+You should use the `.three` selector.
+
+```js
+const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
+assert(hasThree);
+```
+
+You should set the `width` property to `91%`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
+assert(hasWidth);
+```
+
+Your `.three` element should have a `width` value of `91%`.
+
+```js
+const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
+assert(threeWidth === '91%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
new file mode 100644
index 0000000000..4bac9123c8
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
@@ -0,0 +1,87 @@
+---
+id: 60a3e3396c7b40068ad69988
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Set the `height` of `.three` to `28%`.
+
+# --hints--
+
+You should set the `height` property to `28%`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
+assert(hasHeight);
+```
+
+Your `.three` element should have a `height` value of `28%`.
+
+```js
+const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
+assert(threeHeight === '28%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
new file mode 100644
index 0000000000..aa949defd3
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
@@ -0,0 +1,88 @@
+---
+id: 60a3e3396c7b40068ad69989
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Change the `background-color` of `.three` to `#b20403`.
+
+# --hints--
+
+You should set the `background-color` property to `#b20403`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
+assert(hasBackground);
+```
+
+Your `.three` element should have a `background-color` value of `#b20403`.
+
+```js
+const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
+assert(threeBackground === 'rgb(178, 4, 3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
new file mode 100644
index 0000000000..6a8b129773
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
@@ -0,0 +1,89 @@
+---
+id: 60a3e3396c7b40068ad6998a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Center the `.three` element on the canvas by setting its `margin` to `auto`.
+
+# --hints--
+
+You should set the `margin` property to `auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
+assert(marginFilter.length === 2);
+```
+
+Your `.three` element should have a `margin` value of `auto`.
+
+```js
+const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
+assert(threeMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
new file mode 100644
index 0000000000..ba32bd466f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad6998b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+It's helpful to have your margins push in one direction.
+
+In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels.
+
+In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels.
+
+# --hints--
+
+You should set the `margin` property to `0 auto 20px`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
+assert(hasMargin);
+```
+
+Your `.two` element should have a `margin` value of `0 auto 20px`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === '0px auto 20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+  margin: auto;
+--fcc-editable-region--
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
new file mode 100644
index 0000000000..db47cb9346
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad6998c
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The colors and shapes of your painting are too sharp to pass as a Rothko.
+
+Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element.
+
+Here's an example of a rule that add a 3px `blur`:
+
+```css
+p {
+  filter: blur(3px);
+}
+```
+
+# --hints--
+
+You should set the `filter` property to `blur(2px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
+assert(hasFilter);
+```
+
+Your `.canvas` element should have a `filter` value of `blur(2px)`.
+
+```js
+const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
+assert(canvasFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+
+}
+--fcc-editable-region--
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
new file mode 100644
index 0000000000..06f7c56156
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
@@ -0,0 +1,108 @@
+---
+id: 60a3e3396c7b40068ad6998d
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel.
+
+# --hints--
+
+You should have a `.one, .two` selector list.
+
+```js
+const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
+assert(oneTwo);
+```
+
+You should set the `filter` property to `blur(1px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
+assert(hasFilter)
+```
+
+Your `.one` element should have a `filter` value of `blur(1px)`.
+
+```js
+const one = document.querySelector('.one');
+const oneFilter = getComputedStyle(one).filter;
+assert(oneFilter === 'blur(1px)');
+```
+
+Your `.two` element should have a `filter` value of `blur(1px)`.
+
+```js
+const two = document.querySelector('.two');
+const twoFilter = getComputedStyle(two).filter;
+assert(twoFilter === 'blur(1px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
new file mode 100644
index 0000000000..dafc3792ec
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
@@ -0,0 +1,95 @@
+---
+id: 60a3e3396c7b40068ad6998e
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Increase the `blur` of `.three` by 2 pixels.
+
+# --hints--
+
+You should set the `filter` property to `blur(2px)`.
+
+```js
+const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
+assert(filterFilter.length === 2);
+```
+
+Your `.three` element should have a `filter` value of `blur(2px)`.
+
+```js
+const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
+assert(threeFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
new file mode 100644
index 0000000000..9971a7dda8
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad6998f
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+The rectangles are too small and their edges don't have the soft quality of a painting.
+
+Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
+
+```js
+const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
+assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
new file mode 100644
index 0000000000..70123d3e87
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
@@ -0,0 +1,97 @@
+---
+id: 60a3e3396c7b40068ad69990
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 3px 3px #8f0401`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`.
+
+```js
+const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
+assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
new file mode 100644
index 0000000000..e7582ebc5a
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad69991
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+assert(hasBoxShadow);
+```
+
+Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
+
+```js
+const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
+assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
new file mode 100644
index 0000000000..f78535e86c
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
@@ -0,0 +1,101 @@
+---
+id: 60a3e3396c7b40068ad69992
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+The corners of each rectangle are still too sharp.
+
+Round each corner of the `.one` element by 9 pixels, using the `border-radius` property.
+
+# --hints--
+
+You should set the `border-radius` property to `9px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
+assert(hasBorderRadius);
+```
+
+Your `.one` element should have a `border-radius` value of `9px`.
+
+```js
+const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
+assert(oneBorderRadius === '9px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
new file mode 100644
index 0000000000..e99b91467f
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad69993
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Use the `border-radius` property on the `.two` selector, to set its top-left radius and bottom-right radius to `8px`, and top-right radius and bottom-left radius to `10px`.
+
+# --hints--
+
+You should set the `border-radius` property to `8px 10px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
+assert(hasBorderRadius);
+```
+
+Your `.two` element should have a `border-radius` value of `8px 10px`.
+
+```js
+const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
+assert(twoBorderRadius === '8px 10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
new file mode 100644
index 0000000000..41be8e8fd5
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69994
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners.
+
+Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels.
+
+# --hints--
+
+You should set the `border-radius` property to `30px 25px 60px 12px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
+assert(hasBorderRadius);
+```
+
+Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`.
+
+```js
+const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
+assert(threeBorderRadius === '30px 25px 60px 12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
new file mode 100644
index 0000000000..f5ebe9a726
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
@@ -0,0 +1,104 @@
+---
+id: 60a3e3396c7b40068ad69995
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Rotate each rectangle to give them more of an imperfect, hand-painted look.
+
+Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees.
+
+# --hints--
+
+You should set the `transform` property to `rotate(-0.6deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
+assert(hasTransform);
+```
+
+Your `.one` element should have a `transform` value of `rotate(-0.6deg)`.
+
+```js
+const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
+assert(oneTransform === 'rotate(-0.6deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
new file mode 100644
index 0000000000..3b25d4ac04
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69996
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Rotate the `.two` element clockwise by 0.4 degrees.
+
+# --hints--
+
+You should set the `transform` property to `rotate(0.4deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
+assert(hasTransform);
+```
+
+Your `.two` element should have a `transform` value of `rotate(0.4deg)`.
+
+```js
+const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
+assert(twoTransform === 'rotate(0.4deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
new file mode 100644
index 0000000000..a41a1976ff
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
@@ -0,0 +1,180 @@
+---
+id: 60a3e3396c7b40068ad69997
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Rotate `.three` counter clockwise by 0.2 degrees.
+
+With this final step, your Rothko painting is now complete.
+
+# --hints--
+
+You should set the `transform` property to `rotate(-0.2deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
+assert(hasTransform);
+```
+
+Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
+
+```js
+const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
+assert(threeTransform === 'rotate(-0.2deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+  transform: rotate(-0.2deg);
+}
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
index 2b17d3a4cf..3e3c7ac880 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
@@ -17,22 +17,36 @@ gradient-type(
 );
 ```
 
-Fülle `.bb3` mit einem `repeating-linear-gradient` aus. Verwende `90deg` für die Richtung, deine `building-color3` für die ersten beiden Farben und `window-color3` bei `15%` für die dritte. Wenn du für eine Farbe keinen Abstand angibst, werden die sinnvollen Werte verwendet. In diesem Fall sind die ersten beiden Farben standardmäßig `0%` und `7.5%`, da sie bei `0%` beginnen und `7.5%` die Hälfte von `15%` ist.
+Fülle `.bb3` mit einem `repeating-linear-gradient` aus. Verwende `90deg` für die Richtung, deine `building-color3` für die ersten beiden Farben und `window-color3` bei `15%` für die dritte.
+
+When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`, so you do not need to set them.
 
 # --hints--
 
-Du solltest `.bb3` mit `repeating-linear-gradient` einen `background` geben.
+You should give `.bb3` a `background` using `repeating-linear-gradient`.
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
 ```
 
-Du solltest `90deg` für die Richtung im ersten Argument von `repeating-linear-gradient` verwenden.
+You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`.
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
 ```
 
+You should not set the percentage for the first color.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "var(--building-color3)0%");
+```
+
+You should not set the percentage for the second color.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "var(--building-color3)7.5%");
+```
+
 Du solltest `--building-color3` für die ersten beiden Farben verwenden.
 
 ```js
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
index a0b40d51dd..47862b5519 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
@@ -9,7 +9,7 @@ dashedName: step-3
 
 Das `p`-Element wird verwendet, um einen Textabsatz auf den Webseiten zu erstellen. Erstelle ein `p`-Element unter deinem `h2`-Element und gib ihm den folgenden Text:
 
-`See more cat photos in our gallery.`
+`Everyone loves cute cats online!`
 
 # --hints--
 
@@ -25,13 +25,13 @@ Dein `p`-Element sollte ein schließendes Tag haben. Abschließende Tags enthalt
 assert(code.match(/<\/p\>/));
 ```
 
-Dein `p` Elementtext sollte `See more cat photos in our gallery.` Du hast entweder den Text weggelassen oder hast einen Tippfehler im Text.
+Your `p` element's text should be `Everyone loves cute cats online!` You have either omitted the text or have a typo.
 
 ```js
 const extraSpacesRemoved = document
   .querySelector('p')
   .innerText.replace(/\s+/g, ' ');
-assert(extraSpacesRemoved.match(/see more cat photos in our gallery\.?$/i));
+assert.match(extraSpacesRemoved, /everyone loves cute cats online!$/i);
 ```
 
 Dein `p`-Element sollte unter dem `h2`-Element stehen. Sie sind in falscher Reihenfolge.
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
index 0b60e7101f..cd56dd90d3 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
@@ -49,12 +49,9 @@ assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/i));
 Dein Kommentar sollte über dem `p`-Element sein. Sie sind in falscher Reihenfolge.
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
-    )
+assert.match(
+  code.replace(/\s/g, ''),
+  /<!--todo:addlinktocatphotos--><p>everyonelovescutecatsonline!<\/p>/i
 );
 ```
 
@@ -69,7 +66,7 @@ assert(
     <h2>Cat Photos</h2>
 --fcc-editable-region--
 
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
index 3609684699..c8242bf9e1 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -55,10 +55,8 @@ Der schließende Tag deines `main`-Elements sollte unter dem `p` Element sein. S
 ```js
 const mainNode = document.querySelector('main');
 const pNode = document.querySelector('p');
-assert(
-  mainNode.contains(pNode) &&
-    pNode.textContent.toLowerCase().match(/see more cat photos in our gallery/)
-);
+assert.isTrue(mainNode.contains(pNode));
+assert.match(pNode.textContent.toLowerCase(), /everyone loves cute cats online!/);
 ```
 
 # --seed--
@@ -73,7 +71,7 @@ assert(
     <h1>CatPhotoApp</h1>
     <h2>Cat Photos</h2>
     <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 65fcb58169..58f7a8e8e9 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -74,14 +74,14 @@ Dein Code sollte ein `p`-Element beinhalten. Du hast das `p`-Element aus einem v
 assert(document.querySelector('p'));
 ```
 
-Der Text deines `p`-Elements sollte `See more cat photos in our gallery.` sein. Ändere den Text, die Einrückung oder die Satzzeichen des `p`-Elements nicht.
+The text of the `p` element should be `Everyone loves cute cats online!` Do not change the text, spacing, or punctuation of the `p` element.
 
 ```js
-assert(
+assert.match(
   document
     .querySelector('p')
-    .innerText.toLowerCase()
-    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
+    .innerText.toLowerCase(),
+    /everyone\s+loves\s+cute\s+cats\s+online!$/
 );
 ```
 
@@ -98,12 +98,12 @@ assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
     </main>
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 70a9b1ec26..f852961039 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -52,7 +52,7 @@ assert(collection.indexOf('P') < collection.indexOf('IMG'));
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
     </main>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
index 16b3edd41e..62bf4f247f 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
@@ -36,19 +36,19 @@ assert(document.querySelector('img').src);
 Das `src`-Attribut deines `img`-Elements sollte auf '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`' gesetzt sein. Du hast entweder die URL weggelassen oder einen Tippfehler gemacht. Die Groß- und Kleinschreibung der URL ist wichtig.
 
 ```js
-assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
+assert.strictEqual(document.querySelector('img').src, 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
 ```
 
 Obwohl du die `src` des `img`-Elements auf die richtige URL gesetzt hast, wird empfohlen, die Werte eines Attributs immer zwischen Anführungszeichen zu schreiben.
 
 ```js
-assert(!/\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/);
 ```
 
 Deine `img`-Element sollte entweder mit `>` oder `/>` geschlossen werden.
 
 ```js
-assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\1\s*\/?>/.test(code));
+assert.match(code, /<img\s+src\s*=\s*("|')\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\s*\1\s*\/?>/);
 ```
 
 # --seed--
@@ -62,7 +62,7 @@ assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img>
 --fcc-editable-region--
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
index fe1de72c1e..be2239c7d1 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
@@ -54,7 +54,7 @@ assert(altText.match(/A cute orange cat lying on its back\.?$/i));
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
 --fcc-editable-region--
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index 341f1bd049..2a7e471c8c 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -75,7 +75,7 @@ assert(
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index cb492d1b3c..fd7847c7c4 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -15,7 +15,7 @@ Hier ist ein Beispiel für einen Link mit dem Text `click here to go to freeCode
 <a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>
 ```
 
-Füge den Ankertext `link to cat pictures` zum Ankerelement hinzu. Dies wird der Text deines Links sein.
+Add the anchor text `cat photos` to the anchor element. Dies wird der Text deines Links sein.
 
 # --hints--
 
@@ -31,12 +31,12 @@ Dein (`a`) Ankerelement sollte ein schließendes Tag haben. Schließende Tags ha
 assert(code.match(/<\/a\>/));
 ```
 
-Der Text deines Ankerelements (`a`) sollte `link to cat pictures`. Stelle sicher, dass der Linktext des (`a`)-Ankerelements zwischen dem öffnenden und schließenden Tag ist.
+Your anchor (`a`) element's text should be `cat photos`. Stelle sicher, dass der Linktext des (`a`)-Ankerelements zwischen dem öffnenden und schließenden Tag ist.
 
 ```js
-assert(
-  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
-    'link to cat pictures'
+assert.strictEqual(
+  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' '),
+    'cat photos'
 );
 ```
 
@@ -51,7 +51,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <a href="https://freecatphotoapp.com"></a>
 --fcc-editable-region--
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
index 2c50e6f67f..56f2f7c77a 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa2407b521be39a3de7be1
-title: Schritt 14
+title: Step 15
 challengeType: 0
-dashedName: step-14
+dashedName: step-15
 ---
 
 # --description--
@@ -25,22 +25,20 @@ Dein `p`-Element sollte einen verschachtelten Anker (`a`) Element mit dem Text `
 
 ```js
 const anchor = document.querySelectorAll('p > a');
-assert(
-  anchor.length &&
-    anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+assert.isNotEmpty(anchor);
+assert.strictEqual(anchor[1]?.innerText?.toLowerCase().replace(/\s+/g, ' '), 'cat photos')
 ```
 
 Dein (`a`)-Ankerelement hat kein `target`-Attribut. Überprüfe, ob nach dem Namen des öffnenden Tags ein Leerzeichen steht und/oder ob vor allen Attributnamen Leerzeichen stehen.
 
 ```js
-assert(document.querySelector('a').hasAttribute('target'));
+assert.isTrue(document.querySelectorAll('a')[1]?.hasAttribute('target'));
 ```
 
 Der Wert des `target`-Attributs sollte `_blank` sein. Du hast entweder den Wert weggelassen oder einen Tippfehler gemacht. Denke daran, dass Attributwerte zwischen Anführungszeichen geschrieben werden sollten.
 
 ```js
-assert(document.querySelector('a').getAttribute('target') === '_blank');
+assert.strictEqual(document.querySelectorAll('a')[1]?.getAttribute('target'), '_blank');
 ```
 
 # --seed--
@@ -54,6 +52,7 @@ assert(document.querySelector('a').getAttribute('target') === '_blank');
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
 --fcc-editable-region--
       <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
index 5372b3f9ac..690dd185fc 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa30b9eacea3f48c6300ad
-title: Schritt 15
+title: Step 17
 challengeType: 0
-dashedName: step-15
+dashedName: step-17
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert(document.querySelectorAll('a').length >= 2);
 Dir fehlt ein schließender (`a`)-Tag nach dem Bild.
 
 ```js
-assert(document.querySelectorAll('a').length === 2);
+assert.lengthOf(document.querySelectorAll('a'), 3);
 ```
 
 Dein (`a`)-Element sollte ein schließendes Tag haben. Schließende Tags haben ein `/` direkt nach dem `<`-Zeichen.
@@ -52,7 +52,7 @@ assert(code.match(/<\/a>/g).length >= 2);
 Du solltest nur ein schließendes (`a`)-Ankertag hinzufügen. Entferne alle zusätzlichen.
 
 ```js
-assert(code.match(/<\/a>/g).length === 2);
+assert.lengthOf(code.match(/<\/a>/g), 3);
 ```
 
 Dein (`a`)-Element hat kein `href`-Attribut. Überprüfe, ob ein Leerzeichen nach dem Namen des öffnenden Tags und/oder Leerzeichen vor allen Attributnamen vorhanden sind.
@@ -86,7 +86,7 @@ assert(document.querySelector('img').parentNode.nodeName === 'A');
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
index bf0ca47f04..937b48d823 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa3589eacea3f48c6300ae
-title: Schritt 18
+title: Step 20
 challengeType: 0
-dashedName: step-18
+dashedName: step-20
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
index 891b3e3844..d5d3b16813 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa371beacea3f48c6300af
-title: Schritt 19
+title: Step 21
 challengeType: 0
-dashedName: step-19
+dashedName: step-21
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index 6217ac71f1..ed428d3d83 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa37b9eacea3f48c6300b0
-title: Schritt 20
+title: Step 22
 challengeType: 0
-dashedName: step-20
+dashedName: step-22
 ---
 
 # --description--
@@ -43,7 +43,7 @@ assert.equal(secondSectionLastElemNode?.nodeName , 'UL');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
index 01569e46d4..26303b37b9 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb5ecbeacea3f48c6300b1
-title: Schritt 21
+title: Step 23
 challengeType: 0
-dashedName: step-21
+dashedName: step-23
 ---
 
 # --description--
@@ -63,7 +63,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
index 10d2bb43a4..c6dc0e052a 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6250eacea3f48c6300b2
-title: Schritt 22
+title: Step 24
 challengeType: 0
-dashedName: step-22
+dashedName: step-24
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert.isTrue(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curricu
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
index c8e9c82a40..034636bd0f 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb655eeacea3f48c6300b3
-title: Schritt 23
+title: Step 25
 challengeType: 0
-dashedName: step-23
+dashedName: step-25
 ---
 
 # --description--
@@ -34,11 +34,7 @@ assert.equal(document.querySelectorAll('section')?.[1]?.lastElementChild?.nodeNa
 Das Lasagne-`img`-Element sollte innerhalb des `figure`-Elements eingebettet sein.
 
 ```js
-assert(
-  document.querySelector('figure > img') &&
-    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
-      'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
-);
+assert.strictEqual(document.querySelector('figure > img')?.src.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg');
 ```
 
 # --seed--
@@ -52,7 +48,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
index 1047d766ea..db6cee6167 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6a35eacea3f48c6300b4
-title: Schritt 24
+title: Step 26
 challengeType: 0
-dashedName: step-24
+dashedName: step-26
 ---
 
 # --description--
@@ -82,7 +82,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
index 87a20ed305..277612246d 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d0
-title: Schritt 25
+title: Step 27
 challengeType: 0
-dashedName: step-25
+dashedName: step-27
 ---
 
 # --description--
@@ -61,7 +61,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
index 2224ae009a..1748684ca0 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d1
-title: Step 26
+title: Step 28
 challengeType: 0
-dashedName: step-26
+dashedName: step-28
 ---
 
 # --description--
@@ -55,7 +55,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
index a8ae74cade..2d3a058d17 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d2
-title: Schritt 27
+title: Step 29
 challengeType: 0
-dashedName: step-27
+dashedName: step-29
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert([...document.querySelectorAll('ol')].length == 1);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
index 32ab2b245d..b704bb27d1 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d3
-title: Schritt 28
+title: Step 30
 challengeType: 0
-dashedName: step-28
+dashedName: step-30
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert.equal(document.querySelectorAll('main > section')?.[1]?.lastElementChild?
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
index 2747cb2a6d..51f033bc79 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d4
-title: Schritt 32
+title: Step 34
 challengeType: 0
-dashedName: step-32
+dashedName: step-34
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
index 6f48ef7e4a..c73ab8f9a2 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d5
-title: Schritt 34
+title: Step 36
 challengeType: 0
-dashedName: step-34
+dashedName: step-36
 ---
 
 # --description--
@@ -67,7 +67,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
index bc6ea9823e..36b91bce21 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d6
-title: Schritt 35
+title: Step 37
 challengeType: 0
-dashedName: step-35
+dashedName: step-37
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
index b69d994ba4..9e2f295926 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d7
-title: Schritt 36
+title: Step 38
 challengeType: 0
-dashedName: step-36
+dashedName: step-38
 ---
 
 # --description--
@@ -83,7 +83,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
index 508f6089a8..3ec16e5391 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d8
-title: Schritt 37
+title: Step 39
 challengeType: 0
-dashedName: step-37
+dashedName: step-39
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.isTrue(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
index a152aec7f3..2b41410893 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d9
-title: Schritt 40
+title: Step 42
 challengeType: 0
-dashedName: step-40
+dashedName: step-42
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
index 631a56b429..fe2767eccf 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804da
-title: Schritt 42
+title: Step 44
 challengeType: 0
-dashedName: step-42
+dashedName: step-44
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
index 56cc34050b..9e518081ee 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804db
-title: Schritt 41
+title: Step 43
 challengeType: 0
-dashedName: step-41
+dashedName: step-43
 ---
 
 # --description--
@@ -49,7 +49,7 @@ assert.strictEqual(document.querySelector('input')?.getAttribute('required'), ''
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
index e5a3af42cf..d8b289eba1 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dc
-title: Schritt 44
+title: Step 46
 challengeType: 0
-dashedName: step-44
+dashedName: step-46
 ---
 
 # --description--
@@ -107,7 +107,7 @@ assert.match(radioInputElem?.nextSibling?.nodeValue?.replace(/\s+/g, ' '), /\s*I
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
index cf1bc0397f..bc8a2ffc02 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dd
-title: Schritt 45
+title: Step 47
 challengeType: 0
-dashedName: step-45
+dashedName: step-47
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
index bb8cda8c50..4befaa4c33 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804de
-title: Schritt 48
+title: Step 50
 challengeType: 0
-dashedName: step-48
+dashedName: step-50
 ---
 
 # --description--
@@ -68,9 +68,10 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
index 88aeb31558..ab5753061e 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804df
-title: Schritt 46
+title: Step 48
 challengeType: 0
-dashedName: step-46
+dashedName: step-48
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert.match(document.querySelector('input')?.id, /^indoor$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
index 60f1a75b45..c5ff385d83 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e1
-title: Schritt 50
+title: Step 52
 challengeType: 0
-dashedName: step-50
+dashedName: step-52
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
index ebd8e0ff61..5f87fea687 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e2
-title: Schritt 54
+title: Step 56
 challengeType: 0
-dashedName: step-54
+dashedName: step-56
 ---
 
 # --description--
@@ -76,7 +76,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
index 6c9c9ce30e..a9269c0c1e 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e3
-title: Schitt 58
+title: Step 60
 challengeType: 0
-dashedName: step-58
+dashedName: step-60
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
index b602d40d5f..95d9d556ac 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e5
-title: Schritt 61
+title: Step 63
 challengeType: 0
-dashedName: step-61
+dashedName: step-63
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.isFalse(document.querySelectorAll('input[type="checkbox"]')?.[2]?.hasAttr
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
index 7f8ab980d9..06457dfc03 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e7
-title: Schitt 62
+title: Step 64
 challengeType: 0
-dashedName: step-62
+dashedName: step-64
 ---
 
 # --description--
@@ -48,7 +48,7 @@ assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
index cd292ae23b..4d0d00521e 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e8
-title: Schritt 63
+title: Step 65
 challengeType: 0
-dashedName: step-63
+dashedName: step-65
 ---
 
 # --description--
@@ -23,11 +23,11 @@ Dein `footer`-Element sollte ein `p`-Element haben. Stelle sicher, dass du ein 
 assert(document.querySelector('footer > p'));
 ```
 
-Dein `footer`-Element sollte ein schließendes Tag haben. Abschließende Tags enthalten ein `/` direkt nach dem `<`-Zeichen.
+Your `p` element should have a closing tag. Abschließende Tags enthalten ein `/` direkt nach dem `<`-Zeichen.
 
 ```js
 const pElemClosingTags = code.match(/<\/p\>/g);
-assert(pElemClosingTags && pElemClosingTags.length === 2);
+assert.lengthOf(pElemClosingTags, 3);
 ```
 
 Der Text deines `p`-Elements sollte `No Copyright - freeCodeCamp.org` sein. Du hast entweder den Text weggelassen, einen Tippfehler gemacht oder es befindet sich nicht zwischen den öffnenden und schließenden Tags des `p`-Elements.
@@ -48,7 +48,7 @@ assert.match(extraSpacesRemoved, /No Copyright - freeCodeCamp\.org$/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
index 1057d511c9..9e1fafbde9 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e9
-title: Schitt 64
+title: Step 66
 challengeType: 0
-dashedName: step-64
+dashedName: step-66
 ---
 
 # --description--
@@ -21,7 +21,7 @@ Dein (`a`)-Element sollte ein schließendes Tag haben. Abschließende Tags haben
 
 ```js
 const aElemClosingTags = code.match(/<\/a\>/g);
-assert(aElemClosingTags && aElemClosingTags.length === 3);
+assert.lengthOf(aElemClosingTags, 4);
 ```
 
 Dein (`a`)-Ankerelement sollte ein `href`-Attribut mit dem Wert `https://www.freecodecamp.org` haben. Möglicherweise hast du das Attribut/den Wert weggelassen oder einen Tippfehler gemacht.
@@ -59,7 +59,7 @@ assert.match(pText, /^no copyright - freecodecamp.org$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
index af6c5cc1e4..d136fe8979 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ea
-title: Schitt 65
+title: Step 67
 challengeType: 0
-dashedName: step-65
+dashedName: step-67
 ---
 
 # --description--
@@ -54,7 +54,7 @@ assert(noSpaces.match(/\<\/head\>\<body\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
index 79d80e3d46..838d1eaebd 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804eb
-title: Schritt 66
+title: Step 68
 challengeType: 0
-dashedName: step-66
+dashedName: step-68
 ---
 
 # --description--
@@ -56,7 +56,7 @@ assert(document.title && document.title.toLowerCase() === 'catphotoapp');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
index ff23b2692a..fc9e718ba1 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ec
-title: Schritt 67
+title: Step 69
 challengeType: 0
-dashedName: step-67
+dashedName: step-69
 ---
 
 # --description--
@@ -44,7 +44,7 @@ assert(extraSpacesRemoved.match(/\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
index d6752b768b..6b3c64a55b 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ee
-title: Schritt 68
+title: Step 70
 challengeType: 0
-dashedName: step-68
+dashedName: step-70
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\<html/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
index 4dc6964648..b25eb4277d 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
@@ -1,8 +1,8 @@
 ---
 id: 5efada803cbd2bbdab94e332
-title: Schritt 29
+title: Step 31
 challengeType: 0
-dashedName: step-29
+dashedName: step-31
 ---
 
 # --description--
@@ -42,16 +42,15 @@ Beim dritten Bild sollte das `src` Attribut auf `https://cdn.freecodecamp.org/cu
 
 ```js
 const catsImg = document.querySelectorAll('figure > img')[1];
-assert(
-  catsImg &&
-    catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
+assert.strictEqual(
+  catsImg?.src?.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
 );
 ```
 
 Obwohl du den `src` des neuen Bilds auf die richtige URL gesetzt hast, wird empfohlen, den Wert immer zwischen Anführungszeichen anzugeben.
 
 ```js
-assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/);
 ```
 
 # --seed--
@@ -65,7 +64,7 @@ assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/ca
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
index 8e08c2ec07..f8dbadcb19 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae0543cbd2bbdab94e333
-title: Schritt 30
+title: Step 32
 challengeType: 0
-dashedName: step-30
+dashedName: step-32
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
index 818da66189..b19b36cb2a 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae16e3cbd2bbdab94e334
-title: Schritt 31
+title: Step 33
 challengeType: 0
-dashedName: step-31
+dashedName: step-33
 ---
 
 # --description--
@@ -88,7 +88,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
index 46f471d4e1..883b3eaa2a 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb23e70dc218d6c85f89b1
-title: Schritt 38
+title: Step 40
 challengeType: 0
-dashedName: step-38
+dashedName: step-40
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(!/\<input\s+type\s*=\s*text/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
index e445023224..949956a6e9 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb2c990dc218d6c85f89b2
-title: Schritt 43
+title: Step 45
 challengeType: 0
-dashedName: step-43
+dashedName: step-45
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
index 59c9b9f68e..7291adfa9d 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc4f528d6a74d05e68af74
-title: Schritt 56
+title: Step 58
 challengeType: 0
-dashedName: step-56
+dashedName: step-58
 ---
 
 # --description--
@@ -110,7 +110,7 @@ assert.match(code, />\s+<label\s+for\s*=\s*('|")loving/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
index 9bbc19a83b..cb28dd2a03 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc518e8d6a74d05e68af75
-title: Schritt 57
+title: Step 59
 challengeType: 0
-dashedName: step-57
+dashedName: step-59
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
index 6ad8d76a7c..5bc286f142 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc54138d6a74d05e68af76
-title: Schritt 55
+title: Step 57
 challengeType: 0
-dashedName: step-55
+dashedName: step-57
 ---
 
 # --description--
@@ -34,7 +34,7 @@ assert.match(document.querySelector('input[type="checkbox"]')?.id, /^loving$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
index 965472d1a2..efefb6fb68 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc575c8d6a74d05e68af77
-title: Schritt 59
+title: Step 61
 challengeType: 0
-dashedName: step-59
+dashedName: step-61
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
index 0960dd8015..795e7bff6f 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5f05a1d8e233dff4a68508d8
-title: Schritt 47
+title: Step 49
 challengeType: 0
-dashedName: step-47
+dashedName: step-49
 ---
 
 # --description--
@@ -92,7 +92,7 @@ assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
index 0a082d4bb0..f306ba44a9 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07be6ef7412fbad0c5626b
-title: Schritt 16
+title: Step 18
 challengeType: 0
-dashedName: step-16
+dashedName: step-18
 ---
 
 # --description--
@@ -40,14 +40,14 @@ Das ganze `section`-Element sollte sich zwischen dem öffnenden und schließende
 assert(document.querySelector('section').parentNode.nodeName === 'MAIN');
 ```
 
-Die vorhandenen `h2`, Kommentar, `p` und Anker (`a`) Elemente sollten zwischen dem öffnenden und schließenden Tag des `section`-Elements sein.
+The existing `h2`, comment, two `p` elements, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
 
 ```js
 const childrenOfSection = [...document.querySelector('section').childNodes];
 const foundElements = childrenOfSection.filter((child) => {
   return ['H2', 'A', 'P'].includes(child.nodeName);
 });
-assert(foundElements.length === 3);
+assert.lengthOf(foundElements, 4);
 ```
 
 Das `h1`-Element sollte nicht im `section`-Element verschachtelt werden.
@@ -65,12 +65,12 @@ assert.isFalse(includesH1);
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
 
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
       <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
index 8576f56302..989f82bee2 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07c98cdb9413cbd4b16750
-title: Schritt 17
+title: Step 19
 challengeType: 0
-dashedName: step-17
+dashedName: step-19
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(foundElems.length === 2);
 --fcc-editable-region--
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
index 701ed075ea..c4be05e28f 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07fb1579dc934717801375
-title: Schritt 33
+title: Step 35
 challengeType: 0
-dashedName: step-33
+dashedName: step-35
 ---
 
 # --description--
@@ -62,7 +62,7 @@ assert.lengthOf(document.querySelectorAll('main > section')?.[2]?.children, 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
index bb562f592c..0486bf7a3f 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d48e7b435f13ab6550051
-title: Schritt 51
+title: Step 53
 challengeType: 0
-dashedName: step-51
+dashedName: step-53
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
index 5ea99ab474..672ba89c35 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4ab1b435f13ab6550052
-title: Schritt 52
+title: Step 54
 challengeType: 0
-dashedName: step-52
+dashedName: step-54
 ---
 
 # --description--
@@ -79,7 +79,7 @@ assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
index 48fdf0355c..81b6a91fd9 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4d04b435f13ab6550053
-title: Schritt 53
+title: Step 55
 challengeType: 0
-dashedName: step-53
+dashedName: step-55
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
index 301ff6e311..82c6f4ca50 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a80975fc4bcae0edb3497
-title: Schritt 49
+title: Step 51
 challengeType: 0
-dashedName: step-49
+dashedName: step-51
 ---
 
 # --description--
@@ -64,9 +64,10 @@ assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
index 05891b4af5..b908498b86 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a89f1190aff21ae42105a
-title: Schritt 60
+title: Step 62
 challengeType: 0
-dashedName: step-60
+dashedName: step-62
 ---
 
 # --description--
@@ -52,7 +52,7 @@ assert(energeticCheckbox.getAttribute('value').match(/^energetic$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
index adb928cc62..e17cbea4aa 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
@@ -1,8 +1,8 @@
 ---
 id: 62bb4009e3458a128ff57d5d
-title: Schritt 69
+title: Step 71
 challengeType: 0
-dashedName: step-69
+dashedName: step-71
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
@@ -127,7 +127,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
new file mode 100644
index 0000000000..aa057f8e17
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
@@ -0,0 +1,57 @@
+---
+id: 671141d8e32fe934c26fa1be
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Add the words `See more` before the anchor element and `in our gallery` after the anchor element
+
+# --hints--
+
+You should use the existing anchor element, do not create a new one.
+
+```js
+assert.lengthOf(document.querySelectorAll('a'), 1);
+```
+
+You should have the words `See more` before the anchor element.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a>/)
+```
+
+You should have the words `in our gallery` after the anchor element.
+
+```js
+assert.match(code, /<a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+You should have `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery` in your code.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <a href="https://freecatphotoapp.com">cat photos</a>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
new file mode 100644
index 0000000000..78aae1394e
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
@@ -0,0 +1,48 @@
+---
+id: 671141f948cbab359e74cc93
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Add `p` tags to turn `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.` into a paragraph.
+
+# --hints--
+
+You should add a `p` element around `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.`.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P);
+assert.strictEqual(P.innerText, "See more cat photos in our gallery.");
+```
+
+You should still have the anchor element inside the new paragraph.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P.querySelector('a'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
new file mode 100644
index 0000000000..57b4139497
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -0,0 +1,57 @@
+---
+id: 671141feba228a35cefba82d
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Turn the text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+# --hints--
+
+There should be a new anchor element in the first `p` element.
+
+```js
+assert.exists(document.querySelector('p')?.querySelector('a'));
+```
+
+The anchor text should be `cute cats`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.innerText, "cute cats");
+```
+
+The `href` attrivute of the new anchor element should be `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.href, "https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg");
+```
+
+The text of the `p` element should still be `Everyone loves cute cats online!`.
+
+```js
+assert.strictEqual(document.querySelector('p')?.innerText, "Everyone loves cute cats online!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
new file mode 100644
index 0000000000..7256f63593
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
@@ -0,0 +1,47 @@
+---
+id: 671144cdcc01d73f7dd79dc9
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have added the link you can remove the comment.
+
+# --hints--
+
+There should not be any comment in your code.
+
+```js
+assert.notMatch(code, /<!--/);
+assert.notMatch(code, /-->/);
+```
+
+The text `TODO: Add link to cat photos` should not be present anymore.
+
+```js
+assert.notMatch(code, /TODO:?/i)
+assert.notMatch(code, /Add\s*link\s*to\s*cat\s*photos/i)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+--fcc-editable-region--
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
+      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
index 3245643ecf..358f7b0e91 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
@@ -1,8 +1,8 @@
 ---
 id: 7cf9b03d81a65668421804c3
-title: Schritt 39
+title: Step 41
 challengeType: 0
-dashedName: step-39
+dashedName: step-41
 ---
 
 # --description--
@@ -66,7 +66,7 @@ assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
index 8f74e8fceb..d03145830c 100644
--- a/curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
+++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
@@ -56,9 +56,29 @@ Rentals are usually stationary services, not something that stops.
 # --scene--
 
 ```json
-{ "setup": { "background": "company2-center.png", "characters": [
-      { "character": "Maria", "position": {"x":50,"y":0,"z":1.5}, "opacity": 0 } ], "audio": { "filename": "1.3-5.mp3", "startTime": 1, "startTimestamp": 37.92, "finishTimestamp": 42.38 } }, "commands": [
-    { "character": "Maria", "opacity": 1, "startTime": 0 },
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {"x":50,"y":0,"z":1.5},
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "1.3-5.mp3",
+      "startTime": 1,
+      "startTimestamp": 37.92,
+      "finishTimestamp": 42.38
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
     {
       "character": "Maria",
       "startTime": 1,
@@ -73,4 +93,6 @@ Rentals are usually stationary services, not something that stops.
       "opacity": 0,
       "startTime": 5.96
     }
-  ] }
+  ]
+}
+```
diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
index d4e08d4892..b7c5edd310 100644
--- a/curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
+++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
@@ -39,9 +39,29 @@ Refers to the act of being introduced to someone for the first time.
 # --scene--
 
 ```json
-{ "setup": { "background": "company1-boardroom.png", "characters": [
-      { "character": "David", "position": {"x":50,"y":0,"z":1.4}, "opacity": 0 } ], "audio": { "filename": "1.2-5.mp3", "startTime": 1, "startTimestamp": 27.38, "finishTimestamp": 29.06 } }, "commands": [
-    { "character": "David", "opacity": 1, "startTime": 0 },
+{
+  "setup": {
+    "background": "company1-boardroom.png",
+    "characters": [
+      {
+        "character": "David",
+        "position": {"x":50,"y":0,"z":1.4},
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "1.2-5.mp3",
+      "startTime": 1,
+      "startTimestamp": 27.38,
+      "finishTimestamp": 29.06
+    }
+  },
+  "commands": [
+    {
+      "character": "David",
+      "opacity": 1,
+      "startTime": 0
+    },
     {
       "character": "David",
       "startTime": 1,
@@ -56,4 +76,6 @@ Refers to the act of being introduced to someone for the first time.
       "opacity": 0,
       "startTime": 3.18
     }
-  ] }
+  ]
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md b/curriculum/challenges/german/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
index e20e552f62..0a780050f2 100644
--- a/curriculum/challenges/german/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
+++ b/curriculum/challenges/german/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
@@ -24,13 +24,13 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 # --hints--
 
-You should define a funtion named `maskEmail`.
+You should define a function named `maskEmail`.
 
 ```js
 assert.isFunction(maskEmail);
 ```
 
-The `maskEmail` funtion should take a string, `email` as an argument.
+The `maskEmail` function should take a string, `email` as an argument.
 
 ```js
 assert.match(maskEmail.toString(), /\s*maskEmail\(\s*\w+\s*\)/);
diff --git a/curriculum/challenges/german/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md b/curriculum/challenges/german/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
index cefbcfd944..6ebd40d2b4 100644
--- a/curriculum/challenges/german/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
+++ b/curriculum/challenges/german/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
@@ -15,7 +15,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 1. Define a function called `isLeapYear` that takes a number as an argument.
 2. Outside the function, declare a variable `year` that stores the value of the year you want to check.
-3. Inside the funtion, use an `if/ else` statement or a ternary operator to check if the year is a leap year.
+3. Inside the function, use an `if/ else` statement or a ternary operator to check if the year is a leap year.
 4. To check if the year is a leap year, fulfill the following conditions:
 
    - If the year is divisible by `4`, then it is a leap year.
@@ -34,7 +34,7 @@ You should define a function named `isLeapYear`.
 assert(typeof isLeapYear === 'function');
 ```
 
-The `isLeapYear` funtion should take a number as an argument.
+The `isLeapYear` function should take a number as an argument.
 
 ```js
 assert.match(isLeapYear.toString(), /\s*isLeapYear\(\s*\w+\s*\)/);
diff --git a/curriculum/challenges/german/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md b/curriculum/challenges/german/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
index 1f7478c43e..68eb026956 100644
--- a/curriculum/challenges/german/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
+++ b/curriculum/challenges/german/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
@@ -343,7 +343,7 @@ assert(usesFlex || usesFlexMedia)
                     <div class="desc">
                         <h2>Fast Shipping</h2>
                         <p>
-                            We make sure you recieve your trombone as soon as we have
+                            We make sure you receive your trombone as soon as we have
                             finished making it. We also provide free returns if you are not
                             satisfied.
                         </p>
diff --git a/curriculum/challenges/german/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md b/curriculum/challenges/german/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
index 303106b065..060300a99a 100644
--- a/curriculum/challenges/german/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
+++ b/curriculum/challenges/german/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
@@ -248,7 +248,7 @@ for (let anchor of anchors) {
         <h1>Discover Italy</h1>
         <p>Art, folklore, food, nature, and more. Choose among our wide selection of guided tours and excursions, and live an unforgettable experience exploring Italy.</p>
         <h2>Packages</h2>
-        <p>We offer an extensive range of holiday solutions to accomodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
+        <p>We offer an extensive range of holiday solutions to accommodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
         <ul>
             <li><a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li>
             <li><a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</a></li>
diff --git a/curriculum/challenges/german/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md b/curriculum/challenges/german/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
index 38a6679f2a..2e60b00e90 100644
--- a/curriculum/challenges/german/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
+++ b/curriculum/challenges/german/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
@@ -278,7 +278,7 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
           </li>
           <li>
             <strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat
-            with a high-yeidling American breed, creating a strain that responds
+            with a high-yielding American breed, creating a strain that responds
             well to fertilizer. It goes on to provide 95% of Mexico's wheat.
           </li>
           <li>
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
new file mode 100644
index 0000000000..6ced83e0fe
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
@@ -0,0 +1,121 @@
+---
+id: 670803abcb3e980233da4768
+title: What Are Divs and Spans, and When Should You Use Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-divs-and-spans
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What type of element is a `div` element?
+
+## --answers--
+
+An inline-level element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+An inline-block element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+A block-inline element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+A block-level element.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What kind of an element is a `span` element?
+
+## --answers--
+
+An inline-level element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+---
+
+An inline element.
+
+---
+
+A block element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+---
+
+A block-level element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What should you group using a `div` element?
+
+## --answers--
+
+Block-level content and larger sections.
+
+---
+
+Inline texts and smaller sections.
+
+### --feedback--
+
+Think about related and larger content.
+
+---
+
+The whole HTML content.
+
+### --feedback--
+
+Think about related and larger content.
+
+---
+
+A small chuck of text.
+
+### --feedback--
+
+Think about related and larger content.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
new file mode 100644
index 0000000000..6c660565a2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
@@ -0,0 +1,121 @@
+---
+id: 6708143cab2b583ecd3324f5
+title: What Are Attributes, and How Do They Work?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-attributes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of these best describes a boolean attribute?
+
+## --answers--
+
+They always require a value.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+---
+
+They add JavaScript functionality to your code.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+---
+
+Their presence implies true.
+
+---
+
+They are not different from regular attributes.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What do regular attributes do in HTML?
+
+## --answers--
+
+They provide additional information about an element.
+
+---
+
+They provide the background information about an element.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+---
+
+They are replacements for HTML elements.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+---
+
+They allow developers to toggle a feature on and off.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of these differentiates a boolean attribute from a regular attribute?
+
+## --answers--
+
+A boolean attribute is true and a regular attribute is false.
+
+---
+
+A boolean attribute requires a value but a regular attribute does not.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+---
+
+A boolean attribute provides additional information about an element but a regular attribute does not.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+---
+
+A boolean attribute does not require a value but a regular attribute does.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
new file mode 100644
index 0000000000..4007ac4197
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
@@ -0,0 +1,125 @@
+---
+id: 6708382cf088b216580a9ff1
+title: What Are IDs and Classes, and When Should You Use Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-ids-and-classes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+When should you use an `id` versus a `class`?
+
+## --answers--
+
+Use a `class` when you want a unique identifier that should only apply to one element.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Use an `id` when you need a unique identifier for a specific element, and use a `class` when you want to apply styles or behavior to multiple elements.
+
+---
+
+Use an `id` when you want to style multiple elements consistently across different parts of your webpage.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Use an `id` when you want to apply styles that can be easily overridden by other styles in your CSS.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What happens if you try to use duplicate an `id` in your HTML?
+
+## --answers--
+
+It can lead to unwanted results and issues when trying to apply styles or targeting an element in JavaScript.
+
+---
+
+The program will crash.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Nothing will happen.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+There will be a popup alert message in the browser window.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of the following is NOT a correct value for the `id` attribute?
+
+## --answers--
+
+`id="heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main-heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
new file mode 100644
index 0000000000..3ea5a03c99
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
@@ -0,0 +1,121 @@
+---
+id: 67083868d5fdcb17bf8c14bd
+title: What Are HTML Entities, and What Are Some Common Examples?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-html-entities
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is an HTML entity (character reference)?
+
+## --answers--
+
+A set of Google fonts.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A group of images and captions.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A set of characters used to represent JavaScript code.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A set of characters used to represent a reserved character in HTML.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What are the three types of character references?
+
+## --answers--
+
+Named, Roman and Hexadecimal numeric character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+---
+
+Octal, Named and Binary character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+---
+
+Named, Decimal numeric, and Hexadecimal numeric character references.
+
+---
+
+Asymmetric, Decimal numeric, and Hexadecimal numeric character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which of the following is the correct syntax for a named character reference?
+
+## --answers--
+
+`&amp;`
+
+---
+
+`;amp;`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+---
+
+`&amp>>`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+---
+
+`&amp&`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
new file mode 100644
index 0000000000..7412866fc7
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
@@ -0,0 +1,121 @@
+---
+id: 670838977810401844af6fe0
+title: What Is the Role of the Link Element in HTML, and How Can It Be Used to Link to External Stylesheets?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-link-element-in-html
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the role of the `link` element in HTML?
+
+## --answers--
+
+It specifies the content type of the linked resource.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It determines the visibility of the linked resource on the webpage.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It defines the font size of the linked resource when displayed.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It is used to link to external resources like stylesheets and site icons.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is the role of the `rel` attribute inside the `link` element?
+
+## --answers--
+
+It is used to indicate the language of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+---
+
+It is used to specify the relationship between the linked resource and the HTML document.
+
+---
+
+It is used to define the media type of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+---
+
+It is used to determine the size of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What is a favicon?
+
+## --answers--
+
+A type of JavaScript file used to enhance website functionality.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+---
+
+A type of font used to style text on a website.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+---
+
+A small icon typically displayed in the browser tab next to the site title.
+
+---
+
+A security feature used to prevent cross-site scripting attacks.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
new file mode 100644
index 0000000000..85b77abd45
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
@@ -0,0 +1,121 @@
+---
+id: 670838b10ee87a18e5faff62
+title: What Is the Role of the Script Element in HTML, and How Can It Be Used to Link to External JavaScript Files?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-script-element-in-html
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which attribute is used to link to an external JavaScript file?
+
+## --answers--
+
+The `div` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location/
+
+---
+
+The `defer` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location.
+
+---
+
+The `async` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location.
+
+---
+
+The `src` attribute.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is separation of concerns?
+
+## --answers--
+
+It's about making sure everyone on the team has their own clear responsibilities.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+---
+
+A design principle where you separate your programs into distinct sections and have each section address a separate concern.
+
+---
+
+The act of combining all aspects of a program into a single module for simplicity.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+---
+
+It involves dividing up tasks among team members without considering how they might overlap or affect each other.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which of the following is the correct syntax for linking to an external JavaScript file?
+
+## --answers--
+
+`<script div="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+---
+
+`<script alt="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+---
+
+`<script src="path-to-javascript-file.js"></script>`
+
+---
+
+`<script defer="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
new file mode 100644
index 0000000000..dd0270925c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
@@ -0,0 +1,121 @@
+---
+id: 670838e914096b194b0c51aa
+title: What Is an HTML Boilerplate, and Why Is It Important?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-an-html-boilerplate
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Where would you set the character encoding for your page?
+
+## --answers--
+
+A `meta` element in the `body`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+---
+
+A `head` element in the `body`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+---
+
+A `meta` element in the `head`.
+
+---
+
+In the `DOCTYPE`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Where would you set the language for your page?
+
+## --answers--
+
+In the opening `html` tag.
+
+---
+
+A `meta` element in the `body`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+---
+
+A `head` element in the `body`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+---
+
+A `meta` element in the `head`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+## --video-solution--
+
+1
+
+## --text--
+
+What purpose does a boilerplate serve?
+
+## --answers--
+
+Provides a starting structure for your websites.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+Ensures you are not missing any essential elements.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+Allows you to get started writing the content of your page faster.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+All of the above.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
new file mode 100644
index 0000000000..57fce3537b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
@@ -0,0 +1,120 @@
+---
+id: 670839051794aa19fcef6dc8
+title: What Is UTF-8 Character Encoding and Why Is It Needed?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-utf-8-character-encoding
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+Which attribute is used to set the UTF-8 character encoding for HTML documents?
+
+## --answers--
+
+`pattern`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+---
+
+`content`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+---
+
+`charset`
+
+---
+
+`lang`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is character encoding?
+
+## --answers--
+
+A method computers use to store characters as data.
+
+---
+
+A way to compress text files.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+---
+
+It determines the font used to display text on a screen.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+---
+
+It refers to the process of converting spoken language into written text.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+## --video-solution--
+
+1
+
+## --text--
+
+How many bits are inside of a byte?
+
+## --answers--
+
+1
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+33
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+7
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+8
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
new file mode 100644
index 0000000000..96e393015a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
@@ -0,0 +1,121 @@
+---
+id: 67083952f800051a8a21fcfd
+title: What Is the Role of the Meta Description, and How Does It Affect SEO?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-meta-description
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which element is used to set the description for a web page?
+
+## --answers--
+
+`img`
+
+### --feedback--
+
+Look closely to the title of this video
+
+---
+
+`meta`
+
+---
+
+`slot`
+
+### --feedback--
+
+Look closely to the title of this video
+
+---
+
+`figure`
+
+### --feedback--
+
+Look closely to the title of this video
+
+## --video-solution--
+
+2
+
+## --text--
+
+What does SEO stand for?
+
+## --answers--
+
+Slot Engine Optimization
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Site Enhancement Outreach
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Social Engagement Optimization
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Search Engine Optimization
+
+## --video-solution--
+
+4
+
+## --text--
+
+Where does the page's description typically show up?
+
+## --answers--
+
+Inside the `figure` element.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+---
+
+Inside the `footer` element.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+---
+
+In the search engine results page.
+
+---
+
+In a popup alert message.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
new file mode 100644
index 0000000000..7977b8cc03
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
@@ -0,0 +1,121 @@
+---
+id: 6708396caa00e11b597b3365
+title: What Is the Role of Open Graph Tags, and How Do They Affect SEO?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-open-graph-tags
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What are open graph properties used for?
+
+## --answers--
+
+For embedding interactive multimedia content directly into web pages.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+---
+
+To set how your website's content will be seen on different social media platforms.
+
+---
+
+For generating dynamic pop-up advertisements on websites.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+---
+
+For encrypting sensitive data transmitted between web servers and users' browsers.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What does the `name="og:title"` do in the `meta` element?
+
+## --answers--
+
+It automatically adjusts the font size and style of the webpage title based on user preferences.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It directs the browser to display a specific emoticon or emoji as the title of the webpage.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It causes the webpage to play a specific audio file when the title is displayed in the browser tab.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It specifies the title of your web page content when it is shared on social media platforms.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What does the `property="og:type"` do in the `meta` element?
+
+## --answers--
+
+It selects the page's default font style.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+---
+
+It triggers a pop-up advertisement when the webpage is loaded.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+---
+
+It specifies the type of content used for your web page when it is shared on social media platforms.
+
+---
+
+It changes the webpage's background color based on the user's time zone.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/german/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/german/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
index 692385ab63..c833584c2d 100644
--- a/curriculum/challenges/german/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
+++ b/curriculum/challenges/german/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is asynchronous programming?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to execute code in a sequential order.
 
 ---
 
-Placeholder distractor 2
+A technique to handle errors in synchronous code.
 
 ---
 
-Placeholder distractor 3
+A way to guarantee task order.
 
 #### --answer--
 
-Placeholder answer
+A method to execute code concurrently without blocking the main thread.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `async` attribute do when used in a `<script>` tag?
 
 #### --distractors--
 
-Placeholder distractor 1
+It allows the script to be executed after the HTML document has been completely parsed.
 
 ---
 
-Placeholder distractor 2
+It ensures the script runs in a synchronous manner.
 
 ---
 
-Placeholder distractor 3
+It delays the script execution until the browser is idle.
 
 #### --answer--
 
-Placeholder answer
+The script is downloaded in parallel with parsing the page and executed as soon as it is available.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Fetch API in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manage asynchronous callbacks.
 
 ---
 
-Placeholder distractor 2
+To create and manage cookies.
 
 ---
 
-Placeholder distractor 3
+To render dynamic HTML content.
 
 #### --answer--
 
-Placeholder answer
+To make network requests to servers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which `HTTP` method is used to send data to a server for processing?
 
 #### --distractors--
 
-Placeholder distractor 1
+`GET`
 
 ---
 
-Placeholder distractor 2
+`DELETE`
 
 ---
 
-Placeholder distractor 3
+`HEAD`
 
 #### --answer--
 
-Placeholder answer
+`POST`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `res.json()` method do in Express.js?
 
 #### --distractors--
 
-Placeholder distractor 1
+It retrieves data from a JSON file.
 
 ---
 
-Placeholder distractor 2
+It parses a JSON string into a JavaScript object.
 
 ---
 
-Placeholder distractor 3
+It sends raw JSON as a response without any processing.
 
 #### --answer--
 
-Placeholder answer
+It converts a JavaScript object to a JSON string and sends it as a response.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a promise in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to synchronize multiple operations.
 
 ---
 
-Placeholder distractor 2
+A callback function that runs after an operation.
 
 ---
 
-Placeholder distractor 3
+A technique to handle errors in asynchronous code.
 
 #### --answer--
 
-Placeholder answer
+An object that represents the eventual completion (or failure) of an asynchronous operation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does promise chaining allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Execute multiple asynchronous operations in parallel.
 
 ---
 
-Placeholder distractor 2
+Handle synchronous operations more efficiently.
 
 ---
 
-Placeholder distractor 3
+Retry failed operations automatically.
 
 #### --answer--
 
-Placeholder answer
+Pass the result of one promise to the next.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle successful completion of a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.catch()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.then()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle errors in a promise chain?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.then()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.catch()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the use of the `.finally()` method in a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+It returns the result of the promise.
 
 ---
 
-Placeholder distractor 2
+It stops the execution of subsequent promise handlers.
 
 ---
 
-Placeholder distractor 3
+It retries the promise if it fails.
 
 #### --answer--
 
-Placeholder answer
+It executes code after a promise is fulfilled or rejected, regardless of the outcome.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the syntax for declaring an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+`function myFunction() {}`
 
 ---
 
-Placeholder distractor 2
+`function async myFunction() {}`
 
 ---
 
-Placeholder distractor 3
+`async {} => ()`
 
 #### --answer--
 
-Placeholder answer
+`async function myFunction() {}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `await` keyword do in an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+It creates a new promise.
 
 ---
 
-Placeholder distractor 2
+It executes code immediately without waiting.
 
 ---
 
-Placeholder distractor 3
+It returns the result of the promise.
 
 #### --answer--
 
-Placeholder answer
+It pauses the execution of the function until the promise is resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Geolocation API?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manipulate HTML elements.
 
 ---
 
-Placeholder distractor 2
+To create and manage map elements.
 
 ---
 
-Placeholder distractor 3
+To control the device's camera.
 
 #### --answer--
 
-Placeholder answer
+To retrieve the geographical location of a device.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method of the Geolocation API is used to get the current position of the device?
 
 #### --distractors--
 
-Placeholder distractor 1
+`getLocation()`
 
 ---
 
-Placeholder distractor 2
+`getPosition()`
 
 ---
 
-Placeholder distractor 3
+`getLatLong()`
 
 #### --answer--
 
-Placeholder answer
+`getCurrentPosition()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What parameters can be passed to the `getCurrentPosition()` method?
 
 #### --distractors--
 
-Placeholder distractor 1
+Only the success callback function.
 
 ---
 
-Placeholder distractor 2
+Only options.
 
 ---
 
-Placeholder distractor 3
+One the error callback function.
 
 #### --answer--
 
-Placeholder answer
+Success and error callback functions, along with options.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What will the following code return? `fetch('https://api.example.com/data')`
 
 #### --distractors--
 
-Placeholder distractor 1
+The JSON response directly.
 
 ---
 
-Placeholder distractor 2
+An error if the URL is not reachable.
 
 ---
 
-Placeholder distractor 3
+A synchronous response.
 
 #### --answer--
 
-Placeholder answer
+A `Promise` that resolves to a `Response` object
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default HTTP method for the Fetch API?
 
 #### --distractors--
 
-Placeholder distractor 1
+`POST`
 
 ---
 
-Placeholder distractor 2
+`PUT`
 
 ---
 
-Placeholder distractor 3
+`DELETE`
 
 #### --answer--
 
-Placeholder answer
+`GET`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `Promise.all()` method do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resolves a single promise.
 
 ---
 
-Placeholder distractor 2
+It rejects the first promise that fails.
 
 ---
 
-Placeholder distractor 3
+It runs all promises sequentially.
 
 #### --answer--
 
-Placeholder answer
+It executes multiple promises concurrently and returns the results when all are resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you handle multiple asynchronous operations using async/await?
 
 #### --distractors--
 
-Placeholder distractor 1
+You must always use `.then()` for each operation.
 
 ---
 
-Placeholder distractor 2
+You cannot handle multiple operations with async/await.
 
 ---
 
-Placeholder distractor 3
+You must use callback functions for all operations.
 
 #### --answer--
 
-Placeholder answer
+You can use `await` for each operation in sequence and put them inside an async function.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is true about the `fetch` API?
 
 #### --distractors--
 
-Placeholder distractor 1
+It can only handle `GET` requests.
 
 ---
 
-Placeholder distractor 2
+It requires a callback function for handling responses.
 
 ---
 
-Placeholder distractor 3
+It only works in synchronous code.
 
 #### --answer--
 
-Placeholder answer
+It is used to make HTTP requests to a server.
 
diff --git a/curriculum/challenges/german/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md b/curriculum/challenges/german/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
index b43c4043e7..b6812d1bbf 100644
--- a/curriculum/challenges/german/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
+++ b/curriculum/challenges/german/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
@@ -381,7 +381,7 @@ Gives animations to the page.
 
 ---
 
-Improves Search Emgine Optimiztion (SEO).
+Improves Search Emgine Optimization (SEO).
 
 #### --answer--
 
diff --git a/curriculum/challenges/german/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/german/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
index 80af1166b6..cac5b80e72 100644
--- a/curriculum/challenges/german/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
+++ b/curriculum/challenges/german/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What happens when there is too much content to fit in an element box?
 
 #### --distractors--
 
-Placeholder distractor 1
+Underflow
 
 ---
 
-Placeholder distractor 2
+Compression
 
 ---
 
-Placeholder distractor 3
+Padding
 
 #### --answer--
 
-Placeholder answer
+Overflow
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default behavior of CSS when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+Content is hidden
 
 ---
 
-Placeholder distractor 2
+Content is clipped
 
 ---
 
-Placeholder distractor 3
+Content is resized
 
 #### --answer--
 
-Placeholder answer
+Content is visible
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why does CSS typically avoid hiding content when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+To enhance page design by hiding irrelevant content
 
 ---
 
-Placeholder distractor 2
+To save memory and load pages faster
 
 ---
 
-Placeholder distractor 3
+To automatically fix broken layout issues
 
 #### --answer--
 
-Placeholder answer
+To prevent data loss and make issues noticeable
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you handle overflow in CSS to hide content or add scrollbars?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars
 
 ---
 
-Placeholder distractor 2
+Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars
 
 ---
 
-Placeholder distractor 3
+Use `overflow: none` to hide content and `overflow: show` to display scrollbars
 
 #### --answer--
 
-Placeholder answer
+Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you specify different scrolling behaviors for the x-axis and y-axis in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+By using `scroll-x` and `scroll-y` properties
 
 ---
 
-Placeholder distractor 2
+By using `overflow-x` and `overflow-y` separately in every case
 
 ---
 
-Placeholder distractor 3
+By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x`
 
 #### --answer--
 
-Placeholder answer
+By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform` CSS property allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Change the color and font style of an element
 
 ---
 
-Placeholder distractor 2
+Adjust the margin and padding of an element
 
 ---
 
-Placeholder distractor 3
+Modify the visibility and display of an element
 
 #### --answer--
 
-Placeholder answer
+Rotate, scale, skew, or translate an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform-box: fill-box` property do in an animation that rotates an element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resizes the element to fit the canvas during the transformation
 
 ---
 
-Placeholder distractor 2
+It changes the background of the element during transformation
 
 ---
 
-Placeholder distractor 3
+It sets the transform origin to the top-left corner of the element
 
 #### --answer--
 
-Placeholder answer
+It sets the transform origin to the center of the element's bounding box, allowing it to spin in place
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `transform-origin` property in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It controls the animation speed of transformed elements
 
 ---
 
-Placeholder distractor 2
+It defines the display type of transformed elements
 
 ---
 
-Placeholder distractor 3
+It sets the background of transformed elements
 
 #### --answer--
 
-Placeholder answer
+It specifies the point around which a transformation is applied to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does margin affect the size of an element in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Margin increases the actual size of the element's box
 
 ---
 
-Placeholder distractor 2
+Margin has no effect on the element's size or position
 
 ---
 
-Placeholder distractor 3
+Margin decreases the total area the element occupies on the page
 
 #### --answer--
 
-Placeholder answer
+Margin affects the total area an element occupies but is not part of the actual size of the box
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the content area of an element in CSS represent?
 
 #### --distractors--
 
-Placeholder distractor 1
+It defines the margins and padding around the element
 
 ---
 
-Placeholder distractor 2
+It specifies the border thickness of the element
 
 ---
 
-Placeholder distractor 3
+It controls the visibility of the element on the page
 
 #### --answer--
 
-Placeholder answer
+It contains the "real" content of the element, such as text, images, or videos
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the difference between `content-box` and `border-box` in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`content-box` includes padding and border, while `border-box` includes only content dimensions
 
 ---
 
-Placeholder distractor 2
+Both `content-box` and `border-box` include only the border dimensions
 
 ---
 
-Placeholder distractor 3
+`content-box` is used for 2D elements, while `border-box` is used for 3D elements
 
 #### --answer--
 
-Placeholder answer
+`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+To apply default styles to all elements for faster loading
 
 ---
 
-Placeholder distractor 2
+To minimize the size of CSS files by removing unused styles
 
 ---
 
-Placeholder distractor 3
+To optimize images and fonts for better performance
 
 #### --answer--
 
-Placeholder answer
+To remove default browser styling and create a consistent baseline for styling across different browsers
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What are the common types of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bootstrap Reset, Tailwind Reset, and Foundation Reset
 
 ---
 
-Placeholder distractor 2
+Simple Reset, Comprehensive Reset, and Adaptive Reset
 
 ---
 
-Placeholder distractor 3
+Minimal Reset, Advanced Reset, and Legacy Reset
 
 #### --answer--
 
-Placeholder answer
+Normalize.css, Eric Meyer's Reset, and HTML5 Reset
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `scale3d()` property value do in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It rotates an element in 3D space
 
 ---
 
-Placeholder distractor 2
+It skews an element on the x, y, and z axes
 
 ---
 
-Placeholder distractor 3
+It translates an element in 3D space
 
 #### --answer--
 
-Placeholder answer
+It scales an element along the x, y, and z axes
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the total width of an element calculated in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Total width = width + margin + padding + border
 
 ---
 
-Placeholder distractor 2
+Total width = width + margin + padding
 
 ---
 
-Placeholder distractor 3
+Total width = width + margin + border
 
 #### --answer--
 
-Placeholder answer
+Total width = width + left padding + right padding + left border + right border
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the filter property in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the layout of the element on the page
 
 ---
 
-Placeholder distractor 2
+It changes the background color and texture of an element
 
 ---
 
-Placeholder distractor 3
+It alters the size and position of an element
 
 #### --answer--
 
-Placeholder answer
+It applies visual effects like blur and saturation to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the `filter` property specified in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+As only a single function, where percentage values must be used
 
 ---
 
-Placeholder distractor 2
+As `block` or `inline`, with values expressed in pixels
 
 ---
 
-Placeholder distractor 3
+As `none` or multiple functions, but only percentage values are accepted
 
 #### --answer--
 
-Placeholder answer
+As `none` or one or more functions, where percentage values can also be expressed as decimals
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `contrast()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white
 
 ---
 
-Placeholder distractor 2
+Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it
 
 ---
 
-Placeholder distractor 3
+Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque
 
 #### --answer--
 
-Placeholder answer
+Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `hue-rotate()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the brightness of the input image based on degrees
 
 ---
 
-Placeholder distractor 2
+It rotates an element's size and position in the document
 
 ---
 
-Placeholder distractor 3
+It adjusts the saturation and contrast of the input image
 
 #### --answer--
 
-Placeholder answer
+It applies a hue rotation, where the `<angle>` value defines the degrees around the hue color circle
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens when two animated filters have different function list lengths in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+The shorter list's filters override the longer list's filters
 
 ---
 
-Placeholder distractor 2
+The filters are discarded and no animation is applied
 
 ---
 
-Placeholder distractor 3
+Only the first filter function in each list is animated
 
 #### --answer--
 
-Placeholder answer
+The longer list's missing equivalent filter functions are added to the shorter list using their initial values
 
diff --git a/curriculum/challenges/german/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md b/curriculum/challenges/german/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
index 2f36f50f71..698708ccfd 100644
--- a/curriculum/challenges/german/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
+++ b/curriculum/challenges/german/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+Which method is used to check if an `input` element's value satisfies the validation rules?
 
 #### --distractors--
 
-Placeholder distractor 1
+`validateInput()`
 
 ---
 
-Placeholder distractor 2
+`isValid()`
 
 ---
 
-Placeholder distractor 3
+`checkValue()`
 
 #### --answer--
 
-Placeholder answer
+`checkValidity()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if the `checkValidity()` method finds an invalid `input`?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is automatically submitted
 
 ---
 
-Placeholder distractor 2
+Nothing happens
 
 ---
 
-Placeholder distractor 3
+The `input` value is cleared
 
 #### --answer--
 
-Placeholder answer
+The browser displays a validation message
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to customize the message shown during validation failure?
 
 #### --distractors--
 
-Placeholder distractor 1
+`setErrorMessage()`
 
 ---
 
-Placeholder distractor 2
+`setValidationMessage()`
 
 ---
 
-Placeholder distractor 3
+`customMessage()`
 
 #### --answer--
 
-Placeholder answer
+`setCustomValidity()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default validation behavior for required fields when the form is submitted?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is submitted even if required fields are empty
 
 ---
 
-Placeholder distractor 2
+The form submits but gives a warning
 
 ---
 
-Placeholder distractor 3
+The form resets the `input` values
 
 #### --answer--
 
-Placeholder answer
+The browser stops the form submission if required fields are empty
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which actions does not cause an HTML form to be checked for errors?
 
 #### --distractors--
 
-Placeholder distractor 1
+Changing the `input` value
 
 ---
 
-Placeholder distractor 2
+Submitting the form
 
 ---
 
-Placeholder distractor 3
+Calling `reportValidity()`
 
 #### --answer--
 
-Placeholder answer
+Clicking a reset button
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does `checkValidity()` return when all form inputs are valid?
 
 #### --distractors--
 
-Placeholder distractor 1
+`false`
 
 ---
 
-Placeholder distractor 2
+`undefined`
 
 ---
 
-Placeholder distractor 3
+`null`
 
 #### --answer--
 
-Placeholder answer
+`true`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When does the `checkValidity()` method stop form submission?
 
 #### --distractors--
 
-Placeholder distractor 1
+When the form has no submit button
 
 ---
 
-Placeholder distractor 2
+When the form `action` is empty
 
 ---
 
-Placeholder distractor 3
+When the form method is POST
 
 #### --answer--
 
-Placeholder answer
+When the form has at least one invalid `input` (and the default behavior of form submission is prevented).
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if `checkValidity()` is called, but a field fails validation?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form submits without error
 
 ---
 
-Placeholder distractor 2
+The `input` values are cleared
 
 ---
 
-Placeholder distractor 3
+The form closes immediately
 
 #### --answer--
 
-Placeholder answer
+The invalid field is highlighted and a message appears
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which action will make `checkValidity()` run?
 
 #### --distractors--
 
-Placeholder distractor 1
+Resetting the form
 
 ---
 
-Placeholder distractor 2
+Changing an `input` value
 
 ---
 
-Placeholder distractor 3
+Clicking an anchor tag
 
 #### --answer--
 
-Placeholder answer
+Submitting the form manually
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of calling `checkValidity()` before submitting a form?
 
 #### --distractors--
 
-Placeholder distractor 1
+To automatically submit the form
 
 ---
 
-Placeholder distractor 2
+To reload the page
 
 ---
 
-Placeholder distractor 3
+To clear all `input` fields
 
 #### --answer--
 
-Placeholder answer
+To check if all `input` elements meet their specified constraints
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the main purpose of `e.preventDefault()`?
 
 #### --distractors--
 
-Placeholder distractor 1
+To reload the form
 
 ---
 
-Placeholder distractor 2
+To clear form data
 
 ---
 
-Placeholder distractor 3
+To reset the form values
 
 #### --answer--
 
-Placeholder answer
+To stop the default action of an event
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When used on a form's submit event, what does `e.preventDefault()` do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It submits the form
 
 ---
 
-Placeholder distractor 2
+It clears all form fields
 
 ---
 
-Placeholder distractor 3
+It disables the form temporarily
 
 #### --answer--
 
-Placeholder answer
+It prevents the form from being submitted
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In which scenario is `e.preventDefault()` most useful?
 
 #### --distractors--
 
-Placeholder distractor 1
+When handling a button click that submits a form
 
 ---
 
-Placeholder distractor 2
+When closing a modal dialog
 
 ---
 
-Placeholder distractor 3
+When opening a new page
 
 #### --answer--
 
-Placeholder answer
+When submitting a form via AJAX and preventing a page reload
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if you forget to call `e.preventDefault()` on a form submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is submitted via AJAX
 
 ---
 
-Placeholder distractor 2
+The form does not submit
 
 ---
 
-Placeholder distractor 3
+The form data is lost
 
 #### --answer--
 
-Placeholder answer
+The form submits and refreshes the page
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which default behavior can be prevented using `e.preventDefault()`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Editing a form
 
 ---
 
-Placeholder distractor 2
+Rendering the form
 
 ---
 
-Placeholder distractor 3
+Reloading the form
 
 #### --answer--
 
-Placeholder answer
+The default behavior caused by submitting a form (e.g., page refresh or POST call).
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What triggers the form's submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+When an input field changes
 
 ---
 
-Placeholder distractor 2
+When the form is reset
 
 ---
 
-Placeholder distractor 3
+When the form's action is cleared
 
 #### --answer--
 
-Placeholder answer
+When a form's submit button is clicked or Enter is pressed
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Where do you usually handle the submit event in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+On a text input element
 
 ---
 
-Placeholder distractor 2
+On any field in the form
 
 ---
 
-Placeholder distractor 3
+On a button element outside the form
 
 #### --answer--
 
-Placeholder answer
+On the form element itself
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the submit event do by default?
 
 #### --distractors--
 
-Placeholder distractor 1
+It validates the form but doesn’t submit it
 
 ---
 
-Placeholder distractor 2
+It clears the form fields
 
 ---
 
-Placeholder distractor 3
+It cancels form submission
 
 #### --answer--
 
-Placeholder answer
+It sends form data to the server specified in the form's action
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which event should you listen for to handle form data when the form is submitted in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+`"input"`
 
 ---
 
-Placeholder distractor 2
+`"change"`
 
 ---
 
-Placeholder distractor 3
+`"focus"`
 
 #### --answer--
 
-Placeholder answer
+`"submit"`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What must be done to prevent the default form submission behavior in the submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+Call `submit.preventDefault()`
 
 ---
 
-Placeholder distractor 2
+Stop the form from being displayed
 
 ---
 
-Placeholder distractor 3
+Set the form's `method` to `"GET"`
 
 #### --answer--
 
-Placeholder answer
+Call `e.preventDefault()`
 
diff --git a/curriculum/challenges/german/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md b/curriculum/challenges/german/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
index 022a3aef8b..07bda7d052 100644
--- a/curriculum/challenges/german/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
+++ b/curriculum/challenges/german/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+The Fibonacci sequence is a series where each number is the sum of the two preceding ones, starting with `0` and `1`. The sequence goes: `0, 1, 1, 2, 3, 5, 8, 13, 21...` and so on. What is the best approach to calculate `nth` number in the sequence?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use the formula `fib(n) = fib(n-1) * fib(n-2)`.
 
 ---
 
-Placeholder distractor 2
+Use recursion with memoization to avoid recalculating subproblems where `fib(n) = (n-1) + (n-2)`.
 
 ---
 
-Placeholder distractor 3
+Use a for loop to calculate iteratively where `fib(n) = fib(n-1) + (n-2)`.
 
 #### --answer--
 
-Placeholder answer
+Use recursion with memoization to avoid recalculating subproblems where `fib(n) = fib(n-1) + fib(n-2)`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+A binary string, such as `"1011"`, represents a number in base-2, where each digit corresponds to a power of `2`. What process can be used to convert this binary string into its decimal equivalent?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use the `parseInt()` function with base `10`.
 
 ---
 
-Placeholder distractor 2
+Convert the string to an array, then sum the digits using bitwise operations.
 
 ---
 
-Placeholder distractor 3
+Use the `Number()` function directly with a binary string.
 
 #### --answer--
 
-Placeholder answer
+Multiply each character by powers of `2` and sum them up.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following algorithm will move all zeroes in an array to the end while keeping the order of other elements unchanged? For example, given `[0, 1, 0, 3, 12]`, return `[1, 3, 12, 0, 0]`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Sort the array in decreasing order and place zeros at the start.
 
 ---
 
-Placeholder distractor 2
+Sort the array in ascending order.
 
 ---
 
-Placeholder distractor 3
+Use recursion to remove all zeros and add them to the front.
 
 #### --answer--
 
-Placeholder answer
+Use a two-pointer technique to swap non-zero elements with zero elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a sentence, such as `"I am a frontend engineer"`, what approach can be taken to reverse the order of the words, producing the output `"engineer frontend a am I"`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Split the string into words using `split(" ")`, reverse the array, and join it back into a string using `join("_")`.
 
 ---
 
-Placeholder distractor 2
+Sort the words alphabetically and return the result.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to reverse each word.
 
 #### --answer--
 
-Placeholder answer
+Split the string into words using `split(" ")`, reverse the array, and join it back into a string using `join(" ")`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a string, what approach would be used to find the first non-repeating character? For example, in the string `"codecamp"`, it would be `'o'`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Sort the string and check for consecutive duplicates.
 
 ---
 
-Placeholder distractor 2
+Convert the string to an array, then filter for unique elements.
 
 ---
 
-Placeholder distractor 3
+Use a regular expression to find the first non-repeat.
 
 #### --answer--
 
-Placeholder answer
+Iterate over the string twice, once to count number of occurrences and once to find the first unique character.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach can be used to encode a string by counting consecutive repeated characters? For example, given the input`"mississippi"`, the output should be `"m1i1s2i1s2i1p2i1"`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Use regular expressions to match repeated characters.
 
 ---
 
-Placeholder distractor 2
+Use `map()` to map consecutive characters to the output.
 
 ---
 
-Placeholder distractor 3
+Sort the string and count occurrences.
 
 #### --answer--
 
-Placeholder answer
+Iterate through the string, counting consecutive occurrences of each character while building the answer.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach can be used to reverse the digits of an integer? For example, given the input `1234`, the output should be `4321`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Use bitwise operations to reverse the digits.
 
 ---
 
-Placeholder distractor 2
+Convert the integer to a binary number and reverse it.
 
 ---
 
-Placeholder distractor 3
+Use the `reverse()` method directly on the integer.
 
 #### --answer--
 
-Placeholder answer
+Use a loop to extract digits from the integer and reconstruct the reversed integer.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach would be used to generate Pascal's Triangle up to `n` rows? For example, for `n = 3`, the result would be `[[1], [1, 1], [1, 2, 1]]`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Generate rows by using a function that outputs prime numbers and maps them to each row.
 
 ---
 
-Placeholder distractor 2
+Use a loop to generate each row by multiplying adjacent elements from the previous row.
 
 ---
 
-Placeholder distractor 3
+Use `Math.random()` to generate the rows.
 
 #### --answer--
 
-Placeholder answer
+Use a loop to generate each row by adding adjacent elements from the previous row.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which algorithm is most efficient for sorting an array of size `n` containing numbers from `1` to `n`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bubble Sort
 
 ---
 
-Placeholder distractor 2
+Merge Sort
 
 ---
 
-Placeholder distractor 3
+Quick Sort
 
 #### --answer--
 
-Placeholder answer
+Cyclic Sort
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which algorithmic approach is best for solving the problem of finding the minimum number of coins for a given amount when only one type of coin is provided?
 
 #### --distractors--
 
-Placeholder distractor 1
+Dynamic Programming
 
 ---
 
-Placeholder distractor 2
+Divide and Conquer
 
 ---
 
-Placeholder distractor 3
+Backtracking
 
 #### --answer--
 
-Placeholder answer
+Greedy Algorithm
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following problems can be solved efficiently using the two-pointer technique?
 
 #### --distractors--
 
-Placeholder distractor 1
+Sorting an array.
 
 ---
 
-Placeholder distractor 2
+Traversing a tree level by level.
 
 ---
 
-Placeholder distractor 3
+Finding the middle element of a linked list.
 
 #### --answer--
 
-Placeholder answer
+Finding two numbers in a sorted array that sum up to a target value.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a Roman numeral string, convert it to its corresponding integer value. For example, `"IX"` should return `9`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Parse the string from left to right and add the values of individual numerals.
 
 ---
 
-Placeholder distractor 2
+Parse each character and multiply by its index.
 
 ---
 
-Placeholder distractor 3
+Use the `parseInt()` function on the Roman numeral string.
 
 #### --answer--
 
-Placeholder answer
+Parse the string from right to left, adding the values of individual numerals and subtracting when a smaller numeral comes before a larger numeral.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can one check if a given string is a palindrome (the same forwards and backwards), for example `"madam"`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use Slow and Fast Pointer.
 
 ---
 
-Placeholder distractor 2
+Compare it to its reverse after sorting the string.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to remove all non-alphabetic characters and check equality.
 
 #### --answer--
 
-Placeholder answer
+Compare the string to its reverse.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a number `n`, write a function that prints numbers from `1` to `n`. For multiples of `3`, print `"Fizz"` for multiples of `5`, print `"Buzz"` and for multiples of both `3` and `5`, print `"FizzBuzz"`. What is the simplest approach to this?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `Math.random()` to generate numbers between `1` and `n` and check the result.
 
 ---
 
-Placeholder distractor 2
+Use a for loop and check divisibility in-order of `3`, `5` and `15` with if conditions or switch.
 
 ---
 
-Placeholder distractor 3
+Create a recursive function that checks divisibility by `3` and `5`.
 
 #### --answer--
 
-Placeholder answer
+Use a for loop and check divisibility in-order of `15`, `5` and `3` with if conditions or switch.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+The Caesar cipher is a simple encryption technique where each letter in a string is shifted forward by a fixed number of positions in the alphabet. How would you shift all letters in a string by `3` positions?
 
 #### --distractors--
 
-Placeholder distractor 1
+Subtract `3` from the ASCII value of each character.
 
 ---
 
-Placeholder distractor 2
+Replace each vowel with the next consonant.
 
 ---
 
-Placeholder distractor 3
+Add `3` to the ASCII value of each character, but only for uppercase letters.
 
 #### --answer--
 
-Placeholder answer
+Add `3` to the ASCII value of each character, wrapping around for `'z'` and `'Z'`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Anagrams are words formed by rearranging letters of another word. How can one determine if two strings are anagrams?
 
 #### --distractors--
 
-Placeholder distractor 1
+Compare total number of letters in both strings.
 
 ---
 
-Placeholder distractor 2
+Reverse one string and compare with the other.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to remove duplicate letters and check equality.
 
 #### --answer--
 
-Placeholder answer
+Sort both strings and check if they are equal.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is the correct approach to check if a given number is prime?
 
 #### --distractors--
 
-Placeholder distractor 1
+Check if the number is divisible by `2` and `3`. If not, it's prime.
 
 ---
 
-Placeholder distractor 2
+Check if the number is divisible by any odd number between `3` and the square root of the number.
 
 ---
 
-Placeholder distractor 3
+Convert the number to binary and check if it has exactly two 1s.
 
 #### --answer--
 
-Placeholder answer
+Loop from `2` to up to the square root of the prime candidate, and make sure none of the number divides it evenly.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following describes the correct approach to find the greatest common divisor (GCD) of two numbers?
 
 #### --distractors--
 
-Placeholder distractor 1
+Find the average of the two numbers and round to the nearest integer.
 
 ---
 
-Placeholder distractor 2
+Multiply the two numbers together and then divide by their least common divisor.
 
 ---
 
-Placeholder distractor 3
+Add the two numbers together and divide by `2`.
 
 #### --answer--
 
-Placeholder answer
+Use recursion where `gcd(a, b) = gcd(b, a % b)` where the base case would be to return first parameter when second parameter is zero.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+The factorial of a non-negative integer `n` (denoted `n!`) is the product of all positive integers from `1` to `n`, with `0! = 1`. Which of the following approaches can be used to calculate the factorial of a given number `n`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Add the numbers from `1` to `n`.
 
 ---
 
-Placeholder distractor 2
+Raise `n` to the power of `n-1`.
 
 ---
 
-Placeholder distractor 3
+Find the prime factorization of n and then multiply the prime factors together.
 
 #### --answer--
 
-Placeholder answer
+Multiplying numbers from `1` to `n` in a loop.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is the most efficient approach to search for a given integer within a distinct, sorted array of integers?
 
 #### --distractors--
 
-Placeholder distractor 1
+Linear Search.
 
 ---
 
-Placeholder distractor 2
+Sort the array and search using Linear Search.
 
 ---
 
-Placeholder distractor 3
+Create a hash table with the array elements and check for the given integer.
 
 #### --answer--
 
-Placeholder answer
+Binary Search.
 
diff --git a/curriculum/challenges/german/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md b/curriculum/challenges/german/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
index bf02c6d126..30b6619cac 100644
--- a/curriculum/challenges/german/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
+++ b/curriculum/challenges/german/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
@@ -83,7 +83,7 @@ Type `nano [FILE]`, then press the **Enter** key
 
 #### --text--
 
-What type of files is nano capable of creating and modifiying?
+What type of files is nano capable of creating and modifying?
 
 #### --distractors--
 
diff --git a/curriculum/challenges/german/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md b/curriculum/challenges/german/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
index fb4f4e6437..f73b3b9e1d 100644
--- a/curriculum/challenges/german/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
+++ b/curriculum/challenges/german/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
@@ -17,439 +17,440 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+How do you handle a click event in a React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<button onClick='handleClick()'>Click me</button>`
 
 ---
 
-Placeholder distractor 2
+`<button onClick={() => handleClick}>Click me</button>`
 
 ---
 
-Placeholder distractor 3
+`<button click={handleClick}>Click me</button>`
 
 #### --answer--
 
-Placeholder answer
+`<button onClick={handleClick}>Click me</button>`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is NOT a method for conditional rendering in React?
 
 #### --distractors--
 
-Placeholder distractor 1
+Ternary operators
 
 ---
 
-Placeholder distractor 2
+Logical `&&` operator
 
 ---
 
-Placeholder distractor 3
+`switch` statements
 
 #### --answer--
 
-Placeholder answer
+`setTimeout`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does `<React.Fragment>` do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Wraps components with adding extra DOM nodes.
 
 ---
 
-Placeholder distractor 2
+Creates a new HTML element.
 
 ---
 
-Placeholder distractor 3
+Deletes an existing element.
 
 #### --answer--
 
-Placeholder answer
+Wraps components without adding extra DOM nodes.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of React Context?
 
 #### --distractors--
 
-Placeholder distractor 1
+Managing component styles.
 
 ---
 
-Placeholder distractor 2
+Passing data through the component.
 
 ---
 
-Placeholder distractor 3
+Controlling component re-renders.
 
 #### --answer--
 
-Placeholder answer
+Passing data through the component tree without props.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is TRUE about JSX?
 
 #### --distractors--
 
-Placeholder distractor 1
+JSX must always be written in separate files from JavaScript.
 
 ---
 
-Placeholder distractor 2
+JSX cannot use JavaScript expressions.
 
 ---
 
-Placeholder distractor 3
+JSX is not recommended for React applications.
 
 #### --answer--
 
-Placeholder answer
+JSX allows writing HTML within JavaScript code.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a con of using Vanilla JS instead of a framework?
 
 #### --distractors--
 
-Placeholder distractor 1
+Automatic state management.
 
 ---
 
-Placeholder distractor 2
+Built-in routing capabilities.
 
 ---
 
-Placeholder distractor 3
+Declarative UI rendering.
 
 #### --answer--
 
-Placeholder answer
+Increased verbosity and manual DOM manipulation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a single-page application typically update the view?
 
 #### --distractors--
 
-Placeholder distractor 1
+By making a full server reload.
 
 ---
 
-Placeholder distractor 2
+By reloading the entire HTML document.
 
 ---
 
-Placeholder distractor 3
+By using server-side rendering only.
 
 #### --answer--
 
-Placeholder answer
+By updating only the necessary parts of the page.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to create a functional React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+Using classes only.
 
 ---
 
-Placeholder distractor 2
+Using the `React.Component` only.
 
 ---
 
-Placeholder distractor 3
+Using JavaScript constructors.
 
 #### --answer--
 
-Placeholder answer
+Using the `function` keyword or arrow functions.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is not a valid JSX element?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<div className='class'></div>`
 
 ---
 
-Placeholder distractor 2
+`<span>Hello World</span>`
 
 ---
 
-Placeholder distractor 3
+`<button>Click Me</button>`
 
 #### --answer--
 
-Placeholder answer
+`<img class='img'>`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is an example of a meta framework for React?
 
 #### --distractors--
 
-Placeholder distractor 1
+Vue.js
 
 ---
 
-Placeholder distractor 2
+Angular
 
 ---
 
-Placeholder distractor 3
+Svelte
 
 #### --answer--
 
-Placeholder answer
+Next.js
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What tool would you use to bootstrap a new React project?
 
 #### --distractors--
 
-Placeholder distractor 1
+Webpack
 
 ---
 
-Placeholder distractor 2
+npm
 
 ---
 
-Placeholder distractor 3
+Babel
 
 #### --answer--
 
-Placeholder answer
+Vite
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command installs dependencies listed in `package.json`?
 
 #### --distractors--
 
-Placeholder distractor 1
+`npm run`
 
 ---
 
-Placeholder distractor 2
+`npm update`
 
 ---
 
-Placeholder distractor 3
+`npm build`
 
 #### --answer--
 
-Placeholder answer
+`npm install`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How would you pass a `name` prop to a child component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<ChildComponent props="name" />`
 
 ---
 
-Placeholder distractor 2
+`<ChildComponent {props} />`
 
 ---
 
-Placeholder distractor 3
+`<ChildComponent {'John'} />`
 
 #### --answer--
 
-Placeholder answer
+`<ChildComponent name="Vignesh" />`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to conditionally render a component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<Home/>`
 
 ---
 
-Placeholder distractor 2
+`<Home>isLoggedIn</Home>`
 
 ---
 
-Placeholder distractor 3
+`<Home showIf={isLoggedIn} />`
 
 #### --answer--
 
-Placeholder answer
+`{isLoggedIn ? <Home /> : <Login />}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a child component, how do you access the `name` prop passed from a parent component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`this.props.name`
 
 ---
 
-Placeholder distractor 2
+`this.name`
 
 ---
 
-Placeholder distractor 3
+`{props}.name`
 
 #### --answer--
 
-Placeholder answer
+`props.name`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to add an inline style in React?
 
 #### --distractors--
 
-Placeholder distractor 1
+`style={{ color: blue }}`
 
 ---
 
-Placeholder distractor 2
+`style="color: blue"`
 
 ---
 
-Placeholder distractor 3
+`style: { color: 'blue' }`
 
 #### --answer--
 
-Placeholder answer
+`style={{ color: 'blue' }}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to conditionally render a React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+Using `if` statements inside JSX.
 
 ---
 
-Placeholder distractor 2
+Declaring a new component inside a `render()` method.
 
 ---
 
-Placeholder distractor 3
+Using `while` loops inside JSX.
 
 #### --answer--
 
-Placeholder answer
+Using ternary operators or logical `&&` operators within JSX.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What causes a React component to re-render?
 
 #### --distractors--
 
-Placeholder distractor 1
+Directly modifying the state variable.
 
 ---
 
-Placeholder distractor 2
+Calling the `render()` method.
 
 ---
 
-Placeholder distractor 3
+Recompiling the project.
 
 #### --answer--
 
-Placeholder answer
+Changing the state using `setState`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How would you specify a required `name` prop using `PropTypes`?
 
 #### --distractors--
 
-Placeholder distractor 1
+`name: PropTypes.bool`
 
 ---
 
-Placeholder distractor 2
+`name: PropTypes.array.isRequired`
 
 ---
 
-Placeholder distractor 3
+`name: PropTypes.string`
 
 #### --answer--
 
-Placeholder answer
+`name: PropTypes.string.isRequired`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What file is used to define project dependencies in a React/Node.js project?
 
 #### --distractors--
 
-Placeholder distractor 1
+`package.lock.json`
 
 ---
 
-Placeholder distractor 2
+`index.html`
 
 ---
 
-Placeholder distractor 3
+`webpack.config.js`
 
 #### --answer--
 
-Placeholder answer
+`package.json`
+
 
diff --git a/curriculum/challenges/german/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/german/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
index 79e4cb7a88..6855b5dea7 100644
--- a/curriculum/challenges/german/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
+++ b/curriculum/challenges/german/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A database structured to recognize non-relation between stored items.
 
 ---
 
-Placeholder distractor 2
+A database that stores unstructured data.
 
 ---
 
-Placeholder distractor 3
+A flat file-based system.
 
 #### --answer--
 
-Placeholder answer
+A database structured to recognize relations between stored items.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a non-relational database differ from a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Non-relational databases use tables, while relational databases do not.
 
 ---
 
-Placeholder distractor 2
+Relational databases can store unstructured data.
 
 ---
 
-Placeholder distractor 3
+Non-relational databases are slower than relational databases.
 
 #### --answer--
 
-Placeholder answer
+Non-relational databases can store unstructured data.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `\l` command do when executed in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all schemas
 
 ---
 
-Placeholder distractor 2
+Lists all tables
 
 ---
 
-Placeholder distractor 3
+Connects to a database
 
 #### --answer--
 
-Placeholder answer
+Lists all databases
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following commands creates a new table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD TABLE`
 
 ---
 
-Placeholder distractor 2
+`NEW TABLE`
 
 ---
 
-Placeholder distractor 3
+`ALTER TABLE`
 
 #### --answer--
 
-Placeholder answer
+`CREATE TABLE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of a foreign key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To allow duplication of data.
 
 ---
 
-Placeholder distractor 2
+To uniquely identify a row in the table.
 
 ---
 
-Placeholder distractor 3
+To store large amounts of text data.
 
 #### --answer--
 
-Placeholder answer
+To create a relationship between two tables.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command will add a new column to an existing table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD COLUMN column_name TO table_name data_type;`
 
 ---
 
-Placeholder distractor 2
+`INSERT COLUMN column_name INTO table_name data_type;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name ADD COLUMN column_name data_type;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name ADD COLUMN column_name data_type;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What type of relationship exists when one record in Table A corresponds to one or more records in Table B?
 
 #### --distractors--
 
-Placeholder distractor 1
+One-to-One (1-1)
 
 ---
 
-Placeholder distractor 2
+Many-to-Many (m-m)
 
 ---
 
-Placeholder distractor 3
+Many-to-one(m-1)
 
 #### --answer--
 
-Placeholder answer
+One-to-Many (1-m)
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary purpose of normalization in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To increase the speed of data retrieval.
 
 ---
 
-Placeholder distractor 2
+To enforce security measures.
 
 ---
 
-Placeholder distractor 3
+To simplify the database schema.
 
 #### --answer--
 
-Placeholder answer
+To eliminate data redundancy and ensure data integrity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you delete a column from a table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 2
+`DELETE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name DELETE column_name;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name DROP COLUMN column_name;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the function of the `PRIMARY KEY` constraint in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+To link two tables together.
 
 ---
 
-Placeholder distractor 2
+To define the default value for a column.
 
 ---
 
-Placeholder distractor 3
+To allow null values in the column.
 
 #### --answer--
 
-Placeholder answer
+To ensure that the column contains unique values.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the command `\c` do in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all tables in the current database.
 
 ---
 
-Placeholder distractor 2
+Displays the current database connection details.
 
 ---
 
-Placeholder distractor 3
+Exits the `psql` shell.
 
 #### --answer--
 
-Placeholder answer
+Connects to the specified database.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command inserts data into a table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`PUT VALUES`
 
 ---
 
-Placeholder distractor 2
+`UPDATE INTO`
 
 ---
 
-Placeholder distractor 3
+`ADD DATA`
 
 #### --answer--
 
-Placeholder answer
+`INSERT INTO`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you rename a column in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`MODIFY COLUMN`
 
 ---
 
-Placeholder distractor 2
+`CHANGE COLUMN`
 
 ---
 
-Placeholder distractor 3
+`ALTER COLUMN`
 
 #### --answer--
 
-Placeholder answer
+`RENAME COLUMN`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which query will delete all records from the employees table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE ALL`
 
 ---
 
-Placeholder distractor 2
+`TRUNCATE employees`
 
 ---
 
-Placeholder distractor 3
+`DROP RECORDS`
 
 #### --answer--
 
-Placeholder answer
+`DELETE FROM employees`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which SQL constraint specifically ensures that a column can contain only unique values, allowing nulls?
 
 #### --distractors--
 
-Placeholder distractor 1
+`NOT NULL`
 
 ---
 
-Placeholder distractor 2
+`FOREIGN KEY`
 
 ---
 
-Placeholder distractor 3
+`PRIMARY KEY`
 
 #### --answer--
 
-Placeholder answer
+`UNIQUE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a relational database, what is an index used for?
 
 #### --distractors--
 
-Placeholder distractor 1
+To store additional metadata about tables.
 
 ---
 
-Placeholder distractor 2
+To ensure unique values in a column.
 
 ---
 
-Placeholder distractor 3
+To enforce data integrity.
 
 #### --answer--
 
-Placeholder answer
+To speed up data retrieval.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does a one-to-one (1-1) relationship represent in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Each record in Table A corresponds to one or more records in Table B.
 
 ---
 
-Placeholder distractor 2
+Each record in Table A corresponds to no records in Table B.
 
 ---
 
-Placeholder distractor 3
+Each record in Table A corresponds to multiple records in Table B and vice versa.
 
 #### --answer--
 
-Placeholder answer
+Each record in Table A corresponds to exactly one record in Table B.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command will list all tables in the current PostgreSQL database?
 
 #### --distractors--
 
-Placeholder distractor 1
+`\l`
 
 ---
 
-Placeholder distractor 2
+`SHOW TABLES`
 
 ---
 
-Placeholder distractor 3
+`\t`
 
 #### --answer--
 
-Placeholder answer
+`\d`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
diff --git a/curriculum/challenges/german/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md b/curriculum/challenges/german/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
index 6a4965d122..af439d1aab 100644
--- a/curriculum/challenges/german/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
+++ b/curriculum/challenges/german/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What CSS property is commonly used to create a flexible layout in a container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`display: block;`
 
 ---
 
-Placeholder distractor 2
+`display: inline;`
 
 ---
 
-Placeholder distractor 3
+`display: table;`
 
 #### --answer--
 
-Placeholder answer
+`display: flex;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the main purpose of media queries in responsive web design?
 
 #### --distractors--
 
-Placeholder distractor 1
+To change the color scheme of the page.
 
 ---
 
-Placeholder distractor 2
+To create animations.
 
 ---
 
-Placeholder distractor 3
+To adjust margins for print pages.
 
 #### --answer--
 
-Placeholder answer
+To apply different styles based on the screen size or device type.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which media feature in a media query checks the width of the browser window?
 
 #### --distractors--
 
-Placeholder distractor 1
+`min-height`
 
 ---
 
-Placeholder distractor 2
+`max-aspect-ratio`
 
 ---
 
-Placeholder distractor 3
+`resolution`
 
 #### --answer--
 
-Placeholder answer
+`min-width`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which CSS unit is relative to the width of the viewport?
 
 #### --distractors--
 
-Placeholder distractor 1
+`em`
 
 ---
 
-Placeholder distractor 2
+`px`
 
 ---
 
-Placeholder distractor 3
+`rem`
 
 #### --answer--
 
-Placeholder answer
+`vw`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does mobile-first design emphasize?
 
 #### --distractors--
 
-Placeholder distractor 1
+Designing for desktops and scaling down for smaller devices.
 
 ---
 
-Placeholder distractor 2
+Using only desktop breakpoints.
 
 ---
 
-Placeholder distractor 3
+Focusing on the highest resolution devices first.
 
 #### --answer--
 
-Placeholder answer
+Designing for smaller screens first and scaling up for larger devices.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which media query will apply styles when the device's width is between 600px and 1200px?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 1200px)`
 
 ---
 
-Placeholder distractor 2
+`@media screen and (min-width: 600px)`
 
 ---
 
-Placeholder distractor 3
+`@media screen and (width: 800px)`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 600px) and (max-width: 1200px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default flex-direction value in Flexbox?
 
 #### --distractors--
 
-Placeholder distractor 1
+`column`
 
 ---
 
-Placeholder distractor 2
+`row-reverse`
 
 ---
 
-Placeholder distractor 3
+`column-reverse`
 
 #### --answer--
 
-Placeholder answer
+`row`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In Flexbox, how do you distribute space between items in a container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`align-items`
 
 ---
 
-Placeholder distractor 2
+`flex-grow`
 
 ---
 
-Placeholder distractor 3
+`flex-wrap`
 
 #### --answer--
 
-Placeholder answer
+`justify-content`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you apply a grid layout to a container in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`display: flexbox;`
 
 ---
 
-Placeholder distractor 2
+`display: block;`
 
 ---
 
-Placeholder distractor 3
+`display: table;`
 
 #### --answer--
 
-Placeholder answer
+`display: grid;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `fr` unit represent in CSS Grid?
 
 #### --distractors--
 
-Placeholder distractor 1
+Flexible ratio
 
 ---
 
-Placeholder distractor 2
+Frame ratio
 
 ---
 
-Placeholder distractor 3
+Fixed region
 
 #### --answer--
 
-Placeholder answer
+Fraction of available space
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is a valid media query for targeting devices with a resolution of 2x or higher?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media (resolution: 2x)`
 
 ---
 
-Placeholder distractor 2
+`@media (max-resolution: 2x)`
 
 ---
 
-Placeholder distractor 3
+`@media screen and (min-width: 1200px)`
 
 #### --answer--
 
-Placeholder answer
+`@media (min-resolution: 2px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which property controls the number of columns in a grid container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`grid-template-rows`
 
 ---
 
-Placeholder distractor 2
+`grid-auto-rows`
 
 ---
 
-Placeholder distractor 3
+`grid-template`
 
 #### --answer--
 
-Placeholder answer
+`grid-template-columns`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you set up a media query for screens larger than 768px?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 768px)`
 
 ---
 
-Placeholder distractor 2
+`@media only screen and (width > 768px)`
 
 ---
 
-Placeholder distractor 3
+`@media (screen-width: 768px)`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 768px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `flex-wrap` property in Flexbox?
 
 #### --distractors--
 
-Placeholder distractor 1
+To align items along the cross axis.
 
 ---
 
-Placeholder distractor 2
+To reverse the order of flex items.
 
 ---
 
-Placeholder distractor 3
+To distribute space evenly between items.
 
 #### --answer--
 
-Placeholder answer
+To allow flex items to wrap onto multiple lines.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following breakpoints is commonly used for tablets in responsive web design?
 
 #### --distractors--
 
-Placeholder distractor 1
+`480px`
 
 ---
 
-Placeholder distractor 2
+`1920px`
 
 ---
 
-Placeholder distractor 3
+`2560px`
 
 #### --answer--
 
-Placeholder answer
+`768px`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you center an item horizontally in a flex container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`align-items: center;`
 
 ---
 
-Placeholder distractor 2
+`flex-direction: row;`
 
 ---
 
-Placeholder distractor 3
+`flex-grow: 1;`
 
 #### --answer--
 
-Placeholder answer
+`justify-content: center;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In mobile-first design, which media query should be used to target larger screens?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 600px)`
 
 ---
 
-Placeholder distractor 2
+`@media screen and (height: 600px)`
 
 ---
 
-Placeholder distractor 3
+`@media only screen`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 600px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which CSS property is used to create a layout that adjusts based on screen size without media queries?
 
 #### --distractors--
 
-Placeholder distractor 1
+`float`
 
 ---
 
-Placeholder distractor 2
+`display: block`
 
 ---
 
-Placeholder distractor 3
+`width: 100%`
 
 #### --answer--
 
-Placeholder answer
+`flex`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you prevent a flex container from shrinking smaller than its content?
 
 #### --distractors--
 
-Placeholder distractor 1
+`flex-shrink: 1;`
 
 ---
 
-Placeholder distractor 2
+`flex-direction: column;`
 
 ---
 
-Placeholder distractor 3
+`align-items: flex-start;`
 
 #### --answer--
 
-Placeholder answer
+`flex-shrink: 0;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you create a responsive image that scales with the width of its container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`max-height: 100%;`
 
 ---
 
-Placeholder distractor 2
+`object-fit: contain;`
 
 ---
 
-Placeholder distractor 3
+`min-width: 100%;`
 
 #### --answer--
 
-Placeholder answer
+`max-width: 100%;`
 
diff --git a/curriculum/challenges/german/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md b/curriculum/challenges/german/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
index 47b4ceeba0..4d67427ccc 100644
--- a/curriculum/challenges/german/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
+++ b/curriculum/challenges/german/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+Which of the following is a common issue with the `datetime-local` input type?
 
 #### --distractors--
 
-Placeholder distractor 1
+It cannot be used with CSS variables.
 
 ---
 
-Placeholder distractor 2
+It automatically submits the form upon value selection.
 
 ---
 
-Placeholder distractor 3
+It does not support real-time updates.
 
 #### --answer--
 
-Placeholder answer
+The input format is different across browsers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why is it important to use `box-sizing: border-box;` when styling text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the text input focusable with a keyboard.
 
 ---
 
-Placeholder distractor 2
+It hides the input’s placeholder text.
 
 ---
 
-Placeholder distractor 3
+It removes the default browser styling for inputs.
 
 #### --answer--
 
-Placeholder answer
+It ensures padding and borders are included in the element’s width and height.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a benefit of setting a max-width for text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It prevents users from entering long text.
 
 ---
 
-Placeholder distractor 2
+It makes the input unresponsive on larger screens.
 
 ---
 
-Placeholder distractor 3
+It automatically adjusts the font size.
 
 #### --answer--
 
-Placeholder answer
+It ensures the input doesn’t stretch too wide on larger screens.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should you add `:focus` styles to text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It hides the input’s border.
 
 ---
 
-Placeholder distractor 2
+It disables user input.
 
 ---
 
-Placeholder distractor 3
+It forces the browser to ignore default styles.
 
 #### --answer--
 
-Placeholder answer
+It improves accessibility by making the input easier to identify when focused.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you prevent text inputs from being cut off when resized?
 
 #### --distractors--
 
-Placeholder distractor 1
+By adding `overflow: hidden;`.
 
 ---
 
-Placeholder distractor 2
+By setting a fixed height and width.
 
 ---
 
-Placeholder distractor 3
+By removing padding from the input.
 
 #### --answer--
 
-Placeholder answer
+By using padding and line-height with flexible units like `em` or `rem`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why is it important to use descriptive placeholder text in form inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It helps to pre-fill the form for the user.
 
 ---
 
-Placeholder distractor 2
+It automatically validates the input as the user types.
 
 ---
 
-Placeholder distractor 3
+It hides the input label, reducing visual clutter.
 
 #### --answer--
 
-Placeholder answer
+It provides users with guidance on the expected input format without cluttering the interface.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should you avoid using `outline: none;` without adding a custom focus style?
 
 #### --distractors--
 
-Placeholder distractor 1
+It reduces the size of the text input.
 
 ---
 
-Placeholder distractor 2
+It hides the input from assistive technology users.
 
 ---
 
-Placeholder distractor 3
+It makes the input read-only.
 
 #### --answer--
 
-Placeholder answer
+It removes the focus outline, which may confuse users about which field is selected.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of using Flexbox or Grid for form layout?
 
 #### --distractors--
 
-Placeholder distractor 1
+To make form controls appear in random positions.
 
 ---
 
-Placeholder distractor 2
+To make the form smaller on mobile devices.
 
 ---
 
-Placeholder distractor 3
+To hide form controls on large screens.
 
 #### --answer--
 
-Placeholder answer
+To create a well-structured and responsive form layout.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should input elements be styled with a solid border?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the form look more colorful.
 
 ---
 
-Placeholder distractor 2
+It automatically increases form field size.
 
 ---
 
-Placeholder distractor 3
+It forces users to zoom in on mobile devices.
 
 #### --answer--
 
-Placeholder answer
+To ensure input fields are clearly visible and easily recognizable as form controls.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does increasing the margin between form elements affect form usability?
 
 #### --distractors--
 
-Placeholder distractor 1
+It decreases accessibility on mobile devices.
 
 ---
 
-Placeholder distractor 2
+It prevents users from submitting the form.
 
 ---
 
-Placeholder distractor 3
+It hides form labels.
 
 #### --answer--
 
-Placeholder answer
+It improves readability by helping users see the grouping of related form elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary reason for using `appearance: none` in form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+To add new default styles to form elements.
 
 ---
 
-Placeholder distractor 2
+To enable form elements to appear larger on mobile devices.
 
 ---
 
-Placeholder distractor 3
+To disable form validation for specific elements.
 
 #### --answer--
 
-Placeholder answer
+To remove the default browser styling from form elements and apply custom styles.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which type of form elements is commonly styled using `appearance: none` to remove their default look?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<label>` elements
 
 ---
 
-Placeholder distractor 2
+`<div>` elements
 
 ---
 
-Placeholder distractor 3
+`<span>` elements
 
 #### --answer--
 
-Placeholder answer
+`<input>` and `<select>` elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When should you avoid using `appearance: none` on form controls?
 
 #### --distractors--
 
-Placeholder distractor 1
+When you want to fully customize the form control's style.
 
 ---
 
-Placeholder distractor 2
+When the browser’s default styles are hard to override.
 
 ---
 
-Placeholder distractor 3
+When you are building a mobile-first responsive form.
 
 #### --answer--
 
-Placeholder answer
+When relying on the accessibility and familiarity of native form control appearances.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can using `appearance: none` improve the design of radio buttons and checkboxes?
 
 #### --distractors--
 
-Placeholder distractor 1
+It increases the size of radio buttons and checkboxes.
 
 ---
 
-Placeholder distractor 2
+It automatically creates animation effects for radio buttons and checkboxes.
 
 ---
 
-Placeholder distractor 3
+It prevents users from interacting with radio buttons and checkboxes.
 
 #### --answer--
 
-Placeholder answer
+It removes the browser's default appearance, allowing you to fully customize the design.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a common issue that arises when using `appearance: none` on a select element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the `select` element invisible.
 
 ---
 
-Placeholder distractor 2
+It disables the dropdown functionality.
 
 ---
 
-Placeholder distractor 3
+It breaks form validation.
 
 #### --answer--
 
-Placeholder answer
+It removes the dropdown arrow, requiring you to add a custom arrow or indicator.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can occur when using HTML5 validation attributes like `required` without custom messaging?
 
 #### --distractors--
 
-Placeholder distractor 1
+It automatically validates all inputs without user interaction.
 
 ---
 
-Placeholder distractor 2
+It prevents the form from being submitted if all fields are filled.
 
 ---
 
-Placeholder distractor 3
+It allows users to see detailed error messages for each input.
 
 #### --answer--
 
-Placeholder answer
+Users may not understand why their submission fails, leading to frustration if no helpful feedback is provided.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can arise when no margin is added between the header and the content?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the content load faster.
 
 ---
 
-Placeholder distractor 2
+It improves the overall readability of the content.
 
 ---
 
-Placeholder distractor 3
+It automatically centers the content under the header.
 
 #### --answer--
 
-Placeholder answer
+The content may appear cramped or overlap with the header, making it difficult to read and reducing visual clarity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue may arise with custom fonts when used in form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+They may not display correctly on all browsers.
 
 ---
 
-Placeholder distractor 2
+They always load faster than system fonts.
 
 ---
 
-Placeholder distractor 3
+They prevent the use of responsive design.
 
 #### --answer--
 
-Placeholder answer
+Custom fonts may not be accessible to users if they are not properly loaded or fallback fonts are not specified.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can arise when using `overflow: hidden;` on form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+It improves the form’s overall accessibility.
 
 ---
 
-Placeholder distractor 2
+It automatically adjusts the form to fit within smaller screens.
 
 ---
 
-Placeholder distractor 3
+It ensures that all text content is always visible.
 
 #### --answer--
 
-Placeholder answer
+It can cause content, such as text or labels, to be cut off if the element is resized or if padding is used incorrectly.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What common problem arises when submitting form data that includes `color` input?
 
 #### --distractors--
 
-Placeholder distractor 1
+The `color` value gets automatically converted to grayscale.
 
 ---
 
-Placeholder distractor 2
+The browser displays an alert before submitting the form.
 
 ---
 
-Placeholder distractor 3
+It replaces the `color` value with a default value.
 
 #### --answer--
 
-Placeholder answer
+The `color` input value is submitted as a hexadecimal string, which may require formatting on the server.
 
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
new file mode 100644
index 0000000000..8931930aa3
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
@@ -0,0 +1,61 @@
+---
+id: 61fd5a93fd62bb35968adeab
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Begin your project by giving your `head` element a `link` element for your stylesheet.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert(/<link/.test(code))
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i))
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
new file mode 100644
index 0000000000..ae59503cca
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
@@ -0,0 +1,48 @@
+---
+id: 61fd6343fb42013d99bcd7f3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Within your `body` element, nest a `section` element within a `main` element.
+
+# --hints--
+
+The first element inside the `body` element should be your `main` element.
+
+```js
+assert(document.querySelector('body')?.children?.[0]?.localName === 'main');
+```
+
+You should have a `section` element within your `main` element.
+
+```js
+assert(document.querySelector('main')?.children?.[0]?.localName === 'section');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
new file mode 100644
index 0000000000..345621fb1d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
@@ -0,0 +1,52 @@
+---
+id: 61fd66c687e610436494c6f1
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `section` element, add an `h1` element with a nested `span` element.
+
+# --hints--
+
+Your `section` element should have an `h1` element.
+
+```js
+assert(document.querySelector('section')?.children?.[0]?.localName === 'h1');
+```
+
+Your `h1` element should have a `span` element.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.localName === 'span');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+--fcc-editable-region--
+      <section>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
new file mode 100644
index 0000000000..0be766dccc
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
@@ -0,0 +1,78 @@
+---
+id: 61fd67a656743144844941cb
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Screen readers announce HTML elements based on the document flow. We will eventually want the balance sheet to have a heading of "Balance Sheet" and a subheading of "AcmeWidgetCorp". However, this order does not make sense if announced by a screen reader.
+
+Give your existing `span` the `class` attribute set to `flex`, and add two `span` elements within it. Give the first the text `AcmeWidgetCorp`. Give the second the text `Balance Sheet`. You will use CSS to reverse the order of the text on the page, but the HTML order will make more sense for a screen reader.
+
+# --hints--
+
+Your existing `span` element should have the `class` attribute set to `flex`.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
+```
+
+Your existing `span` element should have two new `span` elements within it.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
+assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
+```
+
+Your new `span` elements should not have a `class` attribute.
+
+```js
+assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
+assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
+```
+
+Your first new `span` element should have the text `AcmeWidgetCorp`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
+```
+
+Your second new `span` element should have the text `Balance Sheet`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+--fcc-editable-region--
+          <span>
+          </span>
+--fcc-editable-region--
+        </h1>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
new file mode 100644
index 0000000000..2d5052298f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
@@ -0,0 +1,65 @@
+---
+id: 61fd6ab779390f49148773bb
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Below your `h1` element, create a `div` element. Give it an `id` attribute set to `years`. You want this particular element to be hidden from screen readers, so give it the `aria-hidden` attribute set to `true`.
+
+# --hints--
+
+You should create a new `div` element after your `h1` element.
+
+```js
+assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div');
+```
+
+Your new `div` element should have an `id` attribute set to `years`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('id') === 'years');
+```
+
+Your new `div` element should have the `aria-hidden` attribute set to `true`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
new file mode 100644
index 0000000000..f01ff5c2b6
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
@@ -0,0 +1,79 @@
+---
+id: 61fd6b7c83dbf54a08cf0498
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within your `div` element, add three `span` elements. Give each of them a `class` attribute set to `year`, and add the following text (in order): `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Your `div` element should have three `span` elements.
+
+```js
+assert(document.querySelector('div')?.children?.length === 3);
+```
+
+Each `span` element should have a `class` attribute set to `year`.
+
+```js
+const spans = [...document.querySelector('div')?.children];
+spans.forEach(span => assert(span?.classList?.contains('year')));
+```
+
+Your first `span` should have the text `2019`.
+
+```js
+assert(document.querySelector('div')?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` should have the text `2020`.
+
+```js
+assert(document.querySelector('div')?.children?.[1]?.textContent === '2020');
+```
+
+Your third `span` should have the text `2021`.
+
+```js
+assert(document.querySelector('div')?.children?.[2]?.textContent === '2021');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+        <div id="years" aria-hidden="true">
+        </div>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
new file mode 100644
index 0000000000..b8ccec8b81
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
@@ -0,0 +1,80 @@
+---
+id: 61fd6cc9475a784b7776233e
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Below your existing `div` element, add a new `div` element with a `class` set to `table-wrap`. This will be the container for your tables.
+
+Within that, add three `table` elements. You will be using CSS to style these into a single table, but using separate tables will help screen readers understand the document flow.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+Your new `div` element should have the `class` set to `table-wrap`.
+
+```js
+assert(document.querySelector('.table-wrap')?.localName === 'div');
+```
+
+Your `.table-wrap` element should come after your existing `div`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap'));
+```
+
+Your `.table-wrap` element should have three `table` elements.
+
+```js
+const children = [...(document.querySelector('.table-wrap')?.children ?? [])];
+assert(children?.length === 3);
+children.forEach(child => assert(child?.localName === 'table'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
new file mode 100644
index 0000000000..630d13d656
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
@@ -0,0 +1,73 @@
+---
+id: 61fd70336ebb3e4f62ee81ba
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+HTML tables use the `caption` element to describe what the table is about. The `caption` element should always be the first child of a `table`, but can be positioned with the `caption-side` CSS property.
+
+Add a `caption` element to your first `table`, and give it the text `Assets`.
+
+# --hints--
+
+Your first `table` element should have a `caption` element.
+
+```js
+assert(document.querySelector('table')?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Assets`.
+
+```js
+assert(document.querySelector('caption')?.textContent === 'Assets');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
new file mode 100644
index 0000000000..2e0c363fd1
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
@@ -0,0 +1,86 @@
+---
+id: 61fd719788899952e67692b9
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+The `thead` and `tbody` elements are used to indicate which portion of your table is the header, and which portion contains the primary data or content.
+
+Add a `thead` and `tbody` to your first `table`, below the `caption` element.
+
+# --hints--
+
+Your first `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('thead'));
+```
+
+Your first `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+            <caption>Assets</caption>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
new file mode 100644
index 0000000000..083e60b9e9
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
@@ -0,0 +1,86 @@
+---
+id: 61fd71d596e8f253b9408b39
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+The `tr` element is used to indicate a table row. Add a `tr` element within your `thead` element. In your new `tr` element, add a `td` element, followed by three `th` elements.
+
+The `td` element indicates a data cell, while the `th` element indicates a header cell.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
new file mode 100644
index 0000000000..2bb7733877
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
@@ -0,0 +1,125 @@
+---
+id: 61fd75ea7f663457612dba02
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Within each of your new `th` elements, nest a `span` element with the `class` set to `sr-only year`. Give them the following text (in order): `2019`, `2020`, and `2021`.
+
+Give your third `th` element the `class` attribute set to `current`.
+
+Leave the `td` element empty. This element exists only to ensure your table has a four-column layout and associate the headers with the correct columns.
+
+# --hints--
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only year`.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+  assert(th?.children?.[0]?.classList?.contains('year'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your third `th` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current'));
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
new file mode 100644
index 0000000000..e45bc92ba6
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
@@ -0,0 +1,96 @@
+---
+id: 61fd7648a7ba2e5882436831
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Within your `tbody` element, add four `tr` elements. Give the first three a `class` attribute set to `data`, and the fourth a `class` attribute set to `total`.
+
+# --hints--
+
+Your `tbody` element should have four `tr` elements.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+Your first three `tr` elements should have the `class` attribute set to `data`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+Your fourth `tr` element should have the `class` attribute set to `total`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+--fcc-editable-region--
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
new file mode 100644
index 0000000000..413771781f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
@@ -0,0 +1,134 @@
+---
+id: 61fd778081276b59d59abad6
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+In your first `tr`, add a `th` element with the text `Cash This is the cash we currently have on hand.`. Wrap all of that text except `Cash` in a `span` element with the `class` set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$25`, `$30`, `$28`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your first `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Cash This is the cash we currently have on hand.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.');
+```
+
+You should wrap the text `This is the cash we currently have on hand.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$25`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$25');
+```
+
+Your second `td` element should have the text `$30`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$30');
+```
+
+Your third `td` element should have the text `$28`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$28');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
new file mode 100644
index 0000000000..65782d0b1e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
@@ -0,0 +1,138 @@
+---
+id: 61fd77f7ad2aeb5ae34d07d6
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In your second `tr` element, add a `th` element with the text `Checking Our primary transactional account.`. Wrap that text, except for `Checking`, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$54`, `$56`, `$53`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your second `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Checking Our primary transactional account.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.');
+```
+
+You should wrap the text `Our primary transactional account.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$54`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$54');
+```
+
+Your second `td` element should have the text `$56`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$56');
+```
+
+Your third `td` element should have the text `$53`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$53');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
new file mode 100644
index 0000000000..e0aef0b407
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
@@ -0,0 +1,142 @@
+---
+id: 61fd78621573aa5e8b512f5e
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In your third `tr` element, add a `th` element with the text `Savings Funds set aside for emergencies.`. Wrap that text, except for `Savings`, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$500`, `$650`, `$728`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your third `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Savings Funds set aside for emergencies.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.');
+```
+
+You should wrap the text `Funds set aside for emergencies.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$500`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+Your second `td` element should have the text `$650`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650');
+```
+
+Your third `td` element should have the text `$728`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
new file mode 100644
index 0000000000..2f7c60f29f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
@@ -0,0 +1,146 @@
+---
+id: 61fd7a160ed17960e971f28b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+In your fourth `tr` element, add a `th` element with the text `Total Assets`. Wrap the text `Assets` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$579`, `$736`, `$809`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your fourth `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Assets`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets');
+```
+
+You should wrap the text `Assets` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Assets');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$579`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579');
+```
+
+Your second `td` element should have the text `$736`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736');
+```
+
+Your third `td` element should have the text `$809`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
+```
+
+Your third `td` element should have the `class` attribute set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
new file mode 100644
index 0000000000..184f5dee82
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
@@ -0,0 +1,130 @@
+---
+id: 61fd7b3fcaa5406257abc5d1
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Time to move on to your second table. Start by giving it a `caption` element set to `Liabilities`. Then add your `thead` and `tbody`.
+
+# --hints--
+
+Your second `table` element should have a `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities');
+```
+
+Your second `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead'));
+```
+
+Your second `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
new file mode 100644
index 0000000000..40f7da84cd
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
@@ -0,0 +1,119 @@
+---
+id: 61fd8e491324ce717da97ffe
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Within your `thead`, add a `tr`. Inside that, add a `td` and three `th` elements.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
new file mode 100644
index 0000000000..55c85fb133
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
@@ -0,0 +1,149 @@
+---
+id: 61fd8fd08af43372f02952d0
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Give each `th` element a `span` element with the class set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
new file mode 100644
index 0000000000..abec451e89
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
@@ -0,0 +1,131 @@
+---
+id: 61fd9126aa72a474301fc49f
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Within the `tbody` element, add four `tr` elements. Give the first three the `class` attribute set to `data`, and the fourth the `class` attribute set to `total`.
+
+# --hints--
+
+Your `tbody` element should have four `tr` elements.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+Your first three `tr` elements should have the `class` attribute set to `data`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+Your fourth `tr` element should have the `class` attribute set to `total`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
new file mode 100644
index 0000000000..58a2b1e9bc
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
@@ -0,0 +1,169 @@
+---
+id: 61fd933ba685de776a94997e
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Within the first `tr`, add a `th` element with the text `Loans The outstanding balance on our startup loan.`. Wrap that text, except for `Loans`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$500`, `$250`, and `$0`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your first `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Loans The outstanding balance on our startup loan.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.');
+```
+
+You should wrap the text `The outstanding balance on our startup loan.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$500`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+Your second `td` element should have the text `$250`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$250');
+```
+
+Your third `td` element should have the text `$0`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$0');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
new file mode 100644
index 0000000000..1f8839c68a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
@@ -0,0 +1,173 @@
+---
+id: 61fd94056e0355785fbba4d3
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Within the second `tr`, add a `th` element with the text `Expenses Annual anticipated expenses, such as payroll.`. Wrap that text, except for `Expenses`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$200`, `$300`, and `$400`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your second `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Expenses Annual anticipated expenses, such as payroll.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.');
+```
+
+You should wrap the text `Annual anticipated expenses, such as payroll.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$200`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$200');
+```
+
+Your second `td` element should have the text `$300`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$300');
+```
+
+Your third `td` element should have the text `$400`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$400');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
new file mode 100644
index 0000000000..a7289e5738
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
@@ -0,0 +1,177 @@
+---
+id: 61fd986ddbcbd47ba8fbc5ec
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Within the third `tr`, add a `th` element with the text `Credit The outstanding balance on our credit card.`. Wrap that text, except for `Credit`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$50`, `$50`, and `$75`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your third `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Credit The outstanding balance on our credit card.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.');
+```
+
+You should wrap the text `The outstanding balance on our credit card.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$50');
+```
+
+Your second `td` element should have the text `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$50');
+```
+
+Your third `td` element should have the text `$75`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$75');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
new file mode 100644
index 0000000000..630afca73e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -0,0 +1,181 @@
+---
+id: 61fd990577d8227dd93fbeeb
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In your fourth `tr` element, add a `th` element with the text `Total Liabilities`. Wrap the text `Liabilities` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$750`, `$600`, `$475`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your fourth `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities');
+```
+
+You should wrap the text `Liabilities` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$750`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750');
+```
+
+Your second `td` element should have the text `$600`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600');
+```
+
+Your third `td` element should have the text `$475`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
new file mode 100644
index 0000000000..e2d2e4f80e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
@@ -0,0 +1,165 @@
+---
+id: 61fd9a4ff2fc4481b9157bd7
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+For your third table, add a `caption` with the text `Net Worth`, and set up a table header and table body.
+
+# --hints--
+
+Your third `table` element should have a `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth');
+```
+
+Your third `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead'));
+```
+
+Your third `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
new file mode 100644
index 0000000000..a6d495c907
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
@@ -0,0 +1,198 @@
+---
+id: 61fd9ad665a4a282c8106be3
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Within your `thead`, create a `tr` element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
new file mode 100644
index 0000000000..d0c5452488
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
@@ -0,0 +1,208 @@
+---
+id: 61fd9b7285bde783ad5b8aac
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Within the `tbody`, add a `tr` with the `class` set to `total`. In that, add a `th` with the text `Total Net Worth`, and wrap `Net Worth` in a `span` with the `class` set to `sr-only`.
+
+Then add three `td` elements, giving the third a `class` set to `current`, and giving each the following text: `$-171`, `$136`, `$334`.
+
+# --hints--
+
+Your `tbody` element should have one `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
+```
+
+Your `tr` element should have the `class` set to `total`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total'));
+```
+
+Your `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth');
+```
+
+You should wrap the text `Net Worth` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$-171`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171');
+```
+
+Your second `td` element should have the text `$136`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136');
+```
+
+Your third `td` element should have the text `$334`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
new file mode 100644
index 0000000000..a48fc24190
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
@@ -0,0 +1,158 @@
+---
+id: 61fd9d9fbdfe078800317055
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Time to style your table. Start by resetting the box model. Create an `html` selector and give it a `box-sizing` property set to `border-box`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have a `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
new file mode 100644
index 0000000000..2830b424ad
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
@@ -0,0 +1,168 @@
+---
+id: 61fda307bde0b091cf7d884a
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Create a `body` selector and give it a `font-family` property set to `sans-serif` and a `color` set to `#0a0a23`.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `font-family` property set to `sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family') === 'sans-serif');
+```
+
+Your `body` selector should have a `color` property set to `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
new file mode 100644
index 0000000000..fb2d7e6f93
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
@@ -0,0 +1,171 @@
+---
+id: 61fda339eadcfd92a6812bed
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Before you get too far into your styling, you should make use of the `sr-only` class. You can use CSS to make elements with this class completely hidden from the visual page, but still be announced by screen readers.
+
+The CSS you are about to write is a common set of properties used to ensure elements are completely hidden visually.
+
+The `span[class~="sr-only"]` selector will select any `span` element whose `class` *includes* `sr-only`. Create that selector, and give it a `border` property set to `0`.
+
+# --hints--
+
+You should have an `span[class~="sr-only"]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]'));
+```
+
+Your `span[class~="sr-only"]` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
new file mode 100644
index 0000000000..546bcc8998
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
@@ -0,0 +1,172 @@
+---
+id: 61fdac1e31692f9a9ad97295
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The CSS `clip` property is used to define the visible portions of an element. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
+
+The `clip-path` property determines the shape the `clip` property should take. Set the `clip-path` property to the value of `inset(50%)`, forming the clip-path into a rectangle within the element.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `clip` property set to `rect(1px, 1px, 1px, 1px)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)');
+```
+
+Your `span[class~="sr-only"]` selector should have a `clip-path` property set to `inset(50%)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
new file mode 100644
index 0000000000..e964962f3f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
@@ -0,0 +1,172 @@
+---
+id: 61fdaea3999cb19d76ce717b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Now you need to size these elements down. Give your `span[class~="sr-only"]` selector a `width` and `height` property set to `1px`.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `width` property set to `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px');
+```
+
+Your `span[class~="sr-only"]` selector should have a `height` property set to `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
new file mode 100644
index 0000000000..2865fbb968
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
@@ -0,0 +1,174 @@
+---
+id: 61fdaf9ff894b6a084ecdc1b
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+To prevent the text content from overflowing, give your `span[class~="sr-only"]` selector an `overflow` property set to `hidden` and a `white-space` property set to `nowrap`.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have an `overflow` property set to `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden');
+```
+
+Your `span[class~="sr-only"]` selector should have a `white-space` property set to `nowrap`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
new file mode 100644
index 0000000000..5a05cb1e81
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
@@ -0,0 +1,182 @@
+---
+id: 61fdafe6f07fd7a1c6785bc2
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Finally, you need to take these hidden elements out of the document flow. Give the `span[class~="sr-only"]` selector a `position` property set to `absolute`, a `padding` property set to `0`, and a `margin` property set to `-1px`. This will ensure that not only are they no longer visible, but they are not even within the page view.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute');
+```
+
+Your `span[class~="sr-only"]` selector should have a `padding` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px');
+```
+
+Your `span[class~="sr-only"]` selector should have a `margin` property set to `-1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
new file mode 100644
index 0000000000..f23a9e5e35
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
@@ -0,0 +1,192 @@
+---
+id: 61fdb04d9939f0a26ca51c2b
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Time to style your table heading. Create an `h1` selector. Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`.
+
+# --hints--
+
+You should have an `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+Your `h1` selector should have a `max-width` property set to `37.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width') === '37.25rem');
+```
+
+Your `h1` selector should have a `margin` property set to `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin') === '0px auto');
+```
+
+Your `h1` selector should have a `padding` property set to `1.5rem 1.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding') === '1.5rem 1.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
new file mode 100644
index 0000000000..04dd430379
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
@@ -0,0 +1,198 @@
+---
+id: 620159cd5431aa34bc6a4c9c
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Target your flex container with an `h1 .flex` selector. Give it a `display` property set to `flex` to enable the flexbox layout. Then set the `flex-direction` property to `column-reverse` - this will display the nested elements from bottom to top. Finally, set the `gap` property to `1rem` to create some space between the elements.
+
+# --hints--
+
+You should have an `h1 .flex` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex'));
+```
+
+Your `h1 .flex` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('display') === 'flex');
+```
+
+Your `h1 .flex` selector should have a `flex-direction` property set to `column-reverse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('flex-direction') === 'column-reverse');
+```
+
+Your `h1 .flex` selector should have a `gap` property set to `1rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
new file mode 100644
index 0000000000..c376c6a27a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
@@ -0,0 +1,194 @@
+---
+id: 62015a5da1c95c358f079ebb
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+The `:first-of-type` pseudo-selector is used to target the first element that matches the selector. Create an `h1 .flex span:first-of-type` selector to target the first `span` element in your `.flex` container. Remember that your `span` elements are reversed, visually, so this will appear to be the second element on the page.
+
+Give your new selector a `font-size` property of `0.7em` to make it look like a sub-heading.
+
+# --hints--
+
+You should have an `h1 .flex span:first-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type'));
+```
+
+Your `h1 .flex span:first-of-type` selector should have a `font-size` property set to `0.7em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.getPropertyValue('font-size') === '0.7em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
new file mode 100644
index 0000000000..988875664f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
@@ -0,0 +1,196 @@
+---
+id: 62015cd2654a1139321a89d2
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+The `:last-of-type` pseudo-selector does the exact opposite - it targets the last element that matches the selector. Create an `h1 .flex span:last-of-type` selector to target the last `span` in your flex container, and give it a `font-size` property set to `1.2em` to make it look like a header.
+
+# --hints--
+
+You should have an `h1 .flex span:last-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type'));
+```
+
+Your `h1 .flex span:last-of-type` selector should have a `font-size` property set to `1.2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.getPropertyValue('font-size') === '1.2em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
new file mode 100644
index 0000000000..bea49bb7f9
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
@@ -0,0 +1,212 @@
+---
+id: 62015d8942384c3aed48329e
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+You wrapped your table in a section element - now you can style that to give your table a border. Create a `section` selector, and give it a `max-width` property set to `40rem` for responsive design. Set the `margin` property to `0 auto` to center it, and set the `border` property to `2px solid #d0d0d5`.
+
+# --hints--
+
+You should have a `section` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section'));
+```
+
+Your `section` selector should have a `max-width` property set to `40rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('max-width') === '40rem');
+```
+
+Your `section` selector should have a `margin` property set to `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('margin') === '0px auto');
+```
+
+Your `section` selector should have a `border` property set to `2px solid #d0d0d5`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('border') === '2px solid rgb(208, 208, 213)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
new file mode 100644
index 0000000000..ec97094732
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
@@ -0,0 +1,224 @@
+---
+id: 620167374bb8b4455cd11125
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+The last part of your table heading is your years. Create a `#years` selector, and enable flexbox. Justify the content to the end of the flex direction, and make the element sticky. Fix it to the top of its container with `top: 0`.
+
+# --hints--
+
+You should have a `#years` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years'));
+```
+
+Your `#years` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex');
+```
+
+Your `#years` selector should have a `justify-content` property set to `flex-end`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('justify-content') === 'flex-end');
+```
+
+Your `#years` selector should have a `position` property set to `sticky`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('position') === 'sticky');
+```
+
+Your `#years` selector should have a `top` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
new file mode 100644
index 0000000000..be6eec61b2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
@@ -0,0 +1,212 @@
+---
+id: 620174ed519dd7506c1a4b61
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Now apply some color to your `#years`. Make the text `#fff` and the background `#0a0a23`.
+
+# --hints--
+
+Your `#years` should have a `color` property set to `#fff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)');
+```
+
+Your `#years` should have a `background-color` property set to `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
new file mode 100644
index 0000000000..9067889bef
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
@@ -0,0 +1,223 @@
+---
+id: 620175b3710a0951cfa86edf
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+The `calc()` function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:
+
+```css
+.example {
+  margin: 10px;
+  width: calc(100% - 20px);
+}
+```
+
+Give `#years` a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+# --hints--
+
+Your `#years` selector should have a `margin` property set to `0 -2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
+```
+
+Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+```js
+const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding');
+assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5rem 0px'].includes(padding));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
new file mode 100644
index 0000000000..bf3e0d8e19
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
@@ -0,0 +1,232 @@
+---
+id: 6201782cc420715562f36271
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Style the text within your `#years` element by creating a `#years span[class]` selector. The `span[class]` syntax will target any `span` element that has a `class` attribute set, regardless of the attribute's value.
+
+Give your new selector a `bold` font, a width of `4.5rem`, and text aligned to the right.
+
+# --hints--
+
+You should have a `#years span[class]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]'));
+```
+
+Your `#years span[class]` selector should have a `font-weight` property set to `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+Your `#years span[class]` selector should have a `width` property set to `4.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('width') === '4.5rem');
+```
+
+Your `#years span[class]` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('text-align') === 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
new file mode 100644
index 0000000000..4c0ab4ab20
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
@@ -0,0 +1,224 @@
+---
+id: 620179bc0a6a2358c72b90ad
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+You wrapped your tables in a container with the `table-wrap` class. Create a selector for that class, and give it a `padding` set to `0 0.75rem 1.5rem 0.75rem`.
+
+# --hints--
+
+You should have a `.table-wrap` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap'));
+```
+
+Your `.table-wrap` selector should have a `padding` property set to `0 0.75rem 1.5rem 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
new file mode 100644
index 0000000000..df7a3d561d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
@@ -0,0 +1,230 @@
+---
+id: 62017b6f47454059bf2d3bd1
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Before you start diving in to the table itself, your `span` elements are currently bolded. Create a `span:not(.sr-only)` selector and give it a `font-weight` property set to `normal`.
+
+The `:not()` pseudo-selector is used to target all elements that do not match the selector - in this case, any of your `span` elements that do not have the `sr-only` class. This ensures that your earlier rules for the `span[class~="sr-only"]` selector are not overwritten.
+
+# --hints--
+
+You should have a `span:not(.sr-only)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
+```
+
+Your `span:not(.sr-only)` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
new file mode 100644
index 0000000000..6563d6a1d2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
@@ -0,0 +1,291 @@
+---
+id: 62017f47c87be96457c49f46
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Rather than having to constantly double-check you are not overwriting your earlier properties, you can use the `!important` keyword to ensure these properties are always applied, regardless of order or specificity.
+
+Give each property in your `span[class~="sr-only"]` selector an `!important` keyword. Do not change any of the values.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have the `border` property set to `0 !important`.
+
+```js
+// log it
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `clip` property set to `rect(1px, 1px, 1px, 1px) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `clip-path` property set to `inset(50%) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip-path: inset(50%) !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `height` property set to `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('height: 1px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `width` property set to `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('width: 1px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `position` property set to `absolute !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('position: absolute !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `overflow` property set to `hidden !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('overflow: hidden !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `white-space` property set to `nowrap !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('white-space: nowrap !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `padding` property set to `0 !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('padding: 0px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `margin` property set to `-1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('margin: -1px !important;'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span:not(.sr-only) {
+  font-weight: normal;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
new file mode 100644
index 0000000000..131df23ce9
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
@@ -0,0 +1,236 @@
+---
+id: 62017fa5bbef406580ceb44f
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Now that you have added the `!important` keyword, you can remove the `:not(.sr-only)` from your `span` selector.
+
+# --hints--
+
+You should not have a `span:not(.sr-only)` selector.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')));
+```
+
+You should have a `span` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span'));
+```
+
+You should not change the `font-weight`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span:not(.sr-only) {
+  font-weight: normal;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
new file mode 100644
index 0000000000..68b9ddf74a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
@@ -0,0 +1,238 @@
+---
+id: 62018243f046a368fab8ffb6
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Create a `table` selector to target your tables. Set the `border-collapse` property to `collapse`, which will allow cell borders to collapse into a single border, instead of a border around each cell. Also set the `border` property to `0` to hide the borders themselves.
+
+# --hints--
+
+You should have a `table` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table'));
+```
+
+Your `table` selector should have a `border-collapse` property set to `collapse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-collapse') === 'collapse');
+```
+
+Your `table` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
new file mode 100644
index 0000000000..37746c9d7e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
@@ -0,0 +1,242 @@
+---
+id: 6201830cb0c74b69f1b41635
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Ensure your table fills its container with a `width` property set to `100%`, then position it relatively and give it a top margin of `3rem`.
+
+# --hints--
+
+Your `table` selector should have a `width` property set to `100%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%');
+```
+
+Your `table` selector should have a `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('position') === 'relative');
+```
+
+Your `table` selector should have a `margin-top` property set to `3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('margin-top') === '3rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+table {
+  border-collapse: collapse;
+  border: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
new file mode 100644
index 0000000000..a59b2617ab
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
@@ -0,0 +1,252 @@
+---
+id: 620186f4b6b8356d2def576b
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Next you need to style your `caption` elements to look more like headers. Create a `table caption` selector. Set the text to have a color of `#356eaf`, a size of `1.3em`, and a normal weight.
+
+# --hints--
+
+You should have a `table caption` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption'));
+```
+
+Your `table caption` selector should have a `color` property set to `#356eaf`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('color') === 'rgb(53, 110, 175)');
+```
+
+Your `table caption` selector should have a `font-size` property set to `1.3em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-size') === '1.3em');
+```
+
+Your `table caption` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
new file mode 100644
index 0000000000..c3938b04ac
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
@@ -0,0 +1,251 @@
+---
+id: 62018ba1aa263770c953be66
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Now give the captions an absolute position, and shift them `-2.25rem` from the top and `0.5rem` from the left.
+
+# --hints--
+
+Your `table caption` selector should have the `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute');
+```
+
+Your `table caption` selector should have the `top` property set to `-2.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('top') === '-2.25rem');
+```
+
+Your `table caption` selector should have the `left` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
new file mode 100644
index 0000000000..5d92ebdef9
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
@@ -0,0 +1,261 @@
+---
+id: 62018c3e94434a71af1d5eaa
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Create a selector to target your `td` elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container.
+
+# --hints--
+
+You should have a `tbody td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td'));
+```
+
+Your `tbody td` selector should have a `width` property set to `100vw`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('width') === '100vw');
+```
+
+Your `tbody td` selector should have a `min-width` property set to `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('min-width') === '4rem');
+```
+
+Your `tbody td` selector should have a `max-width` property set to `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('max-width') === '4rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
new file mode 100644
index 0000000000..842e7f51b6
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
@@ -0,0 +1,255 @@
+---
+id: 62018ec29b3ae674f40bef31
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Now target the `th` elements within your table body, and give them a width of the entire container, less `12rem`.
+
+# --hints--
+
+You should have a `tbody th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th'));
+```
+
+Your `tbody th` selector should have a `width` property set to `calc(100% - 12rem)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('width') === 'calc(100% - 12rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
new file mode 100644
index 0000000000..f20111ca92
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
@@ -0,0 +1,265 @@
+---
+id: 62019093fe30e278e797d2f6
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+The `[attribute="value"]` selector targets any element that has an attribute with a specific value. Create a `tr[class="total"]` selector to target specifically your `tr` elements with the `total` class. Give it a bottom border of `4px double #0a0a23` and make the font bold.
+
+# --hints--
+
+You should have a `tr[class="total"]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]'));
+```
+
+Your `tr[class="total"]` selector should have a `border-bottom` property set to `4px double #0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('border-bottom') === '4px double rgb(10, 10, 35)');
+```
+
+Your `tr[class="total"]` selector should have a `font-weight` property set to `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
new file mode 100644
index 0000000000..da1b2b6db3
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
@@ -0,0 +1,270 @@
+---
+id: 620191707bc65579ddd3ce15
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Using the same selector syntax, target the `th` elements within your table rows where the `class` is `total`. Align the text to the left, and give them a padding of `0.5rem 0 0.25rem 0.5rem`.
+
+# --hints--
+
+You should have a `tr[class="total"] th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th'));
+```
+
+Your `tr[class="total"] th` selector should have a `text-align` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left');
+```
+
+Your `tr[class="total"] th` selector should have a `padding` property set to `0.5rem 0 0.25rem 0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
new file mode 100644
index 0000000000..7b947bb3ee
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
@@ -0,0 +1,277 @@
+---
+id: 620192a767533a7ad19d96d7
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+The key difference between `tr[class="total"]` and `tr.total` is that the first will select `tr` elements where the *only* class is `total`. The second will select `tr` elements where the class *includes* `total`.
+
+In your case, `tr.total` will work. You can use this selector to target all `td` elements within your `.total` rows. Align the text to the right, and give them a padding of `0 0.25rem`.
+
+# --hints--
+
+You should have a `tr.total td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td'));
+```
+
+Your `tr.total td` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('text-align') === 'right');
+```
+
+Your `tr.total td` selector should have a `padding` property set to `0 0.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('padding') === '0px 0.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
new file mode 100644
index 0000000000..40864c9312
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
@@ -0,0 +1,274 @@
+---
+id: 6201995d9ab88e80f1989dce
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+The `:nth-of-type()` pseudo-selector is used to target specific elements based on their order among siblings of the same type. Use this pseudo-selector to target the third `td` element within your `total` table rows. Give it a right padding of `0.5rem`.
+
+# --hints--
+
+You should have a `tr.total td:nth-of-type(3)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)'));
+```
+
+Your `tr.total td:nth-of-type(3)` selector should have a `padding-right` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
new file mode 100644
index 0000000000..d0ec48a16c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
@@ -0,0 +1,278 @@
+---
+id: 620199c7a7a32c81d4db3410
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Give your `tr.total` elements a hover effect that changes the background to `#99c9ff`.
+
+# --hints--
+
+You should have a `tr.total:hover` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover'));
+```
+
+Your `tr.total:hover` selector should have the `background-color` property set to `#99c9ff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyValue('background-color') === 'rgb(153, 201, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
new file mode 100644
index 0000000000..8446e4d528
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
@@ -0,0 +1,284 @@
+---
+id: 6201a1a7af32c287bd6b8183
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Select your `td` elements with the `class` value of `current`, and make the font italic.
+
+# --hints--
+
+You should have a `td.current` selector.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('td.current') || def('td[class="current"]'));
+```
+
+Your `td.current` selector should have the `font-style` property set to `italic`.
+
+```js
+const font = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style');
+assert((font('td.current') || font('td[class="current"]')) === 'italic');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
new file mode 100644
index 0000000000..a1ea3f0dcd
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
@@ -0,0 +1,288 @@
+---
+id: 6201a1cc668a34888f5b2f52
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Select the `tr` elements with the `class` set to `data`. Give them a background image of `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+# --hints--
+
+You should have a `tr.data` selector.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('tr.data') || def('tr[class="data"]'));
+```
+
+Your `tr.data` selector should have the `background-image` property set to `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+```js
+const bg = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('background-image');
+assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
new file mode 100644
index 0000000000..0853021d6c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
@@ -0,0 +1,302 @@
+---
+id: 6201a20d742f5c89736c8cfb
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Select the `th` elements within your `tr.data` elements. Align the text to the left, and give them a top padding of `0.3rem` and a left padding of `0.5rem`.
+
+# --hints--
+
+You should have a `tr.data th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th'));
+```
+
+Your `tr.data th` selector should have a `text-align` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('text-align') === 'left');
+```
+
+Your `tr.data th` selector should have a `padding-top` property set to `0.3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-top') === '0.3rem');
+```
+
+Your `tr.data th` selector should have a `padding-left` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
new file mode 100644
index 0000000000..66cc4c45f6
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
@@ -0,0 +1,320 @@
+---
+id: 6201a42e39bf3b95b6a33bf3
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Create a `tr.data th .description` selector to target the elements with the `class` set to `description` that are within your `th` elements in your `.data` table rows. Give them a block display, make the text italic with a normal weight, and position them with a `padding` set to `1rem 0 0.75rem` and a right margin of `-13.5rem`.
+
+# --hints--
+
+You should have a `tr.data th .description` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description'));
+```
+
+Your `tr.data th .description` selector should have a `display` property set to `block`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('display') === 'block');
+```
+
+Your `tr.data th .description` selector should have a `font-style` property set to `italic`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-style') === 'italic');
+```
+
+Your `tr.data th .description` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-weight') === 'normal');
+```
+
+Your `tr.data th .description` selector should have a `padding` property set to `1rem 0 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('padding') === '1rem 0px 0.75rem');
+```
+
+Your `tr.data th .description` selector should have a `margin-right` property set to `-13.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('margin-right') === '-13.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
new file mode 100644
index 0000000000..55d65268a3
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
@@ -0,0 +1,296 @@
+---
+id: 6201a4adcc6414968b391592
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Your `span` elements now all have more specific styling, which means you can remove your `span` rule.
+
+# --hints--
+
+You should not have a `span` selector.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span {
+  font-weight: normal;
+}
+--fcc-editable-region--
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
new file mode 100644
index 0000000000..74ca4c192b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
@@ -0,0 +1,312 @@
+---
+id: 6201a5258af7b398b030bfaf
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Your dollar amounts are currently misaligned. Create a selector to target the `td` elements within your `tr.data` elements. Vertically align the text to the top, horizontally align the text to the right, and set the padding to `0.3rem 0.25rem 0`.
+
+# --hints--
+
+You should have a `tr.data td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td'));
+```
+
+Your `tr.data td` selector should have a `vertical-align` property set to `top`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('vertical-align') === 'top');
+```
+
+Your `tr.data td` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('text-align') === 'right');
+```
+
+Your `tr.data td` selector should have a `padding` property set to `0.3rem 0.25rem 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('padding') === '0.3rem 0.25rem 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
new file mode 100644
index 0000000000..672e43ac9c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
@@ -0,0 +1,589 @@
+---
+id: 6201a59be346d399c21d10b1
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Create another selector for the `td` elements within your `tr.data` element, but specifically select the last one. Give this a right padding of `0.5rem`.
+
+With this, your balance sheet is complete!
+
+# --hints--
+
+You should have a `tr.data td:last-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type'));
+```
+
+Your `tr.data td:last-of-type` selector should have a `padding-right` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+tr.data td:last-of-type {
+  padding-right: 0.5rem;
+}
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
new file mode 100644
index 0000000000..71388718e0
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
@@ -0,0 +1,209 @@
+---
+id: 64076bbeba941114b0027b6a
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Adding position `sticky` moved the element into its own stack. To ensure your `#years` element does not get hidden by different stacks, add a `z-index` property set to `999` in the `#years` rule.
+
+# --hints--
+
+Your `#years` selector should have a `z-index` property set to `999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index'), '999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
new file mode 100644
index 0000000000..6295eb77a1
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
@@ -0,0 +1,76 @@
+---
+id: 5d822fd413a79914d39e98cc
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Welcome to the CSS Variables Skyline project! Start by adding a `link` element that links your `styles.css` file within the `head` element.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.isNotNull(document.querySelector('link'));
+```
+
+You should not change your existing `head` tags. Make sure you did not delete the closing tag.
+
+```js
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
+```
+
+You should have one void `link` element.
+
+```js
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>    
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
new file mode 100644
index 0000000000..866b58f80c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
@@ -0,0 +1,56 @@
+---
+id: 5d822fd413a79914d39e98cd
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick that helps visualize where elements are and their size. You will remove this later.
+
+# --hints--
+
+You should use the `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+You should use the `border` property to style all the elements.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('border'));
+```
+
+All elements should have a `1px solid black` border.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles?.border, '1px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
new file mode 100644
index 0000000000..1ea4cc4156
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
@@ -0,0 +1,61 @@
+---
+id: 5d822fd413a79914d39e98ce
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements.
+
+# --hints--
+
+You should use the `box-sizing` property.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing'));
+```
+
+You should make use of the existing `*` selector.
+
+```js
+// Two selectors create two CSSStyleRule objects
+assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1);
+```
+
+All elements should have a `box-sizing` of `border-box`.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles.boxSizing, 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+}
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
new file mode 100644
index 0000000000..90efe5f935
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
@@ -0,0 +1,69 @@
+---
+id: 5d822fd413a79914d39e98cf
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport.
+
+# --hints--
+
+You should use the `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` should have a `height` of `100vh`.
+
+```js
+const bodyStyles = new __helpers.CSSHelp(document).getStyle('body');
+assert.equal(bodyStyles?.height, '100vh');
+```
+
+Your `body` should have a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+Your `body` should have the `overflow` property set to `hidden`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
new file mode 100644
index 0000000000..a49b3f5dff
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
@@ -0,0 +1,65 @@
+---
+id: 5d822fd413a79914d39e98d0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+Your `div` element should be within the `body`.
+
+```js
+assert(document.querySelector('div')?.parentElement?.localName === 'body');
+```
+
+Your `div` element should have a class of `background-buildings`
+
+```js
+assert([...document.querySelector('div')?.classList]?.includes('background-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
new file mode 100644
index 0000000000..56eebc0924
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
@@ -0,0 +1,68 @@
+---
+id: 5d822fd413a79914d39e98d1
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Give your `.background-buildings` element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`.
+
+# --hints--
+
+You should use the `background-buildings` class to select the correct element.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings'));
+```
+
+Your `.background-buildings` element should have a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%');
+```
+
+Your `.background-buildings` element should have a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
new file mode 100644
index 0000000000..fe650ce0a4
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
@@ -0,0 +1,83 @@
+---
+id: 5d822fd413a79914d39e98d2
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Nest a `div` with a class of `bb1` in the background buildings container. Open your `styles.css` file, and give `.bb1` a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div').length, 2);
+```
+
+You should give the new `div` a class of `bb1`.
+
+```js
+assert.exists(document.querySelector('div.bb1'));
+```
+
+You should use a `.bb1` class selector to style the element.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1'));
+```
+
+You should give the `.bb1` element a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%');
+```
+
+You should give the `.bb1` element a `height` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
new file mode 100644
index 0000000000..34ef10accb
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
@@ -0,0 +1,105 @@
+---
+id: 5d822fd413a79914d39e98d3
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections.
+
+# --hints--
+
+You should create four new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 6);
+```
+
+You should give one of the new `div` elements a class of `bb1a`.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+You should give one of the new `div` elements a class of `bb1b`.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+You should give one of the new `div` elements a class of `bb1c`.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+You should give one of the new `div` elements a class of `bb1d`.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+```
+
+You should place the new `div` elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d'));
+```
+
+You should place the new `div` elements within the `.bb1` element.
+
+```js
+assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+--fcc-editable-region--
+      <div class="bb1"></div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
new file mode 100644
index 0000000000..cae117f39b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
@@ -0,0 +1,138 @@
+---
+id: 5d822fd413a79914d39e98d4
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container.
+
+# --hints--
+
+You should use a class selector to style `.bb1a`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a'));
+```
+
+You should give `.bb1a` a `width` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%');
+```
+
+You should give `.bb1a` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1b`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b'));
+```
+
+You should give `.bb1b` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%');
+```
+
+You should give `.bb1b` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1c`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c'));
+```
+
+You should give `.bb1c` a `width` of `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%');
+```
+
+You should give `.bb1c` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1d`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d'));
+```
+
+You should give `.bb1d` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%');
+```
+
+You should give `.bb1d` a `height` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
new file mode 100644
index 0000000000..8f84d629f0
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
@@ -0,0 +1,112 @@
+---
+id: 5d822fd413a79914d39e98d5
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Center the parts of your building by turning the `.bb1` element into a flexbox parent. Use the `flex-direction` and `align-items` properties to center the children.
+
+# --hints--
+
+You should not change the `.bb1` `width` or `height` properties.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.width, '10%');
+assert.equal(bb1Style?.height, '70%');
+```
+
+You should give the `.bb1` element a `display` of `flex`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.display, 'flex');
+```
+
+You should give the `.bb1` element a `flex-direction` of `column`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.flexDirection, 'column');
+```
+
+You should give the `.bb1` element a `align-items` of `center`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.alignItems, 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
new file mode 100644
index 0000000000..f08fd7a1d9
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
@@ -0,0 +1,103 @@
+---
+id: 5d822fd413a79914d39e98d6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Now you have something that is resembling a building. You are ready to create your first variable. In the previous lecture videos you learned that variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the rule for the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`.
+
+# --hints--
+
+You should create a new variable named `--building-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1'));
+```
+
+You should define the `--building-color1` variable within `.bb1`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+```
+
+You should give `--building-color1` a value of `#999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
new file mode 100644
index 0000000000..7f714196cb
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
@@ -0,0 +1,100 @@
+---
+id: 5d822fd413a79914d39e98d7
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Whatever value you gave the variable will be applied to whatever property you use it on.
+
+Add the variable `--building-color1` you created in the previous step as the value of the `background-color` property of the `.bb1a` class.
+
+# --hints--
+
+The `background-color` of the `.bb1a` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
new file mode 100644
index 0000000000..01335d8d2d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98d8
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building.
+
+# --hints--
+
+The `background-color` of the `.bb1b` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+The `background-color` of the `.bb1c` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+The `background-color` of the `.bb1d` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
new file mode 100644
index 0000000000..3690866c53
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
@@ -0,0 +1,99 @@
+---
+id: 5d822fd413a79914d39e98d9
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable.
+
+# --hints--
+
+You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+--fcc-editable-region--
+  --building-color1: #999;
+--fcc-editable-region--
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
new file mode 100644
index 0000000000..a614918d18
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98da
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Your first building looks pretty good now. Nest three new `div` elements in the `.background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background.
+
+# --hints--
+
+You should create a `div` with a class of `bb2`.
+
+```js
+assert.exists(document.querySelector('div.bb2'));
+```
+
+You should create a `div` with a class of `bb3`.
+
+```js
+assert.exists(document.querySelector('div.bb3'));
+```
+
+You should create a `div` with a class of `bb4`.
+
+```js
+assert.exists(document.querySelector('div.bb4'));
+```
+
+You should create 3 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 9);
+```
+
+You should place these `div` elements within the `.background-buildings` element.
+
+```js
+assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4);
+```
+
+You should place the elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
new file mode 100644
index 0000000000..b90a51c1f5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98db
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive.
+
+# --hints--
+
+You should give `.bb2` a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%');
+```
+
+You should give `.bb2` a `height` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%');
+```
+
+You should give `.bb3` a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%');
+```
+
+You should give `.bb3` a `height` of `55%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%');
+```
+
+You should give `.bb4` a `width` of `11%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%');
+```
+
+You should give `.bb4` a `height` of `58%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
new file mode 100644
index 0000000000..43c97e479e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
@@ -0,0 +1,127 @@
+---
+id: 5d822fd413a79914d39e98dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+The buildings are currently stacked on top of each other. Align the buildings by turning the `.background-buildings` element into a flexbox parent. Use the `align-items` and `justify-content` properties to evenly space the buildings across the bottom of the element.
+
+# --hints--
+
+You should add a `display` of `flex` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex');
+```
+
+You should add an `align-items` of `flex-end` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end');
+```
+
+You should add a `justify-content` of `space-evenly` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
new file mode 100644
index 0000000000..45cde3a259
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98dd
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+The buildings are too spaced out. Squeeze them together by adding two empty `div` elements to the top of the `.background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center.
+
+# --hints--
+
+You should add two new `div` elements before the `.bb1` element.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('bb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('bb1'));
+```
+
+You should add one new `div` element between the `.bb3` and `.bb4` element.
+
+```js
+assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling);
+```
+
+You should add two new `div` elements after the `.bb4` element.
+
+```js
+const bb4 = document.querySelector('.bb4');
+assert.exists(bb4?.nextElementSibling);
+assert.exists(bb4?.nextElementSibling?.nextElementSibling);
+```
+
+You should add 5 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 14);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
new file mode 100644
index 0000000000..a7617deb09
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
@@ -0,0 +1,140 @@
+---
+id: 5d822fd413a79914d39e98de
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a new variable below your `--building-color1` variable. Name your new variable `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`.
+
+# --hints--
+
+You should define a new property variable called `--building-color2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2'));
+```
+
+You should give `--building-color2` a value of `#66cc99` within the `.bb1` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99');
+```
+
+You should set the `background-color` of `.bb2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor);
+```
+
+You should set the `background-color` using the `--building-color2` variable.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
new file mode 100644
index 0000000000..aa97fc4df8
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98df
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+That didn't work. You should add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`.
+
+# --hints--
+
+You should add a fallback value of `green` to the `background-color` property.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2,green)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
new file mode 100644
index 0000000000..cc38315c42
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98e0
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create a new variable below the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`.
+
+# --hints--
+
+You should define a new property variable called `--building-color3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3'));
+```
+
+You should give `--building-color3` a value of `#cc6699`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+You should set the `background-color` of `.bb3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor);
+```
+
+You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3,pink)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
new file mode 100644
index 0000000000..b146a3017d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
@@ -0,0 +1,155 @@
+---
+id: 5d822fd413a79914d39e98e1
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+That didn't work, because the variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there.
+
+# --hints--
+
+You should declare a `:root` selector at the top of the stylesheet.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root'));
+```
+
+You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff');
+```
+
+You should define `--building-color2` with a value of `#66cc99` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99');
+```
+
+You should define `--building-color3` with a value of `#cc6699` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+You should remove the custom property variables from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
new file mode 100644
index 0000000000..0d71f94d0c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
@@ -0,0 +1,135 @@
+---
+id: 5d822fd413a79914d39e98e2
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now.
+
+# --hints--
+
+You should remove the fallback in the `background-color` from `.bb2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+You should remove the fallback in the `background-color` from `.bb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
new file mode 100644
index 0000000000..9434a0ce33
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
@@ -0,0 +1,144 @@
+---
+id: 5d822fd413a79914d39e98e3
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building.
+
+# --hints--
+
+You should define a new property variable called `--building-color4`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4'));
+```
+
+You should give `--building-color4` a value of `#538cc6` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6');
+```
+
+You should add `background-color: var(--building-color4)` in the `.bb4` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.getPropVal('background-color', true), 'var(--building-color4)')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
new file mode 100644
index 0000000000..7aeec907b2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
@@ -0,0 +1,147 @@
+---
+id: 5d822fd413a79914d39e98e4
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+The background buildings are starting to look pretty good. Create a new `div` below the `.background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 15);
+```
+
+The new `div` should come after the `div.background-buildings` element.
+
+```js
+assert.exists(document.querySelector('div.background-buildings + div'));
+```
+
+Your new `div` should have a class of `foreground-buildings`.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
new file mode 100644
index 0000000000..d1b7b83393
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
@@ -0,0 +1,161 @@
+---
+id: 5d822fd413a79914d39e98e5
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+You want the `.foreground-buildings` container to sit directly on top of the `.background-buildings` element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner.
+
+# --hints--
+
+You should use a `.foreground-buildings` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+You should give the `.foreground-buildings` element a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%');
+```
+
+You should give the `.foreground-buildings` element a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%');
+```
+
+You should give the `.foreground-buildings` element a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute');
+```
+
+You should give the `.foreground-buildings` element a `top` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
new file mode 100644
index 0000000000..dc1a0644b0
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
@@ -0,0 +1,192 @@
+---
+id: 5d822fd413a79914d39e98e6
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground.
+
+# --hints--
+
+You should create a new `div` with a class of `fb1`.
+
+```js
+assert.exists(document.querySelector('div.fb1'));
+```
+
+You should create a new `div` with a class of `fb2`.
+
+```js
+assert.exists(document.querySelector('div.fb2'));
+```
+
+You should create a new `div` with a class of `fb3`.
+
+```js
+assert.exists(document.querySelector('div.fb3'));
+```
+
+You should create a new `div` with a class of `fb4`.
+
+```js
+assert.exists(document.querySelector('div.fb4'));
+```
+
+You should create a new `div` with a class of `fb5`.
+
+```js
+assert.exists(document.querySelector('div.fb5'));
+```
+
+You should create a new `div` with a class of `fb6`.
+
+```js
+assert.exists(document.querySelector('div.fb6'));
+```
+
+You should place these new `div` elements within the `.foreground-buildings` element.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings > div.fb1'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb2'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb3'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb4'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb5'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb6'));
+```
+
+You should place the new `div` elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
new file mode 100644
index 0000000000..215b44f2f3
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e98e7
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`.
+
+# --hints--
+
+You should create a `.fb1` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1'));
+```
+
+You should give the `.fb1` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%');
+```
+
+You should give the `.fb1` selector a `height` of `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%');
+```
+
+You should create a `.fb2` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2'));
+```
+
+You should give the `.fb2` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%');
+```
+
+You should give the `.fb2` selector a `height` of `40%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%');
+```
+
+You should create a `.fb3` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3'));
+```
+
+You should give the `.fb3` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%');
+```
+
+You should give the `.fb3` selector a `height` of `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%');
+```
+
+You should create a `.fb4` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4'));
+```
+
+You should give the `.fb4` selector a `width` of `8%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%');
+```
+
+You should give the `.fb4` selector a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%');
+```
+
+You should create a `.fb5` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5'));
+```
+
+You should give the `.fb5` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%');
+```
+
+You should give the `.fb5` selector a `height` of `33%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%');
+```
+
+You should create a `.fb6` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6'));
+```
+
+You should give the `.fb6` selector a `width` of `9%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%');
+```
+
+You should give the `.fb6` selector a `height` of `38%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
new file mode 100644
index 0000000000..dcfbd1726e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
@@ -0,0 +1,190 @@
+---
+id: 5d822fd413a79914d39e98e8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Add the same `display`, `align-items`, and `justify-content` properties and values to `.foreground-buildings` that you used on `.background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container.
+
+# --hints--
+
+You should give `.foreground-buildings` a `display` property of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex');
+```
+
+You should give `.foreground-buildings` an `align-items` property of `flex-end`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end');
+```
+
+You should give `.foreground-buildings` a `justify-content` property of `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
new file mode 100644
index 0000000000..2e1047c628
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98e9
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+You should optimize your code. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`.
+
+# --hints--
+
+You should not remove the `.foreground-buildings` declaration.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+You should remove the `position` property from `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position);
+```
+
+You should remove the `top` property from `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
+```
+
+You should add the `position` property of `absolute` to `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.position, 'absolute');
+```
+
+You should add the `top` property of `0` to `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.top, '0px');
+```
+
+You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.exists(eitherOr());
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
new file mode 100644
index 0000000000..1147503597
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
@@ -0,0 +1,181 @@
+---
+id: 5d822fd413a79914d39e98ea
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore.
+
+# --hints--
+
+You should delete the whole `.foreground-buildings` style declaration.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
new file mode 100644
index 0000000000..79fd7a2246
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98eb
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`.
+
+# --hints--
+
+You should give `.fb1` a `background-color` using `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.getPropVal('background-color', true), 'var(--building-color4)');
+```
+
+You should give `.fb2` a `background-color` using `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+You should give `.fb3` a `background-color` using `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+You should give `.fb4` a `background-color` using `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+You should give `.fb5` a `background-color` using `--building-color2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+You should give `.fb6` a `background-color` using `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
new file mode 100644
index 0000000000..bb4a29f503
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98ec
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`.
+
+# --hints--
+
+You should add two `div` elements as the first children of `.foreground-buildings`.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('fb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('fb1'));
+```
+
+You should add one `div` element between `.fb2` and `.fb3`.
+
+```js
+assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling);
+```
+
+
+You should add two `div` elements as the last children of `.foreground-buildings`.
+
+```js
+const fb6 = document.querySelector('.fb6');
+assert.exists(fb6?.nextElementSibling);
+assert.exists(fb6?.nextElementSibling?.nextElementSibling);
+```
+
+You should have added 5 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 26);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
new file mode 100644
index 0000000000..288de384a8
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
@@ -0,0 +1,202 @@
+---
+id: 5d822fd413a79914d39e98ed
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings.
+
+# --hints--
+
+You should give `.fb4` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative');
+```
+
+You should give `.fb4` a `left` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%');
+```
+
+You should give `.fb5` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative');
+```
+
+You should give `.fb5` a `right` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
new file mode 100644
index 0000000000..1b950d244f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
@@ -0,0 +1,196 @@
+---
+id: 5d822fd413a79914d39e98ee
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`.
+
+# --hints--
+
+You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector.
+
+```js
+assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code));
+```
+
+You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector.
+
+```js
+assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
new file mode 100644
index 0000000000..022722b6a3
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
@@ -0,0 +1,197 @@
+---
+id: 5d822fd413a79914d39e98ef
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings.
+
+# --hints--
+
+You should create a new variable in `:root` called `--window-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1'));
+```
+
+You should give the property variable `--window-color1` a value of `black`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
new file mode 100644
index 0000000000..d4e4ca6565
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
@@ -0,0 +1,218 @@
+---
+id: 5d822fd413a79914d39e98f0
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+In a previous module you learned that gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this:
+
+```css
+gradient-type(
+  color1,
+  color2
+);
+```
+
+In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a `background` property below the `background-color` property. Set it as a gradient of type `linear-gradient` that uses `--building-color1` as the first color and `--window-color1` as the second.
+
+# --hints--
+
+You should apply a `background` to `.bb1a` right after the `background-color`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+```
+
+You should give the `background` a `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
+```
+
+You should give the `background` a `linear-gradient` starting from `var(--building-color1)`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
+```
+
+You should give the `background` a `linear-gradient` ending at `var(--window-color1)`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
new file mode 100644
index 0000000000..13c9235203
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98f1
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+You want to add the same gradient to the next two sections. Instead of doing that, create a new class selector called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class selector.
+
+# --hints--
+
+You should create a new class selector called `bb1-window`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window'));
+```
+
+You should move the `height` property and value from `.bb1a` to `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%');
+```
+
+You should move the `background` property and value from `.bb1a` to `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+You should not move the `background-color` property from `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+You should not move the `width` property from `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
new file mode 100644
index 0000000000..d2c82337a1
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
@@ -0,0 +1,237 @@
+---
+id: 5d822fd413a79914d39e98f2
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them.
+
+# --hints--
+
+You should not remove the `bb1a` class.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+You should add the `bb1-window` class to the `.bb1a` element.
+
+```js
+assert.exists(document.querySelector('div.bb1a.bb1-window'));
+```
+
+You should not remove the `bb1b` class.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+You should add the `bb1-window` class to the `.bb1b` element.
+
+```js
+assert.exists(document.querySelector('div.bb1b.bb1-window'));
+```
+
+You should not remove the `bb1c` class.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+You should add the `bb1-window` class to the `.bb1c` element.
+
+```js
+assert.exists(document.querySelector('div.bb1c.bb1-window'));
+```
+
+You should not change the `.bb1d` element.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+assert.notExists(document.querySelector('div.bb1d.bb1-window'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
new file mode 100644
index 0000000000..5f4c0d8e10
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
@@ -0,0 +1,222 @@
+---
+id: 5d822fd413a79914d39e98f3
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them.
+
+# --hints--
+
+You should remove the `background-color` from `.bb1a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+You should remove the `height` property from `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height);
+```
+
+You should remove the `background-color` property from `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor);
+```
+
+You should remove the `height` property from `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height);
+```
+
+You should remove the `background-color` property from `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
new file mode 100644
index 0000000000..523c35e8e6
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e98f4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Gradients can use as many colors as you want like this:
+
+```css
+gradient-type(
+  color1,
+  color2,
+  color3
+);
+```
+
+Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property.
+
+# --hints--
+
+You should use the `background` on `.bb1d`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background);
+```
+
+You should give the `background` property a `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient');
+```
+
+You should use `orange` as the first color in the `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange');
+```
+
+You should use `--building-color1` as the second color in the `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)');
+```
+
+You should use `--window-color1` as the third color in the `linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
new file mode 100644
index 0000000000..457fe4acaf
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
@@ -0,0 +1,198 @@
+---
+id: 5d822fd413a79914d39e98f5
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`.
+
+# --hints--
+
+You should remove the `background-color` property and value from `.bb1d`
+
+```js
+assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
new file mode 100644
index 0000000000..d1f3fdc799
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f6
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+You can specify where you want a gradient transition to complete by adding it to the color like this:
+
+```css
+gradient-type(
+  color1,
+  color2 20%,
+  color3
+);
+```
+
+Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action.
+
+# --hints--
+
+You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
new file mode 100644
index 0000000000..0533f06214
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98f7
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half.
+
+# --hints--
+
+You should remove `orange` from the `linear-gradient`.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange');
+```
+
+You should change the now first `linear-gradient` color to transition at `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1) 80%,
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
new file mode 100644
index 0000000000..6bf8b3fe84
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
@@ -0,0 +1,210 @@
+---
+id: 5d822fd413a79914d39e98f8
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building.
+
+# --hints--
+
+You should add two `div` elements to `.bb2`.
+
+```js
+assert.equal(document.querySelector('div.bb2')?.children?.length, 2);
+```
+
+You should give the first `div` a class of `bb2a`.
+
+```js
+assert.exists(document.querySelector('div.bb2a'));
+```
+
+You should give the second `div` a class of `bb2b`.
+
+```js
+assert.exists(document.querySelector('div.bb2b'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+--fcc-editable-region--
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
new file mode 100644
index 0000000000..6fb4f46152
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f9
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later.
+
+# --hints--
+
+You should give `.bb2b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%');
+```
+
+You should give `.bb2b` a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
new file mode 100644
index 0000000000..3a67baddad
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fa
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building.
+
+# --hints--
+
+You should create a new property variable called `window-color2` within `:root`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2'));
+```
+
+You should give `window-color2` a value of `#8cd9b3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
new file mode 100644
index 0000000000..d1924b7bd4
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
@@ -0,0 +1,240 @@
+---
+id: 5d822fd413a79914d39e98fb
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Gradient transitions often gradually change from one color to another. When a more abrupt change is required, the transition can be made with a hard stop like this:
+
+```css
+linear-gradient(
+  var(--first-color) 0%,
+  var(--first-color) 40%,
+  var(--second-color) 40%,
+  var(--second-color) 80%
+);
+```
+
+Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`.
+
+# --hints--
+
+You should give `.bb2b` a `background` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background);
+```
+
+You should use a `linear-gradient` on the `background`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient");
+```
+
+You should use `--building-color2` from `0%` to `6%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/);
+```
+
+You should use `--window-color2` from `6%` to `9%`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%");
+```
+
+`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
new file mode 100644
index 0000000000..d11cd08f03
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fc
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them.
+
+# --hints--
+
+You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
new file mode 100644
index 0000000000..ff29e839ca
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
@@ -0,0 +1,209 @@
+---
+id: 5d822fd413a79914d39e98fd
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore.
+
+# --hints--
+
+You should remove the `background-color` from `.bb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
new file mode 100644
index 0000000000..b11ad202cd
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
@@ -0,0 +1,260 @@
+---
+id: 5d822fd413a79914d39e98fe
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Create and add the following properties to `.bb2a`:
+
+```css
+margin: auto;
+width: 5vw;
+height: 5vw;
+border-top: 1vw solid #000;
+border-bottom: 1vw solid #000;
+border-left: 1vw solid #999;
+border-right: 1vw solid #999;
+```
+
+After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building.
+
+# --hints--
+
+You should give `.bb2a` a `margin` of `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto");
+```
+
+You should give `.bb2a` a `width` of `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw");
+```
+
+You should give `.bb2a` a `height` of `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw");
+```
+
+You should give `.bb2a` a `border-top` of `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)");
+```
+
+You should give `.bb2a` a `border-bottom` of `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)");
+```
+
+You should give `.bb2a` a `border-left` of `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)");
+```
+
+You should give `.bb2a` a `border-right` of `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
new file mode 100644
index 0000000000..162a47660b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
@@ -0,0 +1,238 @@
+---
+id: 5d822fd413a79914d39e98ff
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle.
+
+# --hints--
+
+You should remove the `width` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width);
+```
+
+You should remove the `height` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height);
+```
+
+You should change the `border-left` to use `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)");
+```
+
+You should change the `border-right` to use `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  width: 5vw;
+  height: 5vw;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 1vw solid #999;
+  border-right: 1vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
new file mode 100644
index 0000000000..c5fec5174a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9900
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible.
+
+# --hints--
+
+You should change the `border-left` to use `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent");
+```
+
+You should change the `border-right` to use `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid #999;
+  border-right: 5vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
new file mode 100644
index 0000000000..6bbdfc4dd9
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9901
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building.
+
+# --hints--
+
+You should remove the `margin` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin);
+```
+
+You should remove the `border-top` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
new file mode 100644
index 0000000000..b4ade49d2f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e9902
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end.
+
+# --hints--
+
+You should change `border-bottom` to use `5vh`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh");
+```
+
+You should change `border-bottom` to use `--building-color2`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)");
+```
+
+`border-bottom` should be `5vh solid var(--building-color2)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
new file mode 100644
index 0000000000..860d5af5d1
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9903
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings.
+
+# --hints--
+
+You should define a new property variable `--window-color3`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3"));
+```
+
+You should give `--window-color3` a value of `#d98cb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
new file mode 100644
index 0000000000..7898c0a157
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9904
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this:
+
+```css
+gradient-type(
+  direction,
+  color1,
+  color2
+);
+```
+
+Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`.
+
+# --hints--
+
+You should give `.bb3` a `background` using `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
+```
+
+You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should use `--building-color3` for the first two colors.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)");
+```
+
+You should use `--window-color3` at `15%` for the third color.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
new file mode 100644
index 0000000000..e54093892a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9905
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now.
+
+# --hints--
+
+You should remove the `background-color` from `.bb3`.
+
+```js
+assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
new file mode 100644
index 0000000000..ecd54aa637
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
@@ -0,0 +1,249 @@
+---
+id: 5d822fd413a79914d39e9906
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order.
+
+# --hints--
+
+You should add three `div` elements within `.bb4`.
+
+```js
+assert.equal(document.querySelector("div.bb4")?.children?.length, 3);
+```
+
+You should give the first new `div` a class of `bb4a`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should give the second new `div` a class of `bb4b`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should give the third new `div` a class of `bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4a + div.bb4b"));
+assert.exists(document.querySelector("div.bb4b + div.bb4c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb4"></div>
+--fcc-editable-region--
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
new file mode 100644
index 0000000000..230af5f23f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9907
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`.
+
+# --hints--
+
+You should give `.bb4a` a `width` of `3%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%");
+```
+
+You should give `.bb4a` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%");
+```
+
+You should give `.bb4b` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%");
+```
+
+You should give `.bb4b` a `height` of `5%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%");
+```
+
+You should give `.bb4c` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%");
+```
+
+You should give `.bb4c` a `height` of `85%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
new file mode 100644
index 0000000000..b4bce92acb
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9908
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled.
+
+# --hints--
+
+You should remove the `background-color` from `.bb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor);
+```
+
+You should give `.bb4a` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+You should give `.bb4b` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+You should give `.bb4c` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+}
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
new file mode 100644
index 0000000000..80590e7dcf
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9909
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding.
+
+# --hints--
+
+You should create a new class declaration called `building-wrap`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
new file mode 100644
index 0000000000..9649bd40b5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
@@ -0,0 +1,277 @@
+---
+id: 5d822fd413a79914d39e990a
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class.
+
+# --hints--
+
+You should remove `display` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display);
+```
+
+You should move `display` with a value of `flex` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex");
+```
+
+You should remove `flex-direction` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection);
+```
+
+You should move `flex-direction` with a value of `column` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column");
+```
+
+You should remove `align-items` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems);
+```
+
+You should move `align-items` with a value of `center` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.building-wrap {
+
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
new file mode 100644
index 0000000000..6df3d6c40c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
@@ -0,0 +1,254 @@
+---
+id: 5d822fd413a79914d39e990b
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it.
+
+# --hints--
+
+You should add `building-wrap` to the `.bb1` element.
+
+```js
+assert.exists(document.querySelector("div.bb1.building-wrap"));
+```
+
+You should add `building-wrap` to the `.bb4` element.
+
+```js
+assert.exists(document.querySelector("div.bb4.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+--fcc-editable-region--
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
new file mode 100644
index 0000000000..ccaa99d42b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e990c
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building.
+
+# --hints--
+
+You should define a new property variable `--window-color4`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4"));
+```
+
+You should give `--window-color4` a value of `#8cb3d9`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
new file mode 100644
index 0000000000..a4de0a094a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
@@ -0,0 +1,255 @@
+---
+id: 5d822fd413a79914d39e990d
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building.
+
+# --hints--
+
+You should add four `div` elements to `.bb4c`.
+
+```js
+assert.equal(document.querySelector(".bb4c")?.children?.length, 4);
+```
+
+You should give each new `div` a class of `bb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
new file mode 100644
index 0000000000..f9c206b5ae
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
@@ -0,0 +1,265 @@
+---
+id: 5d822fd413a79914d39e990e
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`.
+
+# --hints--
+
+You should give `.bb4-window` a `width` of `18%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%");
+```
+
+You should give `.bb4-window` a `height` of `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%");
+```
+
+You should give `.bb4-window` a `background-color` of `--window-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
new file mode 100644
index 0000000000..26d3ed042d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
@@ -0,0 +1,279 @@
+---
+id: 5d822fd413a79914d39e990f
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+
+The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `window-wrap`. Make `.window-wrap` a flexbox container, and use the `align-items` and `justify-content` properties to center its child elements vertically and evenly space them in their parent, respectively.
+
+# --hints--
+
+You should create a `.window-wrap` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap"));
+```
+
+You should give `.window-wrap` a `display` of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex");
+```
+
+You should give `.window-wrap` an `align-items` of `center`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center");
+```
+
+You should give `.window-wrap` a `justify-content` of `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
new file mode 100644
index 0000000000..07de740896
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
@@ -0,0 +1,266 @@
+---
+id: 5d822fd413a79914d39e9910
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Add the new `window-wrap` class to the `.bb4c` element.
+
+# --hints--
+
+You should add a class of `window-wrap` to `.bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4c.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
new file mode 100644
index 0000000000..f229fafb01
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
@@ -0,0 +1,291 @@
+---
+id: 5d822fd413a79914d39e9911
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order.
+
+# --hints--
+
+You should add three `div` elements within `.fb1`.
+
+```js
+assert.equal(document.querySelector("div.fb1")?.children?.length, 3);
+```
+
+You should give the first new `div` a class of `fb1a`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1a"));
+```
+
+You should give the second new `div` a class of `fb1b`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1b"));
+```
+
+You should give the third new `div` a class of `fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1c"));
+```
+
+You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1a + div.fb1b"));
+assert.exists(document.querySelector("div.fb1b + div.fb1c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1"></div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
new file mode 100644
index 0000000000..6ad5fc43f3
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
@@ -0,0 +1,287 @@
+---
+id: 5d822fd413a79914d39e9912
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`.
+
+# --hints--
+
+You should give `.fb1b` a `width` of `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%");
+```
+
+You should give `.fb1b` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%");
+```
+
+You should give `.fb1c` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%");
+```
+
+You should give `.fb1c` a `height` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
new file mode 100644
index 0000000000..ea0469fd67
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
@@ -0,0 +1,280 @@
+---
+id: 5d822fd413a79914d39e9913
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Add the `building-wrap` class to the `.fb1` element to center the sections.
+
+# --hints--
+
+You should add the class `building-wrap` to `.fb1`.
+
+```js
+assert.exists(document.querySelector("div.fb1.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
new file mode 100644
index 0000000000..5b271b0f99
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
@@ -0,0 +1,284 @@
+---
+id: 5d822fd413a79914d39e9914
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Move the `background-color` property and value from `.fb1` to `.fb1b`.
+
+# --hints--
+
+You should remove `background-color` from `.fb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor);
+```
+
+You should add a `background-color` of `--building-color4` to `.fb1b`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
new file mode 100644
index 0000000000..e914af1b32
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
@@ -0,0 +1,391 @@
+---
+id: 5d822fd413a79914d39e9915
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+You don't need the `background-color` for this building anymore so you can remove that property.
+
+# --hints--
+
+You should remove the `background-color` of `.fb5`.
+
+```js
+assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
new file mode 100644
index 0000000000..4f6ab3e002
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
@@ -0,0 +1,297 @@
+---
+id: 5d822fd413a79914d39e9916
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building.
+
+Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`.
+
+# --hints--
+
+You should give `.fb1c` a `background` with a `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient");
+```
+
+You should use a direction of `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should use a first color of `--building-color4` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+You should use a second color of `transparent` from `10%` to `15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(transparent10%,transparent15%\)|transparent10%15%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
new file mode 100644
index 0000000000..aea76037d0
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
@@ -0,0 +1,307 @@
+---
+id: 5d822fd413a79914d39e9917
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+You can add multiple gradients to an element by separating them with a comma (`,`) like this:
+
+```css
+gradient1(
+  colors
+),
+gradient2(
+  colors
+);
+```
+
+Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last.
+
+# --hints--
+
+You should not alter the first `repeating-linear-gradient`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/);
+```
+
+You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+You should use a second color of `--window-color4` from `10%` to `90%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(var\(--window-color4\)10%,var\(--window-color4\)90%\)|var\(--window-color4\)10%90%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    )
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
new file mode 100644
index 0000000000..849d448b9a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
@@ -0,0 +1,298 @@
+---
+id: 5d822fd413a79914d39e9918
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements.
+
+# --hints--
+
+You should give `.fb1a` a `border-bottom`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom);
+```
+
+You should use a `border-bottom` of `7vh solid var(--building-color4)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
new file mode 100644
index 0000000000..089b59b3cf
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
@@ -0,0 +1,301 @@
+---
+id: 5d822fd413a79914d39e9919
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide.
+
+# --hints--
+
+You should give `.fb1a` a `border-left` of `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent");
+```
+
+You should give `.fb1a` a `border-right` of `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+}
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
new file mode 100644
index 0000000000..99fb0d6368
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
@@ -0,0 +1,312 @@
+---
+id: 5d822fd413a79914d39e991a
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order.
+
+# --hints--
+
+You should add two `div` elements within `.fb2`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2);
+```
+
+You should give the first new `div` a class of `fb2a`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2a"));
+assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild);
+```
+
+You should give the second new `div` a class of `fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+--fcc-editable-region--
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
new file mode 100644
index 0000000000..a021e0bafe
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
@@ -0,0 +1,314 @@
+---
+id: 5d822fd413a79914d39e991b
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`.
+
+# --hints--
+
+You should give `.fb2a` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%");
+```
+
+You should give `.fb2b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%");
+```
+
+You should give `.fb2b` a `height` of `75%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b"></div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
new file mode 100644
index 0000000000..f050e5dec8
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
@@ -0,0 +1,317 @@
+---
+id: 5d822fd413a79914d39e991c
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building.
+
+# --hints--
+
+You should add three `div` elements within `.fb2b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3);
+```
+
+You should give the three new `div` elements each a class of `fb2-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
new file mode 100644
index 0000000000..fdeac5d1d1
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
@@ -0,0 +1,315 @@
+---
+id: 5d822fd413a79914d39e991d
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Add your `window-wrap` class to `.fb2b` to position the new window elements.
+
+# --hints--
+
+You should add the class `window-wrap` to `.fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2b.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
new file mode 100644
index 0000000000..32508c44ee
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
@@ -0,0 +1,326 @@
+---
+id: 5d822fd413a79914d39e991e
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable.
+
+# --hints--
+
+You should give the `.fb2-window` elements a `width` of `22%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%");
+```
+
+You should give the `.fb2-window` elements a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%");
+```
+
+You should give the `.fb2-window` elements a `background-color` of `--window-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
new file mode 100644
index 0000000000..51ec85b766
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
@@ -0,0 +1,324 @@
+---
+id: 5d822fd413a79914d39e991f
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container.
+
+# --hints--
+
+You should remove the `background-color` property from `.fb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor);
+```
+
+You should give `.fb2b` a `background-color` of `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
new file mode 100644
index 0000000000..309d57ea7c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
@@ -0,0 +1,330 @@
+---
+id: 5d822fd413a79914d39e9920
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape.
+
+# --hints--
+
+You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)");
+```
+
+You should give `.fb2a` a `border-left` of `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent");
+```
+
+You should give `.fb2a` a `border-right` of `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+--fcc-editable-region--
+.fb2a {
+  width: 100%;
+}
+--fcc-editable-region--
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
new file mode 100644
index 0000000000..0347b2e840
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9921
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two.
+
+# --hints--
+
+You should add four `div` elements within `.fb3`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4);
+```
+
+You should give the first new `div` a class of `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a"));
+```
+
+You should give the second new `div` a class of `fb3b`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b"));
+```
+
+You should give the third new `div` a class of `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a"));
+```
+
+You should give the fourth new `div` a class of `fb3b`.
+
+```js
+assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3"></div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
new file mode 100644
index 0000000000..6d78586a55
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
@@ -0,0 +1,347 @@
+---
+id: 5d822fd413a79914d39e9922
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`.
+
+# --hints--
+
+You should give `.fb3a` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%");
+```
+
+You should give `.fb3a` a `height` of `15%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%");
+```
+
+You should give `.fb3b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%");
+```
+
+You should give `.fb3b` a `height` of `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--  
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
new file mode 100644
index 0000000000..9d484855c3
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9923
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`.
+
+# --hints--
+
+You should remove the `background-color` from `.fb3`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor);
+```
+
+You should give `.fb3a` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+You should give `.fb3b` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
new file mode 100644
index 0000000000..9849c03bbc
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
@@ -0,0 +1,340 @@
+---
+id: 5d822fd413a79914d39e9924
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Add your `building-wrap` class to the `.fb3` element to center the sections.
+
+# --hints--
+
+You should add the class `building-wrap` to `.fb3`.
+
+```js
+assert.exists(document.querySelector("div.fb3.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
new file mode 100644
index 0000000000..777990a363
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
@@ -0,0 +1,346 @@
+---
+id: 5d822fd413a79914d39e9925
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section.
+
+# --hints--
+
+You should add three `div` elements within the first `.fb3a` element.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3);
+```
+
+You should give each new `div` a class of `fb3-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a"></div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
new file mode 100644
index 0000000000..2bdf0e99db
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
@@ -0,0 +1,355 @@
+---
+id: 5d822fd413a79914d39e9926
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value.
+
+# --hints--
+
+You should give `.fb3-window` a `width` of `25%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%");
+```
+
+You should give `.fb3-window` a `height` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%");
+```
+
+You should give `.fb3-window` a `background-color` of `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
new file mode 100644
index 0000000000..98bb84bfe6
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
@@ -0,0 +1,350 @@
+---
+id: 5d822fd413a79914d39e9927
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+Add your `window-wrap` class to the `.fb3a` element to center and space the windows.
+
+# --hints--
+
+You should give `.fb3a` a class of `window-wrap`.
+
+```js
+assert.exists(document.querySelector("div.fb3a.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
new file mode 100644
index 0000000000..ed19c0331b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
@@ -0,0 +1,349 @@
+---
+id: 5d822fd413a79914d39e9928
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+With CSS variables you can change values without searching everywhere in the stylesheet. Change the `--window-color1` value to `#bb99ff`.
+
+# --hints--
+
+You should change the value of `--window-color1` to `#bb99ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
new file mode 100644
index 0000000000..cc5626304a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
@@ -0,0 +1,362 @@
+---
+id: 5d822fd413a79914d39e9929
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Only three more buildings to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now.
+
+# --hints--
+
+You should add two `div` elements within `.fb4`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2);
+```
+
+You should give the first new `div` a class of `fb4a`.
+
+```js
+assert.exists(document.querySelector("div.fb4a"));
+```
+
+You should give the second new `div` a class of `fb4b`.
+
+```js
+assert.exists(document.querySelector("div.fb4b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+--fcc-editable-region--
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
new file mode 100644
index 0000000000..e5fef28c8c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
@@ -0,0 +1,359 @@
+---
+id: 5d822fd413a79914d39e992a
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Give `.fb4b` a `width` of `100%` and `height` of `89%`.
+
+# --hints--
+
+You should give `.fb4b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%");
+```
+
+You should give `.fb4b` a `height` of `89%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
new file mode 100644
index 0000000000..544a93886a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
@@ -0,0 +1,361 @@
+---
+id: 5d822fd413a79914d39e992b
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`.
+
+# --hints--
+
+You should remove the `background-color` from `.fb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor);
+```
+
+You should give `.fb4b` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
new file mode 100644
index 0000000000..ce604acaff
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
@@ -0,0 +1,364 @@
+---
+id: 5d822fd413a79914d39e992c
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`.
+
+# --hints--
+
+You should add six `div` elements within `.fb4b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6);
+```
+
+You should give each new `div` a class of `fb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+--fcc-editable-region--
+        <div class="fb4b"></div>
+--fcc-editable-region--
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
new file mode 100644
index 0000000000..3f062a2400
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992d
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building.
+
+# --hints--
+
+You should give `.fb4-window` a `width` of `30%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%");
+```
+
+You should give `.fb4-window` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%");
+```
+
+You should give `.fb4-window` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
new file mode 100644
index 0000000000..d39b2877ef
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
@@ -0,0 +1,374 @@
+---
+id: 5d822fd413a79914d39e992e
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space.
+
+# --hints--
+
+You should give `.fb4-window` a `background-color` of `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+You should give `.fb4-window` a `margin` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
new file mode 100644
index 0000000000..c006f27898
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992f
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+The windows are stacked on top of each other on the rightmost purple building. Turn the building into a flexbox parent, and use the `flex-wrap` property to put the windows side by side, and push them down to a new row when they don't fit.
+
+# --hints--
+
+You should give `.fb4b` a `display` of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex");
+```
+
+You should give `.fb4b` a `flex-wrap` of `wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
new file mode 100644
index 0000000000..6a95d78f33
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
@@ -0,0 +1,381 @@
+---
+id: 5d822fd413a79914d39e9930
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color.
+
+# --hints--
+
+You should give `.fb4a` a `border-top` of `5vh solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent")
+```
+
+You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
new file mode 100644
index 0000000000..cf534fc4d5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
@@ -0,0 +1,404 @@
+---
+id: 5d822fd413a79914d39e9931
+title: Step 106
+challengeType: 0
+dashedName: step-106
+---
+
+# --description--
+
+You can remove the `background-color` for this building now, since it isn't needed.
+
+# --hints--
+
+You should remove the `background-color` of `.fb6`.
+
+```js
+assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
new file mode 100644
index 0000000000..659058a647
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
@@ -0,0 +1,396 @@
+---
+id: 5d822fd413a79914d39e9932
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`.
+
+# --hints--
+
+You should give `.fb5` a `background` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background);
+```
+
+You should give the `background` a `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient");
+```
+
+You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/);
+```
+
+You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
new file mode 100644
index 0000000000..25ba879145
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9933
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows.
+
+# --hints--
+
+You should give `.fb5` a second `repeating-linear-gradient` in the `background` property.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/);
+```
+
+You should give the second `repeating-linear-gradient` a direction of `90deg`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/);
+```
+
+You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/);
+```
+
+You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    )
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
new file mode 100644
index 0000000000..9d6a5a5b02
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9934
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`.
+
+# --hints--
+
+You should add a `repeating-linear-gradient` to `.fb6` in the `background` property.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient");
+```
+
+You should give the `repeating-linear-gradient` a direction of `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
new file mode 100644
index 0000000000..4f27e41fc9
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9935
+title: Step 105
+challengeType: 0
+dashedName: step-105
+---
+
+# --description--
+
+Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors.
+
+# --hints--
+
+You should give `.fb6` a second `repeating-linear-gradient` in the `background` property.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/);
+```
+
+You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+    90deg,
+    var(--building-color3),
+    var(--building-color3) 10%,
+    transparent 10%,
+    transparent 30%
+  )
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
new file mode 100644
index 0000000000..7bd61afd38
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9936
+title: Step 107
+challengeType: 0
+dashedName: step-107
+---
+
+# --description--
+
+Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together.
+
+# --hints--
+
+You should remove the `border` from the `*` selector.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
new file mode 100644
index 0000000000..029d1e069c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
@@ -0,0 +1,403 @@
+---
+id: 5d822fd413a79914d39e9937
+title: Step 108
+challengeType: 0
+dashedName: step-108
+---
+
+# --description--
+
+Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline.
+
+# --hints--
+
+You should add a class of `sky` to `.background-buildings`.
+
+```js
+assert.exists(document.querySelector("div.background-buildings.sky"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
new file mode 100644
index 0000000000..56759e1359
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
@@ -0,0 +1,421 @@
+---
+id: 5d822fd413a79914d39e9938
+title: Step 109
+challengeType: 0
+dashedName: step-109
+---
+
+# --description--
+
+Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun.
+
+# --hints--
+
+You should give `.sky` a `radial-gradient` in the `background` property.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient");
+```
+
+You should give the `radial-gradient` a first color of `#ffcf33`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/);
+```
+
+You should give the `radial-gradient` a second color of `#ffff66` at `21%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/);
+```
+
+You should give the `radial-gradient` a third color of `#bbeeff` at `100%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
new file mode 100644
index 0000000000..80e000e8b6
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
@@ -0,0 +1,410 @@
+---
+id: 5d822fd413a79914d39e9939
+title: Step 110
+challengeType: 0
+dashedName: step-110
+---
+
+# --description--
+
+At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves.
+
+# --hints--
+
+You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.sky {
+  background: radial-gradient(
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
new file mode 100644
index 0000000000..d2ce95a6e6
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
@@ -0,0 +1,422 @@
+---
+id: 5d822fd413a79914d39e993a
+title: Step 111
+challengeType: 0
+dashedName: step-111
+---
+
+# --description--
+
+In the previous module you learned that media queries can be used to change styles based on certain conditions, and they look like this:
+
+```css
+@media (condition) {
+
+}  
+```
+
+Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less.
+
+# --hints--
+
+You should add an empty media query with `max-width: 1000px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
new file mode 100644
index 0000000000..3d0bf68b6e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
@@ -0,0 +1,424 @@
+---
+id: 5d822fd413a79914d39e993b
+title: Step 112
+challengeType: 0
+dashedName: step-112
+---
+
+# --description--
+
+Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night.
+
+Note: You are going to need to scroll past the editable region to copy the class.
+
+# --hints--
+
+You should not delete the existing `.sky` declaration.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/);
+```
+
+You should copy the existing `.sky` declaration into the media query.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+@media (max-width: 1000px) {
+
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
new file mode 100644
index 0000000000..ce748ba40e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
@@ -0,0 +1,437 @@
+---
+id: 5d822fd413a79914d39e993c
+title: Step 113
+challengeType: 0
+dashedName: step-113
+---
+
+# --description--
+
+In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors.
+
+# --hints--
+
+You should change the first color values from `#ffcf33` to `#ccc`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/);
+```
+
+You should change the second color value from `#ffff66` to `#445`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/);
+```
+
+You should change the third color value from `#bbeeff` to `#223`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+closest-corner circle at 15% 15%,
+#ffcf33,
+#ffcf33 20%,
+#ffff66 21%,
+#bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3),
+var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color4),
+var(--building-color4) 10%,
+transparent 10%,
+transparent 15%
+    ),
+    repeating-linear-gradient(
+var(--building-color4),
+var(--building-color4) 10%,
+var(--window-color4) 10%,
+var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 5%,
+transparent 5%,
+transparent 10%
+    ),
+    repeating-linear-gradient(
+90deg,
+var(--building-color2),
+var(--building-color2) 12%,
+var(--window-color2) 12%,
+var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3) 10%,
+transparent 10%,
+transparent 30%
+    ),
+    repeating-linear-gradient(
+var(--building-color3),
+var(--building-color3) 10%,
+var(--window-color3) 10%,
+var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+  closest-corner circle at 15% 15%,
+  #ffcf33,
+  #ffcf33 20%,
+  #ffff66 21%,
+  #bbeeff 100%
+);
+  }
+--fcc-editable-region--
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
new file mode 100644
index 0000000000..57b5bb2de1
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
@@ -0,0 +1,450 @@
+---
+id: 5d822fd413a79914d39e993d
+title: Step 114
+challengeType: 0
+dashedName: step-114
+---
+
+# --description--
+
+Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there.
+
+# --hints--
+
+You should add a `:root` selector to the media query.
+
+```js
+assert.notDeepEqual(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root"), undefined);
+```
+
+You should add `--building-color1` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000");
+```
+
+You should add `--building-color2` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000");
+```
+
+You should add `--building-color3` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000");
+```
+
+You should add `--building-color4` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
new file mode 100644
index 0000000000..2b670dee03
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
@@ -0,0 +1,862 @@
+---
+id: 5d822fd413a79914d39e993e
+title: Step 115
+challengeType: 0
+dashedName: step-115
+---
+
+# --description--
+
+Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night.
+
+Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great!
+
+# --hints--
+
+You should add `--window-color1` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777");
+```
+
+You should add `--window-color2` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777");
+```
+
+You should add `--window-color3` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777");
+```
+
+You should add `--window-color4` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+  }
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+    --window-color1: #777;
+    --window-color2: #777;
+    --window-color3: #777;
+    --window-color4: #777;
+  }
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
new file mode 100644
index 0000000000..6a1bfc5b2b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
@@ -0,0 +1,65 @@
+---
+id: 619665c9abd72906f3ad30f9
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You will be building a happy Flappy Penguin, and further practicing CSS transforms and animations in the process.
+
+Begin with linking your stylesheet to the page.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.exists(document.querySelector('link'));
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
new file mode 100644
index 0000000000..2572b413a4
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
@@ -0,0 +1,56 @@
+---
+id: 61967e74a8e3690ab6292daa
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`.
+
+# --hints--
+
+You should use the `body` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+You should use the `background` property in the `body` selector.
+
+```js
+assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background'));
+```
+
+You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
new file mode 100644
index 0000000000..67e0a51de0
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
@@ -0,0 +1,53 @@
+---
+id: 61968df2acd5550bf1616c34
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Normalize your page's sizing, by removing the `body` element's `margin` and `padding`.
+
+# --hints--
+
+You should give `body` a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+You should give `body` a `padding` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
new file mode 100644
index 0000000000..ec42f16803
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
@@ -0,0 +1,51 @@
+---
+id: 61968e9243a4090cc805531c
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Remove both the horizontal and vertical scrollbars, using only one property.
+
+# --hints--
+
+You should give `body` an `overflow` of `--fcc-expected--`. But found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
new file mode 100644
index 0000000000..75b3097c34
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
@@ -0,0 +1,64 @@
+---
+id: 61968f8877c6720d6d61aaf5
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within the `body`, add a `div` with a `class` of `ground`.
+
+# --hints--
+
+You should add a new `div`.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+You should give the `div` a `class` of `ground`.
+
+```js
+assert.include(document.querySelector('div')?.className, 'ground');
+```
+
+You should place the `div` within the `body`.
+
+```js
+assert.exists(document.querySelector('body > div.ground'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
new file mode 100644
index 0000000000..2e20bd3589
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
@@ -0,0 +1,66 @@
+---
+id: 619691693bc14b0e528f5a20
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`.
+
+# --hints--
+
+You should use the `.ground` selector.
+
+```js
+assert.match(code, /\.ground\s*\{/);
+```
+
+You should give the `.ground` element a `width` of `100vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw');
+```
+
+You should give the `.ground` element a `height` of `400px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
new file mode 100644
index 0000000000..afa5d6f94b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
@@ -0,0 +1,58 @@
+---
+id: 6196928658b6010f28c39484
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`.
+
+# --hints--
+
+You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
new file mode 100644
index 0000000000..606e749c43
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
@@ -0,0 +1,73 @@
+---
+id: 619692ff79f5770fc6d8c0b4
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin.
+
+# --hints--
+
+You should add a new `div` within the `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 2);
+```
+
+You should give the `div` a `class` of `penguin`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin');
+```
+
+You should place `div.penguin` before `div.ground`.
+
+```js
+assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
new file mode 100644
index 0000000000..46ebd08c10
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
@@ -0,0 +1,75 @@
+---
+id: 6196990f966e8f10a40094f6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Target the `.penguin` element, and set its `width` and `height` to `300px`.
+
+# --hints--
+
+You should use the `.penguin` selector.
+
+```js
+assert.match(code, /\.penguin\s*\{/);
+```
+
+You should give `.penguin` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
+```
+
+You should give `.penguin` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
new file mode 100644
index 0000000000..860cde3323
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
@@ -0,0 +1,74 @@
+---
+id: 619699c10a0f6e11591d73c4
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`.
+
+# --hints--
+
+You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto');
+```
+
+You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
new file mode 100644
index 0000000000..3fa5992f53
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
@@ -0,0 +1,83 @@
+---
+id: 61969aa6acef5b12200f672e
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To create some scenery in the background, you will add two mountains.
+
+Above the `.penguin` element, add a `div` with a `class` of `left-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `left-mountain`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain');
+```
+
+You should place `.left-mountain` before `.penguin`.
+
+```js
+assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
new file mode 100644
index 0000000000..3568d09eeb
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
@@ -0,0 +1,89 @@
+---
+id: 61969c487ced6f12db8fef94
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`.
+
+# --hints--
+
+You should use the `.left-mountain` selector.
+
+```js
+assert.match(code, /\.left-mountain\s*\{/);
+```
+
+You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
+```
+
+You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
+```
+
+You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
new file mode 100644
index 0000000000..e8eba6e4ec
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
@@ -0,0 +1,76 @@
+---
+id: 61969d66cfcdba137d021558
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
new file mode 100644
index 0000000000..a182060c6c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
@@ -0,0 +1,91 @@
+---
+id: 61969e7451455614217e901b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by.
+
+Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis.
+
+# --hints--
+
+You should give `.left-mountain` a `transform` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
+```
+
+You should use the `skew` function on `transform`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
+```
+
+You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
new file mode 100644
index 0000000000..dc15f9983e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
@@ -0,0 +1,90 @@
+---
+id: 6196adc17f77a714d51485f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Set the stack level of the mountain element such that it remains directly behind the `.ground` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+You should not change the `z-index` of the `.ground` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
new file mode 100644
index 0000000000..870ce25dc1
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
@@ -0,0 +1,86 @@
+---
+id: 6196aead7ac7bf1584b17a7f
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`.
+
+# --hints--
+
+You should give `.left-mountain` a `margin-top` of `100px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px');
+```
+
+You should give `.ground` a `margin-top` of `-58px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
new file mode 100644
index 0000000000..b6ddd5cad7
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
@@ -0,0 +1,92 @@
+---
+id: 6196ce0415498d2463989e84
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 4);
+```
+
+You should give the `div` a `class` of `back-mountain`.
+
+```js
+assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain');
+```
+
+You should place `.back-mountain` after `.left-mountain`.
+
+```js
+assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
new file mode 100644
index 0000000000..bcbe4d3e9d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
@@ -0,0 +1,100 @@
+---
+id: 6196cee94c6da1253809dff9
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`.
+
+# --hints--
+
+You should use the `.back-mountain` selector.
+
+```js
+assert.match(code, /\.back-mountain\s*\{/);
+```
+
+You should give `.back-mountain` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px');
+```
+
+You should give `.back-mountain` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px');
+```
+
+You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
new file mode 100644
index 0000000000..4bb9ea8634
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
@@ -0,0 +1,87 @@
+---
+id: 6196d00a5d7292262bc02f4c
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.back-mountain` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
new file mode 100644
index 0000000000..d3fd004502
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
@@ -0,0 +1,100 @@
+---
+id: 6196d0cda039d026f7f78d1e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1');
+```
+
+You should not change the `z-index` of the `.left-mountain` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
new file mode 100644
index 0000000000..cdd348db03
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
@@ -0,0 +1,131 @@
+---
+id: 6196d1ac33c68d27dcda5796
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`.
+
+# --hints--
+
+You should use the `transform` property to rotate the element.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.notEmpty(backMountain?.transform);
+} else {
+  assert.notEmpty(backMountain?.rotate);
+}
+```
+
+You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.equal(backMountain?.transform, 'rotate(45deg)');
+} else {
+  assert.equal(backMountain?.rotate, '45deg');
+}
+```
+
+You should give `.back-mountain` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
+```
+
+You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
+```
+
+You should give `.back-mountain` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
+```
+
+You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
new file mode 100644
index 0000000000..151831dbd7
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
@@ -0,0 +1,104 @@
+---
+id: 6196d213d99f16287bff22ae
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`.
+
+# --hints--
+
+You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 5);
+```
+
+You should give the new `div` element a `class` of `sun`.
+
+```js
+assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun');
+```
+
+You should place the new `div` element immediately after the `.back-mountain` element.
+
+```js
+assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
new file mode 100644
index 0000000000..61cf99cfee
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
@@ -0,0 +1,112 @@
+---
+id: 6196d2c0f22ca0293107c048
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`.
+
+# --hints--
+
+You should use the `.sun` selector.
+
+```js
+assert.match(code, /\.sun\s*\{/);
+```
+
+You should give `.sun` a `width` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px');
+```
+
+You should give `.sun` a `height` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px');
+```
+
+You should give `.sun` a `background-color` of `yellow`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
new file mode 100644
index 0000000000..f924e1d525
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
@@ -0,0 +1,105 @@
+---
+id: 6196d32d1340d829f0f6f57d
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle.
+
+# --hints--
+
+You should give `.sun` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute');
+```
+
+You should give `.sun` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
new file mode 100644
index 0000000000..969618185d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
@@ -0,0 +1,107 @@
+---
+id: 6196d41d40bf9b2aaea5d520
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen.
+
+# --hints--
+
+You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px');
+```
+
+You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
new file mode 100644
index 0000000000..1253455f06
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
@@ -0,0 +1,118 @@
+---
+id: 6197cff995d03905b0cca8ad
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Your penguin will consist of two main sections: the head, and the body.
+
+Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`.
+
+# --hints--
+
+You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `penguin-head`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head');
+```
+
+You should give the second `div` a `class` of `penguin-body`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+--fcc-editable-region--
+    <div class="penguin">
+
+    </div>
+--fcc-editable-region--
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
new file mode 100644
index 0000000000..5256d40e7d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
@@ -0,0 +1,125 @@
+---
+id: 6197f40a16afea068c7e60c8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex);
+```
+
+You should give the `.penguin` element a `z-index` of `4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4');
+```
+
+You should give `.penguin` a `position` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position);
+```
+
+You should give `.penguin` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
new file mode 100644
index 0000000000..c34e5dc0b5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
@@ -0,0 +1,65 @@
+---
+id: 6197f667297bb30a552ce017
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`.
+
+# --hints--
+
+You should give `.ground` a `z-index` of `3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+You should give `.ground` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
new file mode 100644
index 0000000000..4f42960c10
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
@@ -0,0 +1,128 @@
+---
+id: 61993b72e874e709b8dfd666
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`.
+
+# --hints--
+
+You should use the `.penguin-head` selector.
+
+```js
+assert.match(code, /\.penguin-head\s*\{/);
+```
+
+You should give `.penguin-head` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%');
+```
+
+You should give `.penguin-head` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`.
+
+```js
+assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
new file mode 100644
index 0000000000..837b66e7b8
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
@@ -0,0 +1,122 @@
+---
+id: 61993cf26a8e0f0a553db223
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+_Most_ penguins do not have a square head.
+
+Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`.
+
+# --hints--
+
+You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`.
+
+```js
+// Maybe check for individual border-radius properties?
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
new file mode 100644
index 0000000000..42992c942d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
@@ -0,0 +1,139 @@
+---
+id: 61993dbb35adf30b10d49e38
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.
+
+# --hints--
+
+You should use the `.penguin-body` selector.
+
+```js
+assert.match(code, /\.penguin-body\s*\{/);
+```
+
+You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
+```
+
+You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
+```
+
+You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
new file mode 100644
index 0000000000..1304f820e2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
@@ -0,0 +1,133 @@
+---
+id: 61993e9adc9e9a0bb4d28fff
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Another interesting fact about penguins is that they do not have square bodies.
+
+Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body.
+
+# --hints--
+
+You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
new file mode 100644
index 0000000000..177fa37ed7
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
@@ -0,0 +1,139 @@
+---
+id: 6199409834ccaf0d10736596
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`.
+
+# --hints--
+
+You should use the `.penguin *` selector.
+
+```js
+assert.match(code, /\.penguin\s*\*\s*\{/);
+```
+
+You should give `.penguin *` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
new file mode 100644
index 0000000000..39d2becaa7
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
@@ -0,0 +1,154 @@
+---
+id: 6199429802b7c10dc79ff871
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-head` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
+```
+
+You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
+```
+
+You should give `.penguin-head` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
+```
+
+You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
new file mode 100644
index 0000000000..06adbcbaed
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
@@ -0,0 +1,156 @@
+---
+id: 619943285a41720e6370d985
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top);
+```
+
+You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%');
+```
+
+You should give `.penguin-body` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left);
+```
+
+You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
new file mode 100644
index 0000000000..841e0fac70
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
@@ -0,0 +1,146 @@
+---
+id: 619943876b706d0f35c01dbc
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex);
+```
+
+You should give the `.penguin-head` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
new file mode 100644
index 0000000000..71620d485d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
@@ -0,0 +1,148 @@
+---
+id: 6199442866286d0ff421a4fc
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string.
+
+# --hints--
+
+You should use the `.penguin-body::before` selector.
+
+```js
+assert.match(code, /\.penguin-body::before\s*\{/);
+```
+
+You should give `.penguin-body::before` a `content` of `""`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
new file mode 100644
index 0000000000..95939a0a79
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
@@ -0,0 +1,145 @@
+---
+id: 619bcf239fc15905ecd66fce
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Position the pseudo-element relative to its closest positioned ancestor.
+
+# --hints--
+
+You should give `.penguin-body::before` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
new file mode 100644
index 0000000000..144a263043
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
@@ -0,0 +1,158 @@
+---
+id: 619be73b3c806006ccc00bb0
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`.
+
+# --hints--
+
+You should give `.penguin-body::before` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
+```
+
+You should give `.penguin-body::before` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%');
+```
+
+You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
new file mode 100644
index 0000000000..32e8d7967e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Position the pseudo-element `10%` from the top and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
new file mode 100644
index 0000000000..f22f0e3944
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
@@ -0,0 +1,160 @@
+---
+id: 619be80062551a080e32c821
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`.
+
+# --hints--
+
+You should use the `border-radius` property to round off the crest.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
+```
+
+You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
new file mode 100644
index 0000000000..1c9a12db86
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
@@ -0,0 +1,152 @@
+---
+id: 619be8ce4ea49008c5bfbc30
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Increase the pseudo-element's transparency by `30%`.
+
+# --hints--
+
+You should give `.penguin-body::before` an `opacity` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
new file mode 100644
index 0000000000..088e47ba55
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
@@ -0,0 +1,166 @@
+---
+id: 619be946958c6009844f1dee
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`.
+
+# --hints--
+
+You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
+```
+
+You should give the second `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
new file mode 100644
index 0000000000..e25cfd80ce
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
@@ -0,0 +1,193 @@
+---
+id: 619c155df0063a0a3fec0e32
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`.
+
+# --hints--
+
+You should use the `.face` selector.
+
+```js
+assert.match(code, /\.face\s*\{/);
+```
+
+You should give `.face` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
+```
+
+You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
+```
+
+You should give `.face` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
+```
+
+You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
+```
+
+You should give `.face` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
+```
+
+You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
new file mode 100644
index 0000000000..999faf2cd7
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
@@ -0,0 +1,165 @@
+---
+id: 619c16debd0c270b01c5ce38
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`.
+
+# --hints--
+
+You should give `.face` a `border-radius` of `70% 70% 60% 60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
new file mode 100644
index 0000000000..1204286781
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
@@ -0,0 +1,169 @@
+---
+id: 619cfdf2e63ddf05feab86ad
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Position the `.face` elements so that they are `15%` from the top.
+
+# --hints--
+
+You should give `.face` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top);
+```
+
+You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
new file mode 100644
index 0000000000..3529e08289
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
@@ -0,0 +1,171 @@
+---
+id: 619d019488f98c06acbbb71a
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Currently, the two `.face` elements are on top of each other.
+
+Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element.
+
+# --hints--
+
+You should give a `class` of `left` to the first `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left');
+```
+
+You should give a `class` of `right` to the second `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
new file mode 100644
index 0000000000..cdb0268e02
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
@@ -0,0 +1,177 @@
+---
+id: 619d022dc8400c0763829a17
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Target the `.face` element with the `left` class, and position it `5%` left of its parent.
+
+# --hints--
+
+You should use the `.face.left` selector.
+
+```js
+assert.match(code, /\.face\.left\s*\{/);
+```
+
+You should give `.face.left` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left);
+```
+
+You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
new file mode 100644
index 0000000000..c81e359b35
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
@@ -0,0 +1,181 @@
+---
+id: 619d02c7bc95bf0827a5d296
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Target the `.face` element with the `right` class, and position it `5%` right of its parent.
+
+# --hints--
+
+You should use the `.face.right` selector.
+
+```js
+assert.match(code, /\.face\.right\s*\{/);
+```
+
+You should give `.face.right` a `right` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
+```
+
+You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+.face.left {
+  left: 5%;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
new file mode 100644
index 0000000000..7101cc6218
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
@@ -0,0 +1,184 @@
+---
+id: 619d033915012509031f309a
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Below the `.face.right` element, add a `div` element with a `class` of `chin`.
+
+# --hints--
+
+You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `chin`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.chin'));
+```
+
+You should place the `div` element below the `.face.right` element.
+
+```js
+assert.exists(document.querySelector('.face.right + .chin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
new file mode 100644
index 0000000000..8ff7447615
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
@@ -0,0 +1,210 @@
+---
+id: 619d03dadadb6509a16f4f5f
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`.
+
+# --hints--
+
+You should use the `.chin` selector.
+
+```js
+assert.match(code, /\.chin\s*\{/);
+```
+
+You should give `.chin` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width);
+```
+
+You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%');
+```
+
+You should give `.chin` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height);
+```
+
+You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%');
+```
+
+You should give `.chin` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor);
+```
+
+You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
new file mode 100644
index 0000000000..9177d13254
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
@@ -0,0 +1,206 @@
+---
+id: 619d0503e03a790a4179d463
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`.
+
+# --hints--
+
+You should give `.chin` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top);
+```
+
+You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%');
+```
+
+You should give `.chin` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left);
+```
+
+You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%');
+```
+
+You should give `.chin` a `border-radius` of `70% 70% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
new file mode 100644
index 0000000000..ca096090f1
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
@@ -0,0 +1,197 @@
+---
+id: 619d05c54dabca0b10058235
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+So far, the `.face` and `.chin` elements have the same `background-color`.
+
+Create a custom CSS property called `--penguin-face`, and set it to `white`.
+
+# --hints--
+
+You should use the `:root` selector.
+
+```js
+assert.match(code, /:root\s*\{/);
+```
+
+You should give `:root` a `--penguin-face` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face'));
+```
+
+You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
new file mode 100644
index 0000000000..207c0664d1
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
@@ -0,0 +1,197 @@
+---
+id: 619d0882f54bf40bdc4671ed
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Where relevant, replace property values with your `--penguin-face` variable.
+
+# --hints--
+
+You should give `.face` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should give `.chin` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should not use `var(--penguin-face)` in the `.penguin-body` selector.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
new file mode 100644
index 0000000000..a7caac10b5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
@@ -0,0 +1,222 @@
+---
+id: 619d090cd8d6db0c93dc5087
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5);
+```
+
+You should give the first new `div` a `class` of `eye`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye'));
+```
+
+You should give the second new `div` a `class` of `eye`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.right'));
+```
+
+You should place `div.eye.left` after `div.chin`.
+
+```js
+assert.exists(document.querySelector('.chin + .eye.left'));
+```
+
+You should place `div.eye.right` after `div.eye.left`.
+
+```js
+assert.exists(document.querySelector('.eye.left + .eye.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
new file mode 100644
index 0000000000..e2f3ce9e93
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
@@ -0,0 +1,207 @@
+---
+id: 619d0b51ca42ed0d74582186
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`.
+
+# --hints--
+
+You should use the `.eye` selector.
+
+```js
+assert.match(code, /\.eye\s*\{/);
+```
+
+You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%');
+```
+
+You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%');
+```
+
+You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
new file mode 100644
index 0000000000..a4e7d18c12
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
@@ -0,0 +1,200 @@
+---
+id: 619d0bc9cb05360e1bf549c3
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%');
+```
+
+You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
new file mode 100644
index 0000000000..b567a24805
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
@@ -0,0 +1,215 @@
+---
+id: 619d0c1594c38c0ebae75878
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent.
+
+# --hints--
+
+You should use the `.eye.left` selector.
+
+```js
+assert.match(code, /\.eye\.left\s*\{/);
+```
+
+You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%');
+```
+
+You should use the `.eye.right` selector.
+
+```js
+assert.match(code, /\.eye\.right\s*\{/);
+```
+
+You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
new file mode 100644
index 0000000000..2d324e7251
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
@@ -0,0 +1,225 @@
+---
+id: 619d0d18ca99870f884a7bff
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Within each `.eye` element, add a `div` with a `class` of `eye-lid`.
+
+# --hints--
+
+You should add one `div` element within `.eye.left`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
+```
+
+You should add one `div` element within `.eye.right`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
+```
+
+You should give the first new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.left > div.eye-lid'));
+```
+
+You should give the second new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.right > div.eye-lid'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+
+        </div>
+        <div class="eye right">
+
+        </div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
new file mode 100644
index 0000000000..224cfce88b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
@@ -0,0 +1,227 @@
+---
+id: 619d0daf214542102739b0da
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`.
+
+# --hints--
+
+You should use the `.eye-lid` selector.
+
+```js
+assert.match(code, /\.eye-lid\s*\{/);
+```
+
+You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%');
+```
+
+You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%');
+```
+
+You should give `.eye-lid` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
new file mode 100644
index 0000000000..e779df5c2d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
@@ -0,0 +1,226 @@
+---
+id: 619d0e56f9ca9710fcb974e3
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%');
+```
+
+You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%');
+```
+
+You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
new file mode 100644
index 0000000000..ed405abe92
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
@@ -0,0 +1,247 @@
+---
+id: 619d0eec0ac40611b41e2ccc
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7);
+```
+
+You should give the first new `div` a `class` of `blush`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush'));
+```
+
+You should give the second new `div` a `class` of `blush`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.right'));
+```
+
+You should place `.blush.right` after `.blush.left`.
+
+```js
+assert.exists(document.querySelector('.blush.left + .blush.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
new file mode 100644
index 0000000000..a346767374
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
@@ -0,0 +1,238 @@
+---
+id: 619d0fc9825c271253df28d4
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`.
+
+# --hints--
+
+You should use the `.blush` selector.
+
+```js
+assert.match(code, /\.blush\s*\{/);
+```
+
+You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%');
+```
+
+You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%');
+```
+
+You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
new file mode 100644
index 0000000000..78310b8e23
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
@@ -0,0 +1,231 @@
+---
+id: 619d102d786c3d13124c37c6
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%');
+```
+
+You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
new file mode 100644
index 0000000000..9431c4764e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
@@ -0,0 +1,246 @@
+---
+id: 619d107edf7ddf13cc77106a
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent.
+
+# --hints--
+
+You should use the `.blush.left` selector.
+
+```js
+assert.match(code, /\.blush\.left\s*\{/);
+```
+
+You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%');
+```
+
+You should use the `.blush.right` selector.
+
+```js
+assert.match(code, /\.blush\.right\s*\{/);
+```
+
+You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
new file mode 100644
index 0000000000..39348186b5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
@@ -0,0 +1,271 @@
+---
+id: 619d10cc98145f14820399c5
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9);
+```
+
+You should give the first new `div` a `class` of `beak`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak'));
+```
+
+You should give the second new `div` a `class` of `beak`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `top`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.top'));
+```
+
+You should give the second new `div` a `class` of `bottom`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.bottom'));
+```
+
+You should place `div.beak.top` after `div.blush.right`.
+
+```js
+assert.exists(document.querySelector('.blush.right + .beak.top'));
+```
+
+You should place `div.beak.bottom` after `div.beak.top`.
+
+```js
+assert.exists(document.querySelector('.beak.top + .beak.bottom'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
new file mode 100644
index 0000000000..ea381856af
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
@@ -0,0 +1,256 @@
+---
+id: 619d115e2adcd71538e82ebb
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should use the `.beak` selector.
+
+```js
+assert.match(code, /\.beak\s*\{/);
+```
+
+You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%');
+```
+
+You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange');
+```
+
+You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
new file mode 100644
index 0000000000..d1617d8dce
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
@@ -0,0 +1,262 @@
+---
+id: 619d11e6d5ef9515d2a16033
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent.
+
+# --hints--
+
+You should use the `.beak.top` selector.
+
+```js
+assert.match(code, /\.beak\.top\s*\{/);
+```
+
+You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%');
+```
+
+You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%');
+```
+
+You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
new file mode 100644
index 0000000000..e580633578
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
@@ -0,0 +1,267 @@
+---
+id: 619d129a417d0716a94de913
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`.
+
+# --hints--
+
+You should use the `.beak.bottom` selector.
+
+```js
+assert.match(code, /\.beak\.bottom\s*\{/);
+```
+
+You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%');
+```
+
+You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%');
+```
+
+You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
new file mode 100644
index 0000000000..4773a10cef
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
@@ -0,0 +1,267 @@
+---
+id: 619d1340361095175f4b5115
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element.
+
+# --hints--
+
+You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
+```
+
+You should give the new `div` a `class` of `shirt`.
+
+```js
+assert.exists(document.querySelector('.penguin > div.shirt'));
+```
+
+You should place the new `div` before `.penguin-body`.
+
+```js
+assert.exists(document.querySelector('.shirt + .penguin-body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
new file mode 100644
index 0000000000..ff117fcdd8
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
@@ -0,0 +1,263 @@
+---
+id: 619d15797b580c1828b05426
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Within the `.shirt` element, add a `div` with the following emoji as content: 💜
+
+# --hints--
+
+You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
+```
+
+You should give the new `div` a content of `💜`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > div')?.textContent, '💜');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
new file mode 100644
index 0000000000..b0330c317b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
@@ -0,0 +1,264 @@
+---
+id: 619d15d955d9d418c4487bbc
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS`
+
+# --hints--
+
+You should add one `p` element within `.shirt`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > p')?.length, 1);
+```
+
+You should give the `p` element the content `I CSS`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+        <div>💜</div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
new file mode 100644
index 0000000000..2ca7d6a5d8
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
@@ -0,0 +1,278 @@
+---
+id: 619d1629a8adc61960ca8b40
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`.
+
+# --hints--
+
+You should use the `.shirt` selector.
+
+```js
+assert.match(code, /\.shirt\s*\{/);
+```
+
+You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px');
+```
+
+You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif');
+```
+
+You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
new file mode 100644
index 0000000000..c21bb0f24d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
@@ -0,0 +1,272 @@
+---
+id: 619d1c5fc9f8941a400955da
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+In some browsers, the _heart_ emoji may look slightly different from the previous step. This is because some of the character's properties were overridden by the `font-weight` style of `bold`.
+
+Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value.
+
+# --hints--
+
+You should use the `.shirt div` selector to target the `div` with the heart emoji.
+
+```js
+assert.match(code, /\.shirt div\s*\{/);
+```
+
+You should give the `.shirt div` a `font-weight` of `initial` or `normal`.
+
+```js
+assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
new file mode 100644
index 0000000000..79b1e394fb
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
@@ -0,0 +1,273 @@
+---
+id: 619d1dab9ff3421ae1976991
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent.
+
+# --hints--
+
+You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px');
+```
+
+You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+.shirt div {
+  font-weight: initial;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
new file mode 100644
index 0000000000..0c23ce14f1
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
@@ -0,0 +1,281 @@
+---
+id: 619d1deb8b04811b8839ffe4
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element.
+
+# --hints--
+
+You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px');
+```
+
+You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px');
+```
+
+You should give the `.shirt` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
new file mode 100644
index 0000000000..e650139f7e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
@@ -0,0 +1,272 @@
+---
+id: 619d1e7a8e81a61c5a819dc4
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+For the shirt's final touch, set the `color` to `#6a6969`.
+
+# --hints--
+
+You should give `.shirt` a `color` of `#6a6969`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
new file mode 100644
index 0000000000..a3dc1fdbf5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
@@ -0,0 +1,306 @@
+---
+id: 619d1ed33c9a071cf657a0d6
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Fun fact: Penguins cannot stand without at least two feet.
+
+Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `foot`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot'));
+```
+
+You should give the second new `div` a `class` of `foot`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.right'));
+```
+
+You should place `.foot.right` after `.foot.left`.
+
+```js
+assert.exists(document.querySelector('.foot.left + .foot.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
new file mode 100644
index 0000000000..f685b84cb6
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
@@ -0,0 +1,295 @@
+---
+id: 619d1fb5d244c31db8a7fdb7
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`.
+
+# --hints--
+
+You should use the `.foot` selector.
+
+```js
+assert.match(code, /\.foot\s*\{/);
+```
+
+You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%');
+```
+
+You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%');
+```
+
+You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
new file mode 100644
index 0000000000..e26cf4e13a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
@@ -0,0 +1,288 @@
+---
+id: 619d204bd73ae51e743b8e94
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%');
+```
+
+You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
new file mode 100644
index 0000000000..b4d5cd859d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
@@ -0,0 +1,304 @@
+---
+id: 619d20b12996101f430920fb
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+The penguin's beak and feet share the same `color`.
+
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-picorna` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna'));
+```
+
+You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange');
+```
+
+You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+  top: 85%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
new file mode 100644
index 0000000000..d2083801b8
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
@@ -0,0 +1,304 @@
+---
+id: 619d21fe6a3f9b2016be9d9d
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent.
+
+# --hints--
+
+You should use the `.foot.left` selector.
+
+```js
+assert.match(code, /\.foot\.left\s*\{/);
+```
+
+You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%');
+```
+
+You should use the `.foot.right` selector.
+
+```js
+assert.match(code, /\.foot\.right\s*\{/);
+```
+
+You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
new file mode 100644
index 0000000000..003b9709c0
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
@@ -0,0 +1,312 @@
+---
+id: 619d229b0e542520cd91c685
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`.
+
+# --hints--
+
+You should give `.foot.left` a `transform` of `rotate(80deg)`.
+
+```js
+const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left');
+
+if (leftFoot?.transform) {
+  assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)');
+} else {
+  assert.equal(leftFoot.getPropVal('rotate', true), '80deg');
+}
+```
+
+You should give `.foot.right` a `transform` of `rotate(-80deg)`.
+
+```js
+const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right');
+
+if (rightFoot?.transform) {
+  assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)');
+} else {
+  assert.equal(rightFoot.getPropVal('rotate', true), '-80deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.foot.left {
+  left: 25%;
+
+}
+
+.foot.right {
+  right: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
new file mode 100644
index 0000000000..ef45038dbc
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
@@ -0,0 +1,295 @@
+---
+id: 619d23089e787e216a7043d6
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element.
+
+# --hints--
+
+You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
new file mode 100644
index 0000000000..906076ce8b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
@@ -0,0 +1,328 @@
+---
+id: 619d237a107c10221ed743fa
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Fun fact: Penguins cannot fly without wings.
+
+Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4);
+```
+
+You should give the first new `div` a `class` of `arm`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm'));
+```
+
+You should give the second new `div` a `class` of `arm`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.right'));
+```
+
+You should place `.arm.right` after `.arm.left`.
+
+```js
+assert.exists(document.querySelector('.arm.left + .arm.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
new file mode 100644
index 0000000000..94dcb78521
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
@@ -0,0 +1,317 @@
+---
+id: 619d26b12e651022d80cd017
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`.
+
+# --hints--
+
+You should use the `.arm` selector.
+
+```js
+assert.match(code, /\.arm\s*\{/);
+```
+
+You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%');
+```
+
+You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
+
+```js
+assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
new file mode 100644
index 0000000000..a3333bcfba
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
@@ -0,0 +1,332 @@
+---
+id: 619d2712853306238f41828e
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-skin` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin'));
+```
+
+You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))');
+```
+
+You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    gray,
+    rgb(209, 210, 199)
+  );
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
new file mode 100644
index 0000000000..b897e4cc61
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
@@ -0,0 +1,340 @@
+---
+id: 619d2b7a84e78b246f2d17a2
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent.
+
+# --hints--
+
+You should use the `.arm.left` selector.
+
+```js
+assert.match(code, /\.arm\.left\s*\{/);
+```
+
+You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%');
+```
+
+You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%');
+```
+
+You should use the `.arm.right` selector.
+
+```js
+assert.match(code, /\.arm\.right\s*\{/);
+```
+
+You should give `.arm.right` a `top` of `0%`.
+
+```js
+assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top);
+```
+
+You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
new file mode 100644
index 0000000000..a677c9a443
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
@@ -0,0 +1,325 @@
+---
+id: 619d2bd9c1d43c2526e96f1f
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent.
+
+# --hints--
+
+You should use the `transform-origin` property to do this.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`.
+
+```js
+assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
new file mode 100644
index 0000000000..ce148c7f62
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
@@ -0,0 +1,326 @@
+---
+id: 619d2d4e80400325ff89664a
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis.
+
+# --hints--
+
+You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left');
+
+if (leftArm?.rotate && leftArm?.transform) {
+  assert.equal(leftArm.getPropVal('rotate', true), '130deg');
+  assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)');
+} else {
+  assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
new file mode 100644
index 0000000000..7b8d308ed3
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
@@ -0,0 +1,326 @@
+---
+id: 619d2ebc81ba81271460850d
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+Rotate the right arm by `45deg` counterclockwise.
+
+# --hints--
+
+You should give `.arm.right` a `transform` of `rotate(-45deg)`.
+
+```js
+const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right');
+
+if (rightArm?.transform) {
+  assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)');
+} else {
+  assert.equal(rightArm?.getPropVal('rotate', true), '-45deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+--fcc-editable-region--
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
new file mode 100644
index 0000000000..cb6dc37d62
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
@@ -0,0 +1,327 @@
+---
+id: 619d2f0e9440bc27caee1cec
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Fun fact: Most, if not all, flippers are not naturally rectangles.
+
+Give the `.arm` elements' top-left, top-right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`.
+
+# --hints--
+
+You should give `.arm` a `border-radius` of `30% 30% 30% 120%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
new file mode 100644
index 0000000000..81854db2b7
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
@@ -0,0 +1,323 @@
+---
+id: 619d2fd3ff4f772882e3d998
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element.
+
+# --hints--
+
+You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
new file mode 100644
index 0000000000..f11d2a97f4
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
@@ -0,0 +1,333 @@
+---
+id: 619d30350883802921bfcccc
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Now, you are going to use CSS animations to make the penguin wave.
+
+Define a new `@keyframes` named `wave`.
+
+# --hints--
+
+You should define a new `@keyframes` rule.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes'));
+```
+
+You should give the `@keyframes` rule a name of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
new file mode 100644
index 0000000000..3294c31569
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
@@ -0,0 +1,351 @@
+---
+id: 619d324f5915c929f36ae91d
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Give `wave` four waypoints starting at `10%`, and incrementing by `10%`.
+
+# --hints--
+
+You should add a `10%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
+```
+
+You should add a `20%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
+```
+
+You should add a `30%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
+```
+
+You should add a `40%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
+```
+
+You should have 4 waypoints in your keyframe.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
new file mode 100644
index 0000000000..74235426b5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
@@ -0,0 +1,347 @@
+---
+id: 619d32c7fa21f32aaa91d499
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%');
+const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, '');
+const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
new file mode 100644
index 0000000000..ac97b33ea2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
@@ -0,0 +1,347 @@
+---
+id: 619d333b738e3c2b5d58b095
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%');
+const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
new file mode 100644
index 0000000000..fd1c9193d0
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
@@ -0,0 +1,362 @@
+---
+id: 619d337765b9f02c10e93722
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+For the third and fourth waypoints, repeat the `transform` pattern once more.
+
+# --hints--
+
+You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%');
+const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%');
+const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
new file mode 100644
index 0000000000..caa7a1fe0a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
@@ -0,0 +1,357 @@
+---
+id: 619d33c51140292cc5a21742
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function.
+
+# --hints--
+
+You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave');
+```
+
+You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s');
+```
+
+You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite');
+```
+
+You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
new file mode 100644
index 0000000000..e8ab0952d4
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
@@ -0,0 +1,347 @@
+---
+id: 619d3482f505452d861d0f62
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions.
+
+# --hints--
+
+You should use the `.penguin:active` selector.
+
+```js
+assert.match(code, /\.penguin:active\s*\{/);
+```
+
+You should give `.penguin:active` a `transform` of `scale(1.5)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
new file mode 100644
index 0000000000..3530454295
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
@@ -0,0 +1,346 @@
+---
+id: 619d3561a951bf2e41a24f10
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+When you activate the `.penguin` element, it might look as though you can drag it around. This is not true.
+
+Indicate this to users, by giving the active element a `cursor` property of `not-allowed`.
+
+# --hints--
+
+You should give `.penguin:active` a `cursor` property of `not-allowed`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin:active {
+  transform: scale(1.5);
+
+}
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
new file mode 100644
index 0000000000..b2fd620c1f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
@@ -0,0 +1,357 @@
+---
+id: 619d36103839c82efa95dd34
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`.
+
+# --hints--
+
+You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s');
+```
+
+You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out');
+```
+
+You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+
+}
+--fcc-editable-region--
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
new file mode 100644
index 0000000000..18d3c26b52
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
@@ -0,0 +1,670 @@
+---
+id: 619d3711d04d623000013e9e
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element.
+
+Congratulations! You have completed the Flappy Penguin Workshop.
+
+# --hints--
+
+You should give `.ground` a `height` of `calc(100vh - 300px)`.
+
+```js
+assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: calc(100vh - 300px);
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
new file mode 100644
index 0000000000..9d306c557a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Normalize your page, by setting the `width` to `100%`, and `height` to `100vh`.
+
+# --hints--
+
+You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
new file mode 100644
index 0000000000..2de5a239c2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
@@ -0,0 +1,43 @@
+---
+id: 61537bb9b1a29430ac15ad38
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Start this project by linking your `styles.css` file to the page.
+
+# --hints--
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
new file mode 100644
index 0000000000..ae7572fa05
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
@@ -0,0 +1,62 @@
+---
+id: 61537c5f81f0cf325b4a854c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Add a `header` element within the `body` element and assign a class of `header` to it.
+
+Inside the `header`, create an `h1` with `css flexbox photo gallery` as the text.
+
+# --hints--
+
+You should have a `header` element within your `body` element.
+
+```js
+assert.exists(document.querySelector('body')?.querySelector('header'));
+```
+
+Your `header` element should have a `class` with `header` as the value.
+
+```js
+assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
+```
+
+Your `header` element should have an `h1` element inside it.
+
+```js
+assert.exists(document.querySelector('.header')?.querySelector('h1'));
+```
+
+Your `h1` element should have the text `css flexbox photo gallery` inside it.
+
+```js
+assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html>
+  <head lang="en">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
new file mode 100644
index 0000000000..7461f43485
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
@@ -0,0 +1,65 @@
+---
+id: 61537c9eecea6a335db6da79
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Below your `.header` element, create a new `div` element and assign it a `class` of `gallery`. This `div` will act as a container for the gallery images.
+
+Inside that `.gallery` element, create nine `img` elements.
+
+# --hints--
+
+You should create a `div` element in your `body` element.
+
+```js
+assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1);
+```
+
+Your new `div` element should have a `class` with `gallery` set as the value.
+
+```js
+assert(document.querySelector('body')?.querySelector('.gallery'));
+```
+
+Your new `div` element should come after your `.header` element.
+
+```js
+assert(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery'));
+```
+
+Your `.gallery` element should have nine `img` elements.
+
+```js
+assert(document.querySelector('.gallery')?.querySelectorAll('img')?.length === 9);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
new file mode 100644
index 0000000000..6766539792
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
@@ -0,0 +1,111 @@
+---
+id: 61537d86bdc3dd343688fceb
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Next, give each `img` a `src` attribute according to its order in the document. The first `img` should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. The rest should be the same, except replace the `1` with the number the `img` is in the document.
+
+# --hints--
+
+All nine of your `img` elements should have a `src` attribute.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('src')));
+```
+
+Your first `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
+```
+
+Your second `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
+```
+
+Your third `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
+```
+
+Your fourth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
+```
+
+Your fifth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
+```
+
+Your sixth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
+```
+
+Your seventh `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
+```
+
+Your eighth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
+```
+
+Your ninth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+--fcc-editable-region--
+    <div class="gallery">
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
new file mode 100644
index 0000000000..c3de674b58
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
@@ -0,0 +1,83 @@
+---
+id: 615380dff67172357fcf0425
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Now your images are too big.
+
+Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`.
+
+Also set the `height` property to `300px` to keep your images a uniform size.
+
+# --hints--
+
+You should have a `.gallery img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
+```
+
+Your `.gallery img` selector should have a `width` property set to `100%` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
+```
+
+Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth, '350px');
+```
+
+Your `.gallery img` selector should have a `height` property set to `300px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height, '300px');
+```
+
+# --seed--
+
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
new file mode 100644
index 0000000000..e3bb0d435b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
@@ -0,0 +1,112 @@
+---
+id: 6153893900438b4643590367
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
+
+Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values.
+
+Add a `border-bottom` with `4px solid #fdb347` as the value.
+
+# --hints--
+
+You should have a `.header` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
+```
+
+Your `.header` selector should have a `text-align` property set to `center` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center');
+```
+
+Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase');
+```
+
+Your `.header` selector should have a `padding` property set to `32px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.padding, '32px');
+```
+
+Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor, 'rgb(10, 10, 35)');
+```
+
+Your `.header` selector should have a `color` property set to `#fff` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.color, 'rgb(255, 255, 255)');
+```
+
+Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom, '4px solid rgb(253, 179, 71)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+body  {
+  margin: 0;
+  font-family: sans-serif;
+  background-color: #f5f6f7;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
new file mode 100644
index 0000000000..3b04a4b69a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
@@ -0,0 +1,93 @@
+---
+id: 6153897c27f6334716ee5abe
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
+
+To use it, give an element a `display` property of `flex`. This will make the element a <em>flex container</em>. Any direct children of a flex container are called <em>flex items</em>.
+
+Create a `.gallery` selector and make it a flex container.
+
+
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `display` property set to `flex` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
new file mode 100644
index 0000000000..7f754c701b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
@@ -0,0 +1,94 @@
+---
+id: 6153908a366afb4d57185c8d
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Flexbox has a main and cross axis. The main axis is defined by the `flex-direction` property, which has four possible values:
+
+- `row` (default): horizontal axis with flex items from left to right
+- `row-reverse`: horizontal axis with flex items from right to left
+- `column`: vertical axis with flex items from top to bottom
+- `column-reverse`: vertical axis with flex items from bottom to top
+
+**Note**: The axes and directions will be different depending on the text direction. The values shown are for a left-to-right text direction.
+
+Try the different values to see how they affect the layout.
+
+When you are done, set an explicit `flex-direction` of `row` on the `.gallery` element.
+
+# --hints--
+
+Your `.gallery` selector should have a `flex-direction` property set to `row` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
new file mode 100644
index 0000000000..60f0140aab
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
@@ -0,0 +1,88 @@
+---
+id: 615392916d83fa4f02f7e2cf
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+
+The `flex-wrap` property determines how your flex items behave when the flex container is too small. Setting it to `wrap` will allow the items to wrap to the next row or column. `nowrap` (default) will prevent your items from wrapping and shrink them if needed.
+
+
+Make it so your flex items wrap to the next row when they run out of space.
+
+# --hints--
+
+Your `.gallery` selector should have a `flex-wrap` property set to `wrap` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap === 'wrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
new file mode 100644
index 0000000000..6f8a34d276
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
@@ -0,0 +1,87 @@
+---
+id: 6153938dce8b294ff8f5a4e9
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.
+
+Give your `.gallery` selector a `justify-content` property with `center` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have a `justify-content` property set to `center` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
new file mode 100644
index 0000000000..8803a6b2e2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
@@ -0,0 +1,88 @@
+---
+id: 6153947986535e5117e60615
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+The `align-items` property positions the flex content along the cross axis. In this case, with your `flex-direction` set to `row`, your cross axis would be vertical.
+
+To vertically center your images, give your `.gallery` selector an `align-items` property with `center` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have an `align-items` property set to `center` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
new file mode 100644
index 0000000000..1994f1565a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
@@ -0,0 +1,104 @@
+---
+id: 61539e07e7430b528fbffe21
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Give your `.gallery` selector a `padding` property set to `20px 10px` to create some space around the container.
+
+Then, give it a `max-width` of `1400px` and add a `margin` of `0 auto` to center it.
+
+# --hints--
+
+Your `.gallery` selector should have a `padding` property set to `20px 10px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingTop, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingBottom, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingLeft, '10px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingRight, '10px');
+```
+
+Your `.gallery` selector should have a `max-width` property set to `1400px` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth === '1400px');
+```
+
+Your `.gallery` element should be centered using a `margin` with `0 auto` as the value.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.gallery').cssText, 'margin: 0px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
new file mode 100644
index 0000000000..fa88f83ba5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
@@ -0,0 +1,92 @@
+---
+id: 61539f32a206bd53ec116465
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Notice how some of your images have become distorted. This is because the images have different aspect ratios. Rather than setting each aspect ratio individually, you can use the `object-fit` property to determine how images should behave.
+
+Give your `.gallery img` selector the `object-fit` property and set it to `cover`. This will tell the image to fill the `img` container while maintaining aspect ratio, resulting in cropping to fit.
+
+# --hints--
+
+Your `.gallery img` selector should have an `object-fit` property set to `cover` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
new file mode 100644
index 0000000000..23268a5f38
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
@@ -0,0 +1,95 @@
+---
+id: 6153a04847abee57a3a406ac
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Your images need some space between them.
+
+The `gap` CSS shorthand property sets the gaps, also known as gutters, between rows and columns. The `gap` property and its `row-gap` and `column-gap` sub-properties provide this functionality for flex, grid, and multi-column layout. You apply the property to the container element.
+
+Give your `.gallery` flex container a `gap` property with `16px` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have a `gap` property with `16px` set as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
new file mode 100644
index 0000000000..639e9b7cb6
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
@@ -0,0 +1,92 @@
+---
+id: 6153a3485f0b20591d26d2a1
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Smooth out your images a bit by giving the `.gallery img` selector a `border-radius` property with `10px` set as the value.
+
+# --hints--
+
+Your `.gallery img` selector should have a `border-radius` property with `10px` set as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
new file mode 100644
index 0000000000..44bec2cf27
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
@@ -0,0 +1,112 @@
+---
+id: 6153a3952facd25a83fe8083
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `::after` pseudo-element creates an element that is the last child of the selected element. You can use it to add an empty element after the last image. If you give it the same `width` as the images it will push the last image to the left when the gallery is in a two-column layout. Right now, it is in the center because you set `justify-content: center` on the flex container.
+
+Example:
+
+```CSS
+.container::after {
+  content: "";
+  width: 860px;
+}
+```
+
+Create a new selector using an `::after` pseudo-element on the `.gallery` element. Add a `content` property set to an empty string `""` and `350px` set for the `width` property.
+
+# --hints--
+
+Your `.gallery::after` selector should have an empty string `""` set for the `content` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\"");
+```
+
+Your `.gallery::after` selector should have `350px` set for the `width` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
new file mode 100644
index 0000000000..971b0ddd65
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
@@ -0,0 +1,181 @@
+---
+id: 6153a3ebb4f7f05b8401b716
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+
+The `alt` image attribute should describe the image content. Screen readers announce the alternative text in place of images. If the image can't be loaded, this text is presented in place of the image.
+
+To complete the project, add an `alt` attribute to all nine of your cat images to describe them. Use a value at least five characters long for each.
+
+
+# --hints--
+
+All nine of your `img` elements should have a `alt` attribute with text describing each image, with each description using at least `5` letters.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('alt')));
+assert(images.every(image => image.getAttribute('alt').length >= 5));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      --fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="Gallery">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
new file mode 100644
index 0000000000..9765d1e93b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
@@ -0,0 +1,92 @@
+---
+id: 615f171d05def3218035dc85
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Remove the margin from your body element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.
+
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `margin` property set to 0 as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
+```
+
+Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
+```
+
+Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
new file mode 100644
index 0000000000..4b6ce33d27
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
@@ -0,0 +1,75 @@
+---
+id: 6493bc0d99879635209565aa
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `border-box` sizing model does the opposite of `content-box`. The total width of the element, including padding and border, will be the explicit width set. The content of the element will shrink to make room for the padding and border.
+
+Change the `box-sizing` property to `border-box`. Notice how your blue image borders now fit within your red gallery border.
+
+# --hints--
+
+
+Your * selector should have a `box-sizing` property set to `border-box` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+--fcc-editable-region--
+ * {
+  box-sizing: content-box;
+}
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
new file mode 100644
index 0000000000..11895a275c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
@@ -0,0 +1,83 @@
+---
+id: 6494da0daf5df5197963671d
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
+
+The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
+
+Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
+
+# --hints--
+
+You should have a `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
+```
+
+Your `*` selector should have its `box-sizing` property set to `content-box`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+  ```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
new file mode 100644
index 0000000000..40a707dd74
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
@@ -0,0 +1,126 @@
+---
+id: 64dd076a1b33c86d84b4232f
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+In order to better visualize how your elements are sized, adding a border can be helpful.
+
+Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
+
+Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
+```
+
+Your `.gallery` selector should have a `width` property set to `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
+```
+
+Your `.gallery` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
+```
+
+Your `.gallery` selector should have a `border` property set to `5px solid red`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
+```
+
+You should have an `img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+Your `img` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
+```
+
+Your `img` selector should have a `width` property set to `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
+```
+
+Your `img` selector should have a `padding` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
+```
+
+Your `img` selector should have a `padding` property set to `5px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
+```
+
+Your `img` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
+```
+
+Your `img` selector should have a `border` property set to `5px solid blue`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
new file mode 100644
index 0000000000..92603787c3
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
@@ -0,0 +1,79 @@
+---
+id: 64dd136e4e8b0894f9c70d86
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.
+
+Remove your `.gallery` and `img` selectors, and all rules within.
+
+# --hints--
+
+You should not have a `.gallery` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+You should not have an `img` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+ * {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md b/curriculum/challenges/german/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
index 091cf6ff24..26f9d08c20 100644
--- a/curriculum/challenges/german/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
+++ b/curriculum/challenges/german/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
@@ -7,7 +7,7 @@ dashedName: step-3
 
 # --description--
 
-To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropraite message in the block of each condition.
+To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropriate message in the block of each condition.
 
 Starting with the duplex loan, check if `annualIncome` is greater than or equal to `minIncomeForDuplex` AND if `creditScore` is greater than `minCreditScoreForDuplex`.
 
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
new file mode 100644
index 0000000000..10c2147f74
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
@@ -0,0 +1,58 @@
+---
+id: 615f2abbe7d18d49a1e0e1c8
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You've been provided with a basic HTML boilerplate.
+
+Create an `h1` element within your `body` element and give it the text `Nutrition Facts`.
+
+# --hints--
+
+You should add a new `h1` element.
+
+```js
+assert.exists(document.querySelector('h1'));
+```
+
+Your `h1` element should be within your `body` element.
+
+```js
+assert(document.querySelector('h1')?.parentElement?.localName === 'body');
+```
+
+Your `h1` element should have the text `Nutrition Facts`.
+
+```js
+assert(document.querySelector('h1')?.innerText === 'Nutrition Facts');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
new file mode 100644
index 0000000000..272ccd55ff
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
@@ -0,0 +1,62 @@
+---
+id: 615f2d4150fe0d4cbd0f2628
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Below your `h1` element, add a `p` element with the text `8 servings per container`.
+
+# --hints--
+
+You should add a new `p` element.
+
+```js
+assert.exists(document.querySelector('p'));
+```
+
+Your `p` element should be within your `body` element.
+
+```js
+assert(document.querySelector('p')?.parentElement?.localName === 'body');
+```
+
+Your `p` element should come after your `h1` element.
+
+```js
+assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1');
+```
+
+Your `p` element should have the text `8 servings per container`.
+
+```js
+assert(document.querySelector('p')?.innerText === '8 servings per container');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
new file mode 100644
index 0000000000..2ae877fe38
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
@@ -0,0 +1,63 @@
+---
+id: 615f34948891834dd77655a6
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Add a second `p` element with the text `Serving size 2/3 cup (55g)`.
+
+# --hints--
+
+You should have a second `p` element.
+
+```js
+assert(document.querySelectorAll('p')?.length === 2);
+```
+
+Your second `p` element should be within your `body` element.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.parentElement?.localName === 'body');
+```
+
+Your second `p` element should come after your existing `p` element.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p');
+```
+
+Your second `p` element should have the text `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
new file mode 100644
index 0000000000..986fa60763
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
@@ -0,0 +1,88 @@
+---
+id: 615f34ecc1091b4fd5a8a484
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Within your `head` element, add a `link` element with the `rel` attribute set to `stylesheet` and the `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+This will import the `Open Sans` font family, with the font weight values `400`, `700`, and `800`.
+
+Also add a `link` element to link your `styles.css` file.
+
+# --hints--
+
+Your code should have two `link` elements.
+
+```js
+assert.strictEqual(document.querySelectorAll('link').length, 2);
+```
+
+Your `link` elements should be void elements, they should not have a end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/);
+```
+
+Your two `link` elements should be inside the `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.strictEqual(headElement.querySelectorAll('link').length, 2);
+```
+
+Both of your `link` elements should have the `rel` attribute set to `stylesheet`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert.isTrue(links.every(link => link.getAttribute('rel') === 'stylesheet'));
+```
+
+One of your `link` elements should have an `href` attribute set to `styles.css`.
+
+```js
+const styleElement = document.querySelector('[data-href]');
+assert.isNotNull(styleElement);
+```
+
+One of your `link` elements should have an `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert.exists(links.find(link => link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
new file mode 100644
index 0000000000..d66790fd30
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
@@ -0,0 +1,55 @@
+---
+id: 615f357957e370510f21ea16
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `body` selector and give it a `font-family` set to `Open Sans` with a fallback of `sans-serif`.
+
+Remember that fonts with spaces in the name must be wrapped in quotes for CSS.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `font-family` property set to `"Open Sans", sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === '"Open Sans", sans-serif');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
new file mode 100644
index 0000000000..82f736ff48
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
@@ -0,0 +1,57 @@
+---
+id: 615f378014c2da526a109c81
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The font is a bit small. Create an `html` selector and set the font to have a size of `16px`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have a `font-size` property set to `16px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
new file mode 100644
index 0000000000..6ceffde047
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
@@ -0,0 +1,66 @@
+---
+id: 615f38279e5c3d53692ea441
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Wrap your `h1` and `p` elements in a `div` element. Give that `div` a `class` attribute set to `label`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelector('div'));
+```
+
+Your new `div` element should have the `class` attribute set to `label`.
+
+```js
+assert(document.querySelector('div')?.classList?.contains('label'));
+```
+
+Your `h1` and `p` elements should be within your new `.label` element.
+
+```js
+const children = [...document.querySelectorAll('h1'), ...document.querySelectorAll('p')];
+assert(children?.every(child => child?.parentElement?.classList?.contains('label')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+--fcc-editable-region--
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
new file mode 100644
index 0000000000..1ea4ac044a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
@@ -0,0 +1,65 @@
+---
+id: 615f38cabc64e3556f98cc1a
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Borders can be used to group and prioritize content.
+
+Create a `.label` selector and give it a `border` set to `2px solid black`.
+
+# --hints--
+
+You should have a `.label` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label'));
+```
+
+Your `.label` selector should have a `border` property set to `2px solid black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
new file mode 100644
index 0000000000..e436f20dcd
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
@@ -0,0 +1,61 @@
+---
+id: 615f3949f58e12577dcefb00
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Good use of white space can bring focus to the important elements of your page, and help guide your user's eyes through your text.
+
+Give your `.label` selector a `width` property set to `270px`.
+
+# --hints--
+
+Your `.label` selector should have a `width` property set to `270px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.width === '270px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
new file mode 100644
index 0000000000..ca53749464
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
@@ -0,0 +1,66 @@
+---
+id: 615f39d7da41b15851fa3fb9
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Give your `.label` selector a `margin` property set to `20px auto`, and a `padding` property set to `0 7px`.
+
+# --hints--
+
+Your `.label` selector should have a `margin` property set to `20px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.margin === '20px auto');
+```
+
+Your `.label` selector should have a `padding` property set to `0 7px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+  width: 270px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
new file mode 100644
index 0000000000..694a4e9ff3
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
@@ -0,0 +1,72 @@
+---
+id: 615f3b091162165948e1cb33
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+If you inspect your `.label` element with your browser's developer tools, you may notice that it's actually 288 pixels wide instead of 270. This is because, by default, the browser includes the border and padding when determining an element's size.
+
+To solve this, reset the box model by creating a `*` selector and giving it a `box-sizing` property of `border-box`.
+
+# --hints--
+
+You should create a `*` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
new file mode 100644
index 0000000000..84ea6cab71
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
@@ -0,0 +1,76 @@
+---
+id: 615f3cafd794015aa9547a6d
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Remember that the use of `h1`, `h2`, and similar tags determine the semantic structure of your HTML. However, you can adjust the CSS of these elements to control the visual flow and hierarchy.
+
+Create an `h1` rule and set the `font-weight` property to `800`. This will make your `h1` text bolder.
+
+# --hints--
+
+You should create an `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+Your `h1` selector should have a `font-weight` property set to `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
new file mode 100644
index 0000000000..fe53466124
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
@@ -0,0 +1,70 @@
+---
+id: 615f3d9e59db4b5b8e960762
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Give your `h1` selector a `text-align` property of `center`.
+
+# --hints--
+
+Your `h1` selector should have a `text-align` property set to `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
new file mode 100644
index 0000000000..0c437fb4e8
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
@@ -0,0 +1,71 @@
+---
+id: 615f3e1b7233ee5c7595771f
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Fine-tune the placement of your `h1` by giving it a top and bottom margin of `-4px` and a left and right margin of `0`.
+
+# --hints--
+
+Your `h1` selector should have a `margin` property set to `-4px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.margin === '-4px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
new file mode 100644
index 0000000000..2448838c5f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
@@ -0,0 +1,80 @@
+---
+id: 615f3e4af8008c5d494d3afe
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Create a `p` selector and remove all margins.
+
+# --hints--
+
+You should create a `p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p'));
+```
+
+Your `p` selector should have a `margin` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
new file mode 100644
index 0000000000..53f6d70c15
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
@@ -0,0 +1,96 @@
+---
+id: 615f3ed16592445e57941aec
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Lines can help separate and group important content, especially when space is limited.
+
+Create a `div` element below your `h1` element, and give it a `class` attribute set to `divider`.
+
+# --hints--
+
+You should create a new `div`.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('divider'));
+```
+
+Your `.divider` element should be within your `.label` element.
+
+```js
+assert(document.querySelector('.label')?.querySelector('.divider'));
+```
+
+Your `.divider` element should come after your `h1` element.
+
+```js
+assert(document.querySelector('.divider')?.previousElementSibling?.localName === 'h1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
new file mode 100644
index 0000000000..f8e43c0a29
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
@@ -0,0 +1,91 @@
+---
+id: 615f405b89a7ec5f8e2d11f4
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Create a selector for your new `.divider` and set the `border-bottom` property to `1px solid #888989`. Also give it a top and bottom margin of `2px`. It should not have any left or right margin.
+
+# --hints--
+
+You should create a `.divider` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider'));
+```
+
+Your `.divider` selector should have a `border-bottom` property set to `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+Your `.divider` selector should have a `margin` property set to `2px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.margin === '2px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
new file mode 100644
index 0000000000..aa3594ecc5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
@@ -0,0 +1,84 @@
+---
+id: 615f40b01f680e608d360ed4
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+The `letter-spacing` property can be used to adjust the space between each character of text in an element.
+
+Give your `h1` selector a `letter-spacing` property set to `0.15px` to space them out a bit more.
+
+# --hints--
+
+Your `h1` selector should have a `letter-spacing` property set to `0.15px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
new file mode 100644
index 0000000000..a1f84535ff
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
@@ -0,0 +1,91 @@
+---
+id: 615f4172e9eec061d6456221
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Nutrition labels have a lot of bold text to draw attention to important information. Rather than targeting each element that needs to be bold, it is more efficient to use a class to apply the bold styling to every element.
+
+Give your second `p` element a `class` attribute set to `bold`.
+
+# --hints--
+
+Your second `p` element should have a `class` attribute set to `bold`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.classList?.contains('bold'));
+```
+
+Your first `p` element should not have a `class` attribute set to `bold`.
+
+```js
+assert(!document.querySelector('p')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
new file mode 100644
index 0000000000..bcbaaf757a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
@@ -0,0 +1,104 @@
+---
+id: 615f41c979787462e76dab90
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Your new class does not have any styling yet. Create a `.bold` selector and give it a `font-weight` property set to `800` to make the text bold.
+
+Go ahead and remove the `font-weight` property from your `h1` selector as well.
+
+# --hints--
+
+You should have a `.bold` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold'));
+```
+
+Your `.bold` selector should have a `font-weight` property set to `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold')?.fontWeight === '800');
+```
+
+Your `h1` selector should not have a `font-weight` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === "");
+```
+
+You should not remove your `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
new file mode 100644
index 0000000000..05d8bb7562
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
@@ -0,0 +1,86 @@
+---
+id: 615f423cf65d5864132a0956
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Give your `h1` element a `class` attribute set to `bold`. This will make the text bold again.
+
+# --hints--
+
+Your `h1` element should have a `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('h1')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
new file mode 100644
index 0000000000..64189f1570
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
@@ -0,0 +1,100 @@
+---
+id: 615f42a021625f656101ef93
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Horizontal spacing between equally important elements can increase the readability of your text.
+
+Wrap the text `2/3 cup (55g)` in a `span` element.
+
+# --hints--
+
+You should create a new `span` element.
+
+```js
+assert(document.querySelector('span'));
+```
+
+Your `span` element should have the text `2/3 cup (55g)`.
+
+```js
+assert(document.querySelector('span')?.textContent?.trim() === '2/3 cup (55g)');
+```
+
+Your `p` element should still have the text `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
new file mode 100644
index 0000000000..686336b2dc
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
@@ -0,0 +1,92 @@
+---
+id: 615f4bfb9de4a16703b56eb6
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now we can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`.
+
+# --hints--
+
+Your `p` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.display === 'flex');
+```
+
+Your `p` selector should have a `justify-content` property set to `space-between`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.justifyContent === 'space-between');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+--fcc-editable-region--
+p {
+  margin: 0;
+}
+--fcc-editable-region--
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
new file mode 100644
index 0000000000..4c960b7219
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
@@ -0,0 +1,104 @@
+---
+id: 615f4ce9d877b668417c0c42
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Wrap everything within the `.label` element in a new `header` element.
+
+# --hints--
+
+You should create a new `header` element.
+
+```js
+assert(document.querySelector('header'));
+```
+
+Your `header` element should be within your `.label` element.
+
+```js
+assert(document.querySelector('header')?.parentElement?.classList?.contains('label'));
+```
+
+Your `h1`, `div`, and `p` elements should be within your new `header` element.
+
+```js
+const children = document.querySelector('header')?.children;
+assert(children?.[0]?.localName === 'h1');
+assert(children?.[1]?.localName === 'div');
+assert(children?.[2]?.localName === 'p');
+assert(children?.[3]?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
new file mode 100644
index 0000000000..ea61500923
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
@@ -0,0 +1,105 @@
+---
+id: 615f4dde9d72e3694cb9ee3b
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Now update your `h1` selector to be `header h1` to specifically target your `h1` element within your new `header`.
+
+# --hints--
+
+You should have a `header h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('header h1'));
+```
+
+You should not have an `h1` selector.
+
+```js
+assert.isNull(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+You should not change any properties in the selector.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('header h1');
+assert(style?.textAlign === 'center');
+assert(style?.margin === '-4px 0px');
+assert(style?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
new file mode 100644
index 0000000000..6830eadac2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
@@ -0,0 +1,105 @@
+---
+id: 615f4ec58334106a4170c2a8
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Create a new `div` element below your `header` element, and give it a `class` attribute set to `divider large`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 3);
+```
+
+Your new `div` element should come after your `header` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` element should have the `class` attribute set to `divider large`.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider'));
+assert(div?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
new file mode 100644
index 0000000000..4fd89a7f1f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
@@ -0,0 +1,111 @@
+---
+id: 615f4f9e4a40566b776a8f38
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Create a new `.large` selector and give it a `height` property set to `10px`. Also create an `.large, .medium` selector and set the `background-color` property to `black`.
+
+# --hints--
+
+You should have a new `.large` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large'));
+```
+
+Your `.large` selector should have a `height` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large')?.height === '10px');
+```
+
+You should have a new `.large, .medium` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium'));
+```
+
+Your `.large, .medium` selector should have a `background-color` property set to `black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.backgroundColor === 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
new file mode 100644
index 0000000000..971d93624c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
@@ -0,0 +1,101 @@
+---
+id: 615f50473cc0196c6dd3892a
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+You may notice there is still a small border at the bottom of your `.large` element. To reset this, give your `.large, .medium` selector a `border` property set to `0`.
+
+Note: the `medium`(medium) class will be utilized later for the thinner bars of the nutrition label.
+
+# --hints--
+
+Your `.large, .medium` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.borderWidth === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+--fcc-editable-region--
+.large, .medium {
+  background-color: black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
new file mode 100644
index 0000000000..47197f64cc
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
@@ -0,0 +1,113 @@
+---
+id: 615f51257a8a516d80b6c743
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Create a new `div` below your `.large` element and give it a `class` attribute set to `calories-info`.
+
+# --hints--
+
+You should create another `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 4);
+```
+
+Your new `div` should have a `class` attribute set to `calories-info`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info'));
+```
+
+Your new `div` should come after the `.large` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
new file mode 100644
index 0000000000..136c3e5dfc
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
@@ -0,0 +1,128 @@
+---
+id: 615f51e4e5b24a6e80eccce1
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Within your `.calories-info` element, create a `div` element. Give that `div` element a `class` attribute set to `left-container`. Within the newly created `div` element, create a `h2` element with the text `Amount per serving`. Give the `h2` element a `class` attribute set to `bold small-text`.
+
+# --hints--
+
+You should create a new `div` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'div');
+```
+
+Your new `div` element should have a `class` attribute set to `left-container`.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('left-container'));
+```
+
+You should create a new `h2` element within your `.left-container` element.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.localName === 'h2');
+```
+
+Your new `h2` element should have a `class` attribute set to `bold small-text`.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('bold'));
+assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('small-text'));
+```
+
+Your new `h2` element should have the text `Amount per serving`.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.innerText === 'Amount per serving');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+    <div class="calories-info">
+
+    </div>
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
new file mode 100644
index 0000000000..c71a25214c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
@@ -0,0 +1,115 @@
+---
+id: 615f522dea4f776f64dc3e91
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `rem` unit stands for `root em`, and is relative to the font size of the `html` element.
+
+Create a `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`).
+
+# --hints--
+
+You should have an `.small-text` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.small-text'));
+```
+
+Your `.small-text` selector should have a `font-size` property set to `0.85rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.small-text')?.fontSize === '0.85rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
new file mode 100644
index 0000000000..deabca353f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
@@ -0,0 +1,143 @@
+---
+id: 615f5486b8fd4b71633f69b0
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Below your `.small-text` element, create a new `p` element with the text `Calories`. Also below the `.left-container` element, create a new `span` element with the text `230`.
+
+# --hints--
+
+You should have a new `p` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.querySelector('p'))
+```
+
+You should have a new `span` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.querySelector('span'))
+```
+
+Your `p` element should come after your `.small-text` element.
+
+```js
+assert(document.querySelector('.small-text')?.nextElementSibling?.localName === 'p');
+```
+
+Your `span` element should come after your `.left-container` element.
+
+```js
+assert(document.querySelector('.left-container')?.nextElementSibling?.localName ==='span');
+```
+
+Your `p` element should have the text `Calories`.
+
+```js
+assert(document.querySelector('.small-text')?.nextElementSibling?.innerText === 'Calories');
+```
+
+Your `span` element should have the text `230`.
+
+```js
+assert(document.querySelector('.left-container')?.nextElementSibling?.innerText === '230');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
new file mode 100644
index 0000000000..14f20ffb78
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
@@ -0,0 +1,144 @@
+---
+id: 615f575b50b91e72af079480
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Create a new `.left-container p` selector setting the top and bottom margin to `-5px`, and the left and right margin to `-2px`. Also set the `font-size` to `2em` and `font-weight` to `700`.
+
+# --hints--
+
+You should have a new `.left-container p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p'));
+```
+
+Your new `.left-container p` selector should have a `margin` property set to `-5px -2px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginTop, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginBottom, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginLeft, '-2px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginRight, '-2px');
+```
+
+Your new `.left-container p` selector should have a `font-size` property set to `2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontSize === '2em');
+```
+
+Your new `.left-container p` selector should have a `font-weight` property set to `700`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontWeight === '700');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
new file mode 100644
index 0000000000..b833b5f471
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
@@ -0,0 +1,141 @@
+---
+id: 615f5af373a68e744a3c5a76
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Create a `.calories-info span` selector, set its `font-size` to `2.4em` and `font-weight` to `700`.
+
+# --hints--
+
+You should create a `.calories-info span` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span'));
+```
+
+Your `.calories-info span` selector should have a `font-size` property set to `2.4em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '2.4em');
+```
+
+Your `.calories-info span` selector should have a `font-weight` property set to `700`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontWeight === '700');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
new file mode 100644
index 0000000000..84d0ba9d98
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
@@ -0,0 +1,134 @@
+---
+id: 615f5fd85d0062761f288364
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Typography is often more art than science. You may have to tweak things like alignment until it looks correct.
+
+Give your `.calories-info span` selector a `margin` set to `-7px -2px`. This will shift your `230` text into place.
+
+# --hints--
+
+Your `.calories-info span` selector should have a `margin` set to `-7px -2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.margin === '-7px -2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+.calories-info span {
+  font-size: 2.4em;
+  font-weight: 700;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
new file mode 100644
index 0000000000..31f049fa2d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
@@ -0,0 +1,141 @@
+---
+id: 615f61338c8ca176d6445574
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider medium`.
+
+# --hints--
+
+You should create a new `div` within your `.label` element.
+
+```js
+assert(document.querySelectorAll('.label > div')?.length === 3)
+```
+
+Your new `div` should have the `class` attribute set to `divider medium`. This div should be the last element in your `.label` element.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider') && div?.classList?.contains('medium'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
new file mode 100644
index 0000000000..f074a2cf76
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
@@ -0,0 +1,142 @@
+---
+id: 615f666ac5edea782feb7e75
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Create an `.medium` selector and give it a `height` property of `5px`.
+
+# --hints--
+
+You should create an `.medium` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.medium'));
+```
+
+Your `.medium` selector should have a `height` property set to `5px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.medium')?.height === '5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
new file mode 100644
index 0000000000..0c0aa78424
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
@@ -0,0 +1,167 @@
+---
+id: 615f671b6d1919792745aa5d
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Create a new `div` element below your `.medium` element. Give it a `class` attribute set to `daily-value small-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `bold right`.
+
+# --hints--
+
+You should create a new `div` element after your `.medium` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('medium'));
+```
+
+Your new `div` should have a `class` attribute set to `daily-value small-text`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value'));
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('small-text'));
+```
+
+Your new `div` element should have a `p` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `% Daily Value *`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *');
+```
+
+Your new `p` element should have a `class` attribute set to `bold right`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    --fcc-editable-region--
+    <div class="divider medium"></div>
+
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
new file mode 100644
index 0000000000..3873e85fbf
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
@@ -0,0 +1,157 @@
+---
+id: 615f6823d0815b7a991f2a75
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Use your existing `.divider` element as an example to add a new divider after the `p` element.
+
+# --hints--
+
+You should create a new `div` within your `.daily-value` element.
+
+```js
+assert(document.querySelectorAll('.daily-value.small-text > div')?.length === 1)
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text > div')?.classList?.contains('divider'))
+```
+
+Your new `div` should come after your `p` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text > div')?.previousElementSibling?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
new file mode 100644
index 0000000000..74ebd1c18c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
@@ -0,0 +1,182 @@
+---
+id: 615f6b2d164f81809efd9bdc
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Then, wrap the text `Total Fat` in one `span` element, the text `10%` in another, and give them each a class of `bold`.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Total Fat 8g 10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g[\s|\n]+10%/));
+```
+
+Your `p` element should have two `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
+```
+
+One `span` element should wrap the text `Total Fat`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat');
+```
+
+The `span` element around `Total Fat` should have the `class` set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.className === 'bold');
+```
+
+A `span` element should wrap the text `10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span + span')?.innerText === '10%');
+```
+
+The `span` element around `10%` should have the `class` set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
new file mode 100644
index 0000000000..de2aab3150
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
@@ -0,0 +1,172 @@
+---
+id: 615f6cc778f7698258467596
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Below your element with the `Total Fat` text, create a new `p` element with the text `Saturated Fat 1g 5%`. Wrap the `5%` in a `span` with the `class` attribute set to `bold`. In this case this is enough to align the percentage to `5%`.
+
+# --hints--
+
+You should create a new `p` element below your element with the `Total Fat` text.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/));
+```
+
+Your new `p` element should have the text `Saturated Fat 1g 5%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.localName === 'span');
+```
+
+Your `span` element should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+Your `span` element should wrap the `5%` text.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === "5%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
new file mode 100644
index 0000000000..5f2aad0b62
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
@@ -0,0 +1,148 @@
+---
+id: 615f6fddaac1e083502d3e6a
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+This new `p` element will need to be indented. Give it a `class` set to `indent`.
+
+# --hints--
+
+Your `p` element with the text `Saturated Fat 1g 5%` should have a `class` attribute set to `indent`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p>Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
new file mode 100644
index 0000000000..2e1a5c3f79
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
@@ -0,0 +1,163 @@
+---
+id: 615f70077a4ff98424236c1e
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create a new `.indent` selector and give it a `margin-left` property set to `1em`.
+
+# --hints--
+
+You should have a new `.indent` selector.
+
+```js
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.indent'));
+```
+
+Your `.indent` selector should have a `margin-left` property set to `1em`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft, '1em');
+```
+
+Your `.indent` selector should only set the `margin-left` property, not other margin properties.
+
+```js
+const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.indent') ?? {};
+assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
new file mode 100644
index 0000000000..1d696789f3
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
@@ -0,0 +1,160 @@
+---
+id: 615f72a872354a850d4f533e
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Create a `.daily-value p` selector to target all of your `p` elements in the `daily-value` section. Give this new selector a `border-bottom` set to `1px solid #888989`.
+
+# --hints--
+
+You should have a new `.daily-value p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+Your `.daily-value p` selector should have a `border-bottom` property set to `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
new file mode 100644
index 0000000000..96cbc9639f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
@@ -0,0 +1,166 @@
+---
+id: 615f74a71f1e498619e38ee8
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+The bottom borders under your `% Daily Value *` and `Saturated Fat 1g 5%` elements do not extend the full width of the label. Add `no-divider` to the `class` for these two elements.
+
+# --hints--
+
+Your `p` element with the text `% Daily Value *` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.firstElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('bold'));
+```
+
+Your `p` element with the text `Saturated Fat 1g 5%` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
new file mode 100644
index 0000000000..d3d0a81e57
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
@@ -0,0 +1,181 @@
+---
+id: 615f7ad94380408d971d14f6
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+The `:not` pseudo-selector can be used to select all elements that do not match the given CSS rule.
+
+```css
+div:not(#example) {
+  color: red;
+}
+```
+
+The above selects all `div` elements without an `id` of `example`.
+
+Modify your `.daily-value p` selector to exclude the `.no-divider` elements.
+
+# --hints--
+
+You should have a `.daily-value p:not(.no-divider)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)'));
+```
+
+You should not have a `.daily-value p` selector.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+You should not change the properties in the `.daily-value p:not(.no-divider)` selector.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)');
+assert(style?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
new file mode 100644
index 0000000000..aac27eb5b6
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
@@ -0,0 +1,165 @@
+---
+id: 615f7bc680f7168ea01ebf99
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Now you will have to add separate dividers below your `.no-divider` elements.
+
+Your first `.no-divider` element has a `.divider` after it. Create another `.divider` after your second `.no-divider` element.
+
+# --hints--
+
+You should create a new `div` at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
new file mode 100644
index 0000000000..6504be1b04
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
@@ -0,0 +1,196 @@
+---
+id: 615f7c71eab8218f846e4503
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+After your last `.divider`, create another `p` element with the text `Trans Fat 0g`. Italicize the word `Trans` by wrapping it in an `i` element. Give the new `p` element the `class` attribute set to `indent no-divider`. Wrap `Trans Fat 0g` in a `span` element for alignment.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Trans Fat 0g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText === 'Trans Fat 0g');
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(p?.classList?.contains('indent'));
+assert(p?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have an `i` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i'));
+```
+
+Your `i` element should wrap the text `Trans`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i')?.innerText === 'Trans');
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span'));
+```
+
+Your `span` element should wrap the text `Trans Fat 0g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText?.match(/Trans[\s|\n]+Fat 0g/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
new file mode 100644
index 0000000000..b038b1dfc2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
@@ -0,0 +1,165 @@
+---
+id: 615f7d489a581590d1350288
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Create another `.divider` after your last `p` element.
+
+# --hints--
+
+You should create a new `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` element should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
new file mode 100644
index 0000000000..ce39f09eae
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
@@ -0,0 +1,215 @@
+---
+id: 615f7de4487b64919bb4aa5e
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Then, wrap the text `Cholesterol` in a `span` element, `0%` in another, and give each of them a class of `bold`.
+
+Finally, nest the `span` element containing the text `Cholesterol` along with the text `0mg`, in an additional `span` element for alignment.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Cholesterol 0mg 0%`.
+
+```js
+const text = document.querySelector('.daily-value.small-text')?.lastElementChild?.textContent?.trim()?.replace(/\n/g, ' ')?.replace(/\s\s+/g, ' ');
+assert(text === 'Cholesterol 0mg 0%');
+```
+
+Your new `p` element should have exactly three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+The text `Cholesterol` should be nested in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
+assert(cholesterolSpan.length === 1);
+```
+
+Your `Cholesterol` `span` should have the `class` attribute set to `bold`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
+assert(cholesterolSpan[0]?.classList?.contains('bold'));
+```
+
+The text `0%` should be nested in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
+assert(zeroPercentSpan.length === 1);
+```
+
+Your `0%` `span` should have the `class` attribute set to `bold`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
+assert(zeroPercentSpan[0]?.classList?.contains('bold'));
+```
+
+Your `Cholesterol` `span` and your `0mg` text should be wrapped in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolZeroSpan = spans.filter(span => span?.innerText === 'Cholesterol 0mg');
+assert(cholesterolZeroSpan.length === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
new file mode 100644
index 0000000000..f165c8568f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
@@ -0,0 +1,205 @@
+---
+id: 615f7e7281626a92bbd62da8
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Put `Sodium` and `7%` each in their own `span` with a class of a `bold` like you did with the others.
+
+Then, add an additional `span` element around `Sodium 160mg` for alignment again.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Sodium 160mg 7%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Sodium[\s|\n]160mg[\s|\n]+7%/));
+```
+
+Your new `p` element should have three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+A `span` element should wrap the text `Sodium 160mg`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/));
+```
+
+A `span` element should wrap the text `Sodium`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === "Sodium");
+```
+
+The `span` around `Sodium` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+A `span` element should wrap the text `7%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '7%');
+```
+
+The `span` element around `7%` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
new file mode 100644
index 0000000000..58d410f432
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
@@ -0,0 +1,210 @@
+---
+id: 615f7ecb09de9a938ef94756
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below your last `p` element, add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Then, wrap the nutrient and amount in a `span` for alignment again.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Total Carbohydrate 37g 13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g[\s|\n]+13%/));
+```
+
+Your new `p` element should have three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+One `span` element should wrap the text `Total Carbohydrate 37g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g/));
+```
+
+One `span` element should wrap the text `Total Carbohydrate`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Total Carbohydrate');
+```
+
+The `span` element around `Total Carbohydrate` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+A `span` element should wrap the text `13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
+```
+
+The `span` element around `13%` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+Your second `span` element should wrap the text `13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
new file mode 100644
index 0000000000..15003310e7
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
@@ -0,0 +1,183 @@
+---
+id: 615f7fa959ab75948f96a0d6
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Below your last `p` element, add another `p` element with the text `Dietary Fiber 4g`. Give the `p` element the `class` necessary to indent it and remove the dividing border. Then create a divider below that `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Dietary Fiber 4g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/));
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
new file mode 100644
index 0000000000..b47f77498e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
@@ -0,0 +1,185 @@
+---
+id: 615f808d85793195b0f53be9
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Create another `p` element after your last `.divider`, and give it the text `Total Sugars 12g`. Assign that `p` element the `class` values necessary to indent it and remove the bottom border. Then create another `.divider` below your new `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Total Sugars 12g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/));
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
new file mode 100644
index 0000000000..d7b411b930
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
@@ -0,0 +1,169 @@
+---
+id: 615f829d07b18f96f6f6684b
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+The advantage to creating these dividers is that you can apply specific classes to style them individually. Add `double-indent` to the `class` for your last `.divider`.
+
+# --hints--
+
+Your last `.divider` element should have `double-indent` added to the `class`. Do not remove the existing value.
+
+```js
+const last = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(last?.classList?.contains('double-indent'));
+assert(last?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      --fcc-editable-region-- 
+      <div class="divider"></div>
+      --fcc-editable-region-- 
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
new file mode 100644
index 0000000000..1c85a5b53a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
@@ -0,0 +1,182 @@
+---
+id: 615f83ef928ec9982b785b6a
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Create a `.double-indent` selector and give it a left margin of `2em`.
+
+# --hints--
+
+You should have a new `.double-indent` selector.
+
+```js
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.double-indent'));
+```
+
+Your `.double-indent` selector should have a `margin-left` property set to `2em`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.double-indent')?.marginLeft, '2em');
+```
+
+Your `.double-indent` selector should only set the `margin-left` property, not other margin properties.
+
+```js
+const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.double-indent') ?? {};
+assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region-- 
+
+--fcc-editable-region-- 
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
new file mode 100644
index 0000000000..a39f4b879c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
@@ -0,0 +1,211 @@
+---
+id: 615f84f246e8ba98e3cd97be
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Below your `.double-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. Your new `p` element should also be double indented, and have no bottom border. Use a `span` to make the `20%` bold and right aligned.
+
+Then create another divider after that `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Includes 10g Added Sugars 20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/));
+```
+
+Your new `p` element should have the `class` attribute set to `double-indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('double-indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.localName === 'span');
+```
+
+Your `span` element should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.classList?.contains('bold'));
+```
+
+Your `span` element should wrap the text `20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type span')?.innerText === '20%');
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
new file mode 100644
index 0000000000..d4af4e85bd
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
@@ -0,0 +1,208 @@
+---
+id: 615f887466db4ba14b5342cc
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+After your last divider, create another `p` element with the text `Protein 3g`. Use the necessary classes to remove the bottom border, and a `span` to make the `Protein` bold. Then wrap the text `Protein 3g` including the new `span` element, in a new `span` element.
+
+Following this element, create a large divider.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Protein 3g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/));
+```
+
+Your new `p` element should have the `class` attribute set to `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+You should have a `span` element with the class `bold` around the text `Protein`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type span.bold')?.innerText === 'Protein');
+```
+
+You should have a `span` element around the text `Protein 3g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text > p:last-of-type > span > span.bold')?.innerText === 'Protein');
+assert(document.querySelector('.daily-value.small-text > p:last-of-type > span')?.innerText === 'Protein 3g');
+```
+
+Your new `div` should have the `class` attribute set to `divider large`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
new file mode 100644
index 0000000000..0477e6cf30
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
@@ -0,0 +1,195 @@
+---
+id: 615f89e055040ba294719d2f
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`.
+
+The `p` element contains only text, you can wrap the percentage in a `span` element so that it is considered a separate entity from the rest of the text, and it's moved to the right.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Vitamin D 2mcg 10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+Your `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
new file mode 100644
index 0000000000..1f4bf4fb22
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
@@ -0,0 +1,219 @@
+---
+id: 615f8bfe0f30a1a3c340356b
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Create another `p` element, give it the text `Calcium 260mg 20%`. Align `20%` to the right. Below that, create a `p` element with the text `Iron 8mg 45%`, aligning the `45%` to the right.
+
+# --hints--
+
+You should create two new `p` elements at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+```
+
+Your first new `p` element should have the text `Calcium 260mg 20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/));
+```
+
+Your first new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span');
+```
+
+Your first `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold'));
+```
+
+Your first `span` element should wrap the text `20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%');
+```
+
+Your second new `p` element should have the text `Iron 8mg 45%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/));
+```
+
+Your second new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.localName === 'span');
+```
+
+Your second `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
new file mode 100644
index 0000000000..9734aee18e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
@@ -0,0 +1,202 @@
+---
+id: 615f8f1223601fa546e93f31
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Create the final `p` element for your `.daily-value` section. Give it the text `Potassium 235mg 6%`. Align the `6%` text to the right, and remove the bottom border of the `p` element.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the `class` attribute set to `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have the text `Potassium 235mg 6%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+Your `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+    </div>
+    --fcc-editable-region--      
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
new file mode 100644
index 0000000000..c098518ca5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
@@ -0,0 +1,211 @@
+---
+id: 615f905fbd1017a65ca224eb
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Add a medium divider after your `.daily-value` element. Below that new divider, create a `p` element with the `class` attribute set to `note`.
+
+Give the `p` element the following text:
+
+```markup
+* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
+```
+
+# --hints--
+
+You should create a new `div` after your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div');
+```
+
+Your new `div` should have the `class` set to `divider medium`.
+
+```js
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('medium'));
+```
+
+You should create a `p` element after your new `div` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the `class` set to `note`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note'));
+```
+
+Your new `p` element should have the provided text.
+
+```js
+assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    --fcc-editable-region--      
+
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
new file mode 100644
index 0000000000..0dd1ac2ee2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
@@ -0,0 +1,196 @@
+---
+id: 615f94786869e1a7fec54375
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Create a `.note` selector, and set the size of the font to `0.6rem`. Also set the top and bottom margins to `5px`, removing the left and right margins.
+
+# --hints--
+
+You should have a new `.note` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note'));
+```
+
+Your `.note` selector should have a `font-size` property set to `0.6rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem');
+```
+
+Your `.note` selector should have a `margin` property set to `5px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
new file mode 100644
index 0000000000..845b9f2d7f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
@@ -0,0 +1,365 @@
+---
+id: 615f951dff9317a900ef683f
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Give the `.note` selector a left and right padding of `8px`, removing the top and bottom padding. Also set the `text-indent` property to `-8px`.
+
+With these last changes, your nutrition label is complete!
+
+# --hints--
+
+Your `.note` selector should have a `padding` property set to `0 8px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px');
+```
+
+Your `.note` selector should have a `text-indent` property set to `-8px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+  padding: 0 8px;
+  text-indent: -8px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
new file mode 100644
index 0000000000..93d1888599
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
@@ -0,0 +1,153 @@
+---
+id: 635bde33c91c80540eae239b
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+The text `% Daily Value *` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it.
+
+# --hints--
+
+You should have a `.right` selector.
+
+```js
+const hasRight = new __helpers.CSSHelp(document).getStyle('.right');
+assert(hasRight);
+
+```
+
+The `.right` selector should have the `justify-content` property set to `flex-end`.
+
+```js
+const rightJustifyContent = new __helpers.CSSHelp(document).getStyle('.right')?.getPropertyValue('justify-content');
+assert(rightJustifyContent === 'flex-end');
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
new file mode 100644
index 0000000000..e6f009b7e0
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
@@ -0,0 +1,117 @@
+---
+id: 6395d33ab5d91bf317107c48
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Create a `.calories-info h2` selector and remove all margins.
+
+# --hints--
+
+Create a `.calories-info h2` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2'));
+```
+
+Your `.calories-info h2` selector should have a `margin` set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
new file mode 100644
index 0000000000..6a2dbb37aa
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
@@ -0,0 +1,135 @@
+---
+id: 6396e33fe478dd264ebbf278
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Create a new `.calories-info` selector and give it a `display` property set to `flex`. Also give it a `justify-content` property set to `space-between` and `align-items` property set to `flex-end`.
+
+# --hints--
+
+You should create a `.calories-info` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info'));
+```
+
+Your `.calories-info` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.display === 'flex');
+```
+
+Your `.calories-info` selector should have a `justify-content` property set to `space-between`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.justifyContent === 'space-between');
+```
+
+Your `.calories-info` selector should have a `align-items` property set to `flex-end`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.alignItems === 'flex-end');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.calories-info h2 {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
new file mode 100644
index 0000000000..170468d17b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
@@ -0,0 +1,147 @@
+---
+id: 667d1bb875f5961913176069
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Notice how the text `8g` appears centered in the preview. Nest the `span` element containing the text `Total Fat` along with the text `8g`, in an additional `span` element for alignment.
+
+# --hints--
+
+You should have a `span` element around the code `<span class="bold">Total Fat</span> 8g`.
+
+```js
+assert.match(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerHTML, /^<span class=("|')bold\1>Total Fat<\/span> 8g\s?$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+--fcc-editable-region--
+      <p><span class="bold">Total Fat</span> 8g <span class="bold">10%</span></p>
+--fcc-editable-region--
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
new file mode 100644
index 0000000000..3a5d413485
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
@@ -0,0 +1,58 @@
+---
+id: 612e78af05201622d4bab8aa
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Create a `div` element within your `body` element with the `id` set to `piano`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+const div = document.querySelector('div');
+assert.exists(div);
+```
+
+Your `div` should be within your `body` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.parentElement?.localName === 'body');
+```
+
+Your `div` should have the `id` set to `piano`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.getAttribute('id') === 'piano');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
new file mode 100644
index 0000000000..e5c80cf6b4
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
@@ -0,0 +1,60 @@
+---
+id: 612e7d1c29fb872d6384379c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Nest a second `div` within your existing `div`, and set the `class` to be `keys`.
+
+# --hints--
+
+You should create a second `div` element.
+
+```js
+const divDiv = document.querySelectorAll('div');
+assert(divDiv?.length === 2);
+```
+
+Your new `div` element should be within your existing `div` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.length === 1);
+assert(div?.children?.[0]?.localName === 'div');
+```
+
+Your new `div` element should have the `class` set to `keys`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.[0]?.className === 'keys');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="piano">
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
new file mode 100644
index 0000000000..bfbbe7748d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
@@ -0,0 +1,60 @@
+---
+id: 612e804c54d5e7308d7ebe56
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `.keys` element, add seven `div` elements, each with the class `key`.
+
+# --hints--
+
+You should create seven new `div` elements.
+
+```js
+const divDivDiv = document.querySelectorAll('div');
+assert(divDivDiv?.length === 9);
+```
+
+Your seven new `div` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].length === 7);
+assert([...keys?.children].every(child => child?.tagName === 'DIV'));
+```
+
+Your seven new `div` elements should all have the `class` set to `key`.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].every(child => child?.classList?.contains('key')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys"></div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
new file mode 100644
index 0000000000..93e60db476
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
@@ -0,0 +1,95 @@
+---
+id: 612e813b3ba67633222cbe54
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Remember, a `class` attribute can hold multiple values. To differentiate between your white and black keys, add a second `class` value of `black--key` to your second, third, fifth, sixth, and seventh `.key` elements.
+
+# --hints--
+
+Your second `.key` element should also have a `class` of `black--key`.
+
+```js
+const key = document.querySelectorAll('.key')?.[1];
+assert(key?.className?.includes('black--key'));
+```
+
+Your third `.key` should have `black--key` in the `class`.
+
+```js
+const third = document.querySelectorAll('.key')?.[2];
+assert(third?.classList?.contains('black--key'));
+```
+
+Your fifth `.key` should have `black--key` in the `class`.
+
+```js
+const fifth = document.querySelectorAll('.key')?.[4];
+assert(fifth?.classList?.contains('black--key'));
+```
+
+Your sixth `.key` should have `black--key` in the `class`.
+
+```js
+const sixth = document.querySelectorAll('.key')?.[5];
+assert(sixth?.classList?.contains('black--key'));
+```
+
+Your seventh `.key` should have `black--key` in the `class`.
+
+```js
+const seventh = document.querySelectorAll('.key')?.[6];
+assert(seventh?.classList?.contains('black--key'));
+```
+
+You should have five `.black--key` elements.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 5);
+```
+
+You should have seven `.key` elements.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 7);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
new file mode 100644
index 0000000000..d42477e30c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
@@ -0,0 +1,74 @@
+---
+id: 612e8279827a28352ce83a72
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Now, copy the set of seven `.key` elements and paste two additional sets into the `.keys` div.
+
+# --hints--
+
+You should have 21 `.key` elements.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 21);
+```
+
+You should have 15 `.black--key` elements.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 15);
+```
+
+All `.key` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.key')?.length === 21);
+```
+
+All `.black--key` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.black--key')?.length === 15);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
new file mode 100644
index 0000000000..1f4190864e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
@@ -0,0 +1,107 @@
+---
+id: 612e83ec2eca1e370f830511
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Add a `link` element inside your `head` element. Set its `rel` attribute to `stylesheet` and its `href` attribute to `styles.css`.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.isNotNull(document.querySelector('link'));
+```
+
+You should not change your existing `head` tags. Make sure you did not delete the closing tag.
+
+```js
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
+```
+
+You should have one `link` element.
+
+```js
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
+```
+
+Your `link` element should be inside your `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    --fcc-editable-region--
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    --fcc-editable-region--
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e89562043183c86df287c.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
new file mode 100644
index 0000000000..a5dad2247f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
@@ -0,0 +1,77 @@
+---
+id: 612e89562043183c86df287c
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Browsers often apply default margin and padding values to specific elements. To make sure your piano layout displays correctly, you need to reset the box model.
+
+Add an `html` rule selector to your CSS file, and set the `box-sizing` property to `border-box`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have the `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
new file mode 100644
index 0000000000..cd1ca1882c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
@@ -0,0 +1,83 @@
+---
+id: 612e89d254fe5d3df7d6693d
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you've reset the `html` box model, you need to apply this to the elements inside it as well. To do this, set the `box-sizing` property to `inherit`, which ensures that the targeted elements adopt the same value as their parent element.
+
+You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the `::before` and `::after` pseudo-elements.
+
+The `::before` selector creates a pseudo-element which is the first child of the selected element, while the `::after` selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project.
+
+For now, create a CSS selector to target all elements using `*`, and include the pseudo-elements `::before` and `::after`. Set the `box-sizing` property to `inherit`.
+
+# --hints--
+
+You should have a `*, ::before, ::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
+```
+
+Your `*, ::before, ::after` selector should have the `box-sizing` property set to `inherit`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+html {
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
new file mode 100644
index 0000000000..46f69e2b59
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
@@ -0,0 +1,95 @@
+---
+id: 612e8eebe3a6dc3fcc33a66f
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Now target your `#piano` element with an `id` selector. Set its `background-color` property to `#00471b`, the `width` property to `992px` and the `height` property to `290px`.
+
+# --hints--
+
+You should have a `#piano` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano'));
+```
+
+Your `#piano` selector should have the `background-color` property set to `#00471b`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)');
+```
+
+Your `#piano` selector should have a `width` property set to `992px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px');
+```
+
+Your `#piano` selector should have the `height` set to `290px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
new file mode 100644
index 0000000000..85c97c2924
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
@@ -0,0 +1,81 @@
+---
+id: 612e95ef2e4bdf41f69067f9
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Set the `margin` of the `#piano` to `80px auto`.
+
+# --hints--
+
+Your `#piano` selector should have the `margin` property set to `80px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
new file mode 100644
index 0000000000..26f7c9217a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
@@ -0,0 +1,102 @@
+---
+id: 612e96fc87fe8e44f69f7ec5
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Time to style the keys. Below the `#piano` rule, target the `.keys` element with a `class` selector. Give the new rule a `background-color` property of `#040404`, a `width` property of `949px` and a `height` property of `180px`.
+
+# --hints--
+
+You should have a `.keys` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys'));
+```
+
+Your `.keys` selector should have a `background-color` property set to `#040404`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
+```
+
+Your `.keys` selector should have the `width` property set to `949px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
+```
+
+Your `.keys` selector should have a `height` property set to `180px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
new file mode 100644
index 0000000000..d877f447ad
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
@@ -0,0 +1,88 @@
+---
+id: 612e98f3245c98475e49cfc6
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Give the `.keys` a `padding-left` of `2px`.
+
+# --hints--
+
+Your `.keys` selector should have a `padding-left` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
new file mode 100644
index 0000000000..01ea9f27a9
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
@@ -0,0 +1,89 @@
+---
+id: 612e9a21381a1949327512e6
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Move the keys into position by adjusting the `#piano` selector. Set the `padding` property to `90px 20px 0 20px`.
+
+# --hints--
+
+Your `#piano` selector should have the `padding` property set to `90px 20px 0 20px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
new file mode 100644
index 0000000000..0f8ca9d6ba
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
@@ -0,0 +1,117 @@
+---
+id: 612e9d142affc44a453655db
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Time to style the keys themselves. Create a `class` selector for the `.key` elements. Set the `background-color` set to the value `#ffffff`, the `position` property to `relative`, the `width` property to `41px`, and the `height` property to `175px`.
+
+# --hints--
+
+You should have a `.key` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key'));
+```
+
+Your `.key` selector should have a `background-color` property set to `#ffffff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)');
+```
+
+Your `.key` selector should have the `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative');
+```
+
+Your `.key` selector should have a `width` property set to `41px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px');
+```
+
+Your `.key` selector should have a `height` property set to `175px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
new file mode 100644
index 0000000000..28c5419dac
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
@@ -0,0 +1,103 @@
+---
+id: 612e9f1e7e5ccd4fa9ada0be
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Give the `.key` a `margin` of `2px` and a `float` property set to `left`.
+
+# --hints--
+
+Your `.key` selector should have a `margin` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
+```
+
+Your `.key` selector should have a `float` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
new file mode 100644
index 0000000000..f0e8088dd8
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
@@ -0,0 +1,119 @@
+---
+id: 612ea4c4993aba52ab4aa32e
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now it's time to use the pseudo-selectors you set up earlier. To create the black keys, add a new `.key.black--key::after` selector. This targets elements with both `key` and `black--key` classes and selects the pseudo-element created after these elements in the HTML.
+
+In the new selector, set the `background-color` to `#1d1e22`. Also set the `content` property to `""`. This will make the pseudo-elements empty.
+
+The `content` property is used to set or override the content of an element. By default, the pseudo-elements created by the `::before` and `::after` selectors are empty, which means they are not rendered on the page. By setting the `content` property to an empty string `""`, you ensure that the pseudo-elements are rendered, while still appearing empty.
+
+If you would like to experiment, try removing the `background-color` property and setting different values for the `content` property, such as `"♥"`. Remember to undo these changes when you are done so the tests pass.
+
+# --hints--
+
+You should have a `.key.black--key::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
+```
+
+Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
+```
+
+Your `.key.black--key::after` selector should have a `content` property set to `""`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
new file mode 100644
index 0000000000..a7340d458d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
@@ -0,0 +1,110 @@
+---
+id: 612ea97df5742154772f312e
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Give the `.key.black--key::after` a `position` property set to `absolute` and a `left` property set to `-18px`.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute');
+```
+
+Your `.key.black--key::after` selector should have a `left` property set to `-18px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
new file mode 100644
index 0000000000..72dbf9cc19
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
@@ -0,0 +1,112 @@
+---
+id: 612ead8788d28655ef8db056
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+For the `.key.black--key::after`, set the `width` to `32px` and the `height` to `100px`.
+
+# --hints--
+
+Your `.key.black--key::after` should have a `width` property set to `32px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px');
+```
+
+Your `.key.black--key::after` should have a `height` property set to `100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
new file mode 100644
index 0000000000..37d6779238
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
@@ -0,0 +1,144 @@
+---
+id: 612eaf56b7ba3257fdbfb0db
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The piano needs the freeCodeCamp logo to make it official.
+
+Add an `img` element before your `.keys` element. Give the `img` a `class` of `logo`, and set the `src` to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Give it an `alt` text of `freeCodeCamp Logo`.
+
+# --hints--
+
+You should add a new `img` element.
+
+```js
+assert(document.querySelectorAll('img')?.length === 1);
+```
+
+Your `img` element should come before your first `.keys` element.
+
+```js
+const img = document.querySelector('img');
+assert(img?.nextElementSibling?.className === 'keys');
+assert(img?.previousElementSibling === null);
+```
+
+Your `img` element should have a `class` set to `logo`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.className === 'logo');
+```
+
+Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
+```
+
+Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo');
+```
+
+Remember that casing and spelling matter.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+    --fcc-editable-region--
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
new file mode 100644
index 0000000000..2e461ef48a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
@@ -0,0 +1,129 @@
+---
+id: 612eb4893b63c75bb9251ddf
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Start styling the logo by creating a `.logo` selector. Set the `width` to `200px`, a `position` of `absolute` and a `top` set to `23px`.
+
+# --hints--
+
+You should have a `.logo` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo'));
+```
+
+Your `.logo` selector should have a `width` property set to `200px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px');
+```
+
+Your `.logo` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute');
+```
+
+Your `.logo` selector should have a `top` property set to `23px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
new file mode 100644
index 0000000000..dc900814fd
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
@@ -0,0 +1,115 @@
+---
+id: 612eb75153591b5e3b1ab65e
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `img` element needs its parent to have a `position` set as a point of reference. Set the `position` of the `#piano` selector to `relative`.
+
+# --hints--
+
+Your `#piano` selector should have a `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
new file mode 100644
index 0000000000..62dbbd5686
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
@@ -0,0 +1,116 @@
+---
+id: 612eb7ca8c275d5f89c73333
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+To soften the sharp edges of the piano and its keys, start by giving the `#piano` a `border-radius` of `10px`.
+
+# --hints--
+
+Your `#piano` selector should have a `border-radius` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
new file mode 100644
index 0000000000..777b6e023b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
@@ -0,0 +1,117 @@
+---
+id: 612eb8e984cd73677a92b7e9
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Give the `.key` selector a `border-radius` value of `0 0 3px 3px`.
+
+# --hints--
+
+Your `.key` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+--fcc-editable-region--
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
new file mode 100644
index 0000000000..80785c1dbf
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
@@ -0,0 +1,118 @@
+---
+id: 612eb934f64a4d6890a45518
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Give the `.key.black--key::after` selector a `border-radius` of `0 0 3px 3px` to match the keys.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+--fcc-editable-region--
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
new file mode 100644
index 0000000000..a0c170c27e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
@@ -0,0 +1,139 @@
+---
+id: 612ebcba99bfa46a15370b11
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+The `@media` at-rule, also known as a media query, is used to conditionally apply CSS. Media queries are commonly used to apply CSS based on the viewport width using the `max-width` and `min-width` properties.
+
+In the below example the padding is applied to the `.card` class when the viewport is `960px` wide and below.
+
+```css
+@media (max-width: 960px) {
+  .card {
+    padding: 2rem;
+  }
+}
+```
+
+Add a media query that will be applied when the viewport is `768px` wide and below.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
+```
+
+Your `@media` query should have a `max-width` of `768px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
new file mode 100644
index 0000000000..3291a4dac2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
@@ -0,0 +1,133 @@
+---
+id: 612ebe7fe6d07e6b76d1cae2
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Add a new `#piano` selector within your `@media` query, and set the `width` to `358px`.
+
+# --hints--
+
+Your `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `358px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '358px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
new file mode 100644
index 0000000000..5cfe1e3cac
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
@@ -0,0 +1,136 @@
+---
+id: 612ebedec97e096c8bf64999
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Within the `@media` query, add a `.keys` selector and set the `width` to `318px`.
+
+# --hints--
+
+
+Your `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `318px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '318px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
new file mode 100644
index 0000000000..0dbf2d1e3c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
@@ -0,0 +1,139 @@
+---
+id: 612ebf9a210f2b6d77001e68
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Now add a `.logo` selector to the `@media` query, and set the `width` property to `150px`.
+
+# --hints--
+
+Your `@media` rule should have a `.logo` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo);
+```
+
+Your new `.logo` selector should have a `width` of `150px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo?.style.width === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
new file mode 100644
index 0000000000..a32cab125e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
@@ -0,0 +1,133 @@
+---
+id: 612ec0490ae8626e9adf82e4
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+You may have noticed that the keys collapse when the browser window is smaller than `768px`. To address this issue, set `overflow` to `hidden` in the first `.keys` selector. This property will hide any elements that are pushed outside the defined `width` of `.keys`, preventing unwanted layout changes.
+
+# --hints--
+
+Your original `.keys` selector should have the `overflow` property set to `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+--fcc-editable-region--
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
new file mode 100644
index 0000000000..097b595db2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
@@ -0,0 +1,154 @@
+---
+id: 612ec19d5268da7074941f84
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Logical operators can be used to construct more complex media queries. The `and` logical operator is used to query two media conditions.
+
+For example, a media query that targets a display width between 500px and 1000px would be:
+
+```css
+@media (min-width: 500px) and (max-width: 1000px){
+
+}
+```
+
+Add another `@media` rule to apply if the browser window is wider than `769px` but smaller than `1199px`.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
+```
+
+Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`.
+
+```js
+const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText;
+assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
new file mode 100644
index 0000000000..de83d05ac4
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
@@ -0,0 +1,288 @@
+---
+id: 612ec29c84b9a6718b1f5cec
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+For the new `@media` rule, set the `width` of the `#piano` to `675px` and the `width` of the `.keys` to `633px`.
+
+With that, your piano is complete!
+
+# --hints--
+
+Your second `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `675px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '675px');
+```
+
+Your second `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `633px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '633px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+@media (max-width: 1199px) and (min-width: 769px) {
+
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+@media (max-width: 1199px) and (min-width: 769px) {
+  #piano {
+    width: 675px;
+  }
+
+  .keys {
+    width: 633px;
+  }
+}
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
new file mode 100644
index 0000000000..9d986165f5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
@@ -0,0 +1,36 @@
+---
+id: 66fbcdfed6848e48947dbbc9
+title: Step 1
+challengeType: 1
+dashedName: step-1
+---
+
+# --description--
+
+In this workshop, you will create a recipe tracker using JavaScript objects.
+
+Start by creating an empty array named `recipes`. This is the array you'll push the recipe objects into later.
+
+# --hints--
+
+You should create an array named `recipes`.
+
+```js
+assert.isArray(recipes)
+```
+
+Your `recipes` array should be empty.
+
+```js
+assert.isEmpty(recipes)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
new file mode 100644
index 0000000000..0186623c8b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
@@ -0,0 +1,81 @@
+---
+id: 66fbcf750a62784cf11f562d
+title: Step 2
+challengeType: 1
+dashedName: step-2
+---
+
+# --description--
+
+Create an object named `recipe1`. Inside the `recipe1` object, create a `name` property with the value `"Spaghetti Carbonara"`.
+
+Also inside the `recipe1` object, create an `ingredients` property with an array as the value. The array should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` inside it.
+
+Create another `ratings` property with array value. The array should have `4`, `5`, `4`, and `5` inside it.
+
+# --hints--
+
+You should create an object named `recipe1`.
+
+```js
+assert.isObject(recipe1)
+```
+
+Your `recipe1` object should have a `name` property.
+
+```js
+assert.property(recipe1, 'name');
+```
+
+Your `name` property should be set to `Spaghetti Carbonara`.
+
+```js
+assert.equal(recipe1.name, 'Spaghetti Carbonara');
+```
+
+Your `recipe1` object should have an `ingredients` property.
+
+```js
+assert.property(recipe1, 'ingredients');
+```
+
+Your `ingredients` property should have an array value.
+
+```js
+assert.isArray(recipe1.ingredients)
+```
+
+The array value of your `ingredients` property should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` in it.
+
+```js
+assert.deepEqual(recipe1.ingredients, ["spaghetti", "Parmesan cheese", "pancetta", "black pepper"]);
+```
+
+Your `recipe1` object should have a `ratings` property.
+
+```js
+assert.property(recipe1, "ratings");
+```
+
+Your `ratings` property should have an array value.
+
+```js
+assert.isArray(recipe1.ratings)
+```
+
+The array value of your `ratings` property should have `4`, `5`, `4`, and `5` in it.
+
+```js
+assert.deepEqual(recipe1.ratings, [4, 5, 4, 5]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
new file mode 100644
index 0000000000..77dac4da29
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
@@ -0,0 +1,152 @@
+---
+id: 66fbcf750a62784cf11f562e
+title: Step 4
+challengeType: 1
+dashedName: step-4
+---
+
+# --description--
+
+Create another `recipe2` object with the following properties and values:
+
+| Key                | Value                                                                   |
+| ------------------ | ----------------------------------------------------------------------- |
+| `name`             | `Chicken Curry`                                                         |
+| `ingredients`      | `["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]` |
+| `ratings`          | `[4, 5, 5, 5]`                                                          |
+| `cookingTime`      | `42`                                                                    |
+| `totalIngredients` | `null`                                                                  |
+| `difficultyLevel`  | `''`                                                                    |
+| `averageRating`    | `null`                                                                  |
+
+# --hints--
+
+You should create an object named `recipe2`.
+
+```js
+assert.isObject(recipe2)
+```
+
+Your `recipe2` object should have a `name` property.
+
+```js
+assert.property(recipe2, "name");
+```
+
+Your `name` property should be set to `Chicken Curry`.
+
+```js
+assert.equal(recipe2.name, "Chicken Curry");
+```
+
+Your `recipe2` object should have an `ingredients` property.
+
+```js
+assert.property(recipe2, "ingredients");
+```
+
+Your `ingredients` property should have an array value.
+
+```js
+assert.isArray(recipe2.ingredients)
+```
+
+The array value of your `ingredients` property should have `chicken breast`, `coconut milk`, `curry powder`, `onion` and `garlic` in it.
+
+```js
+assert.deepEqual(recipe2.ingredients, ["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]);
+```
+
+Your `recipe2` object should have a `ratings` property.
+
+```js
+assert.property(recipe2, "ratings");
+```
+
+Your `ratings` property should have an array value.
+
+```js
+assert.isArray(recipe2.ratings)
+```
+
+The array value of your `ratings` property should have `4`, `5`, `5`, and `5` in it.
+
+```js
+assert.deepEqual(recipe2.ratings, [4, 5, 5, 5]);
+```
+
+Your `recipe2` object should have a `cookingTime` property.
+
+```js
+assert.property(recipe2, "cookingTime");
+```
+
+Your `cookingTime` property value should be a number.
+
+```js
+assert.isNumber(recipe2.cookingTime);
+```
+
+Your `cookingTime` property should be set to `42`.
+
+```js
+assert.equal(recipe2.cookingTime, 42);
+```
+
+Your `recipe2` object should have a `totalIngredients` property.
+
+```js
+assert.property(recipe2, "totalIngredients");
+```
+
+Your `totalIngredients` property should be set to `null`.
+
+```js
+assert.isNull(recipe2.totalIngredients);
+```
+
+Your `recipe2` object should have a `difficultyLevel` property.
+
+```js
+assert.property(recipe2, "difficultyLevel");
+```
+
+Your `difficultyLevel` property should be set to an empty string.
+
+```js
+assert.deepEqual(recipe2.difficultyLevel, "");
+```
+
+Your `recipe2` object should have an `averageRating` property.
+
+```js
+assert.property(recipe2, "averageRating");
+```
+
+Your `averageRating` property should be set to `null`.
+
+```js
+assert.isNull(recipe2.averageRating);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
new file mode 100644
index 0000000000..a010c6c140
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
@@ -0,0 +1,98 @@
+---
+id: 66fbcf750a62784cf11f5630
+title: Step 6
+challengeType: 1
+dashedName: step-6
+---
+
+# --description--
+
+A third `recipe3` object has been filled in for you. It has the same properties as `recipe1` and `recipe2`.
+
+You should now push the three objects into the `recipes` array. To do thus, you can use the `push()` method.
+
+Use the `push()` method to push all the recipe objects into the `recipes` array. Make sure to push `recipe1`, `recipe2`, and `recipe3` in that order.
+
+# --hints--
+
+You should remove `recipe1Name` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe1Name\s*=\s*recipe1\.name;?\s*console\.log\(recipe1Name\);?/)
+```
+
+You should remove `recipe2Name` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe2Name\s*=\s*recipe2\.name;?\s*console\.log\(recipe2Name\);?/)
+```
+
+You should remove `recipe1CookingTime` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe1CookingTime\s*=\s*recipe1\.cookingTime;?\s*console\.log\(recipe1CookingTime\);?/)
+```
+
+You should remove `recipe2CookingTime` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe2CookingTime\s*=\s*recipe2\.cookingTime;?\s*console\.log\(recipe2CookingTime\);?/)
+```
+
+You should push all the recipes objects into the `recipes` array. Make sure to push them in the order they are declared.
+
+```js
+assert.deepEqual(recipes, [recipe1, recipe2, recipe3]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+const recipe1Name = recipe1.name;
+console.log(recipe1Name);
+
+const recipe2Name = recipe2.name;
+console.log(recipe2Name);
+
+const recipe1CookingTime = recipe1.cookingTime;
+console.log(recipe1CookingTime);
+
+const recipe2CookingTime = recipe2.cookingTime;
+console.log(recipe2CookingTime);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
new file mode 100644
index 0000000000..292feedbae
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
@@ -0,0 +1,104 @@
+---
+id: 66fbcf750a62784cf11f5631
+title: Step 7
+challengeType: 1
+dashedName: step-7
+---
+
+# --description--
+
+Now, you should work on calculating the `averageRating`, `totalIngredients`, and the `difficultyLevel` for each recipe in the `recipes` array.
+
+Start by creating a `getAverageRating` function that takes a `ratings` parameter. Inside the function, calculate the average rating using the items in the `ratings` property of each recipe.
+
+Your `getAverageRating` function must return a number.
+
+# --hints--
+
+You should create a `getAverageRating` function.
+
+```js
+assert.isFunction(getAverageRating)
+```
+
+Your `getAverageRating` function should have a `ratings` parameter.
+
+```js
+assert.match(getAverageRating.toString(), /ratings/);
+```
+
+Your `getAverageRating` function should return a number.
+
+```js
+assert.isNumber(getAverageRating(recipe1.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.00`.
+
+```js
+assert.isNumber(getAverageRating(recipe2.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.75`.
+
+```js
+assert.isNumber(getAverageRating(recipe2.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.50`.
+
+```js
+assert.isNumber(getAverageRating(recipe1.ratings))
+```
+
+Your `getAverageRating` function should return the correct rating.
+
+```js
+assert.equal(getAverageRating(recipe1.ratings), 4.50)
+assert.equal(getAverageRating(recipe2.ratings), 4.75)
+assert.equal(getAverageRating(recipe3.ratings), 4.00)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
new file mode 100644
index 0000000000..ace358ab7f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
@@ -0,0 +1,105 @@
+---
+id: 66fbcf750a62784cf11f5632
+title: Step 8
+challengeType: 1
+dashedName: step-8
+---
+
+# --description--
+
+Create a `getTotalIngredients` function that takes an `ingredients` parameter. This function should return the number of ingredients for each recipe by returning the length of the `ingredients` array.
+
+# --hints--
+
+You should create a `getTotalIngredients` function.
+
+```js
+assert.isFunction(getTotalIngredients)
+```
+
+You `getTotalIngredients` function should have an `ingredients` parameter.
+
+```js
+assert.match(getTotalIngredients.toString(), /ingredients/);
+```
+
+Your `getTotalIngredients` function should return a number.
+
+```js
+assert.isNumber(getTotalIngredients(recipe1.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `5`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe2.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `3`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe3.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `4`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe1.ingredients))
+```
+
+Your `getTotalIngredients` function should return the correct number of ingredients.
+
+```js
+assert.equal(getTotalIngredients(recipe1.ingredients), 4)
+assert.equal(getTotalIngredients(recipe2.ingredients), 5)
+assert.equal(getTotalIngredients(recipe3.ingredients), 3)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
new file mode 100644
index 0000000000..c686ff0e9a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
@@ -0,0 +1,106 @@
+---
+id: 66fbcf750a62784cf11f5633
+title: Step 9
+challengeType: 1
+dashedName: step-9
+---
+
+# --description--
+
+Create a `getDifficultyLevel` function that takes `cookingTime` as a parameter.
+
+If `cookingTime` is less than `30`, the function should return `"easy"`. If it is less than or equal to `60`, the function should return `"medium"`. Otherwise, the function should return `"hard"`.
+
+# --hints--
+
+You should create a `getDifficultyLevel` function.
+
+```js
+assert.isFunction(getDifficultyLevel)
+```
+
+You `getDifficultyLevel` function should have a `cookingTime` parameter.
+
+```js
+assert.match(getDifficultyLevel.toString(), /cookingTime/);
+```
+
+Your `getDifficultyLevel` function should return `"easy"` when the `cookingTime` is less than or equal to `30`.
+
+```js
+assert.strictEqual(getDifficultyLevel(10), "easy")
+assert.strictEqual(getDifficultyLevel(20), "easy")
+assert.strictEqual(getDifficultyLevel(29), "easy")
+assert.strictEqual(getDifficultyLevel(30), "easy")
+```
+
+Your `getDifficultyLevel` function should return `"medium"` when the `cookingTime` is greater than `31` and less than `60`.
+
+```js
+assert.strictEqual(getDifficultyLevel(31), "medium")
+assert.strictEqual(getDifficultyLevel(40), "medium")
+assert.strictEqual(getDifficultyLevel(50), "medium")
+assert.strictEqual(getDifficultyLevel(60), "medium")
+```
+
+Your `getDifficultyLevel` function should return `"hard"` when the `cookingTime` is greater than `60`.
+
+```js
+assert.strictEqual(getDifficultyLevel(61), "hard")
+assert.strictEqual(getDifficultyLevel(65), "hard")
+assert.strictEqual(getDifficultyLevel(70), "hard")
+assert.strictEqual(getDifficultyLevel(75), "hard")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
new file mode 100644
index 0000000000..38ec100fd5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
@@ -0,0 +1,133 @@
+---
+id: 66fbcf750a62784cf11f5634
+title: Step 10
+challengeType: 1
+dashedName: step-10
+---
+
+# --description--
+
+It's time to test each of the functions. You can use any of the recipes for this, but let's start with `recipe1`.
+
+Create three new variables: `recipe1AverageRating`, `recipe1TotalIngredients`, and `recipe1DifficultyLevel`. Assign them the values by calling the corresponding function for each variable and passing in the appropriate `recipe1` property.
+
+Finally, log each variable to the console to see the results.
+
+# --hints--
+
+You should create a `recipe1AverageRating` variable.
+
+```js
+assert.isNotNull(recipe1AverageRating)
+```
+
+Your `recipe1AverageRating` variable should be set to `getAverageRating(recipe1.ratings)`.
+
+```js
+assert.equal(recipe1AverageRating, getAverageRating(recipe1.ratings));
+```
+
+You should log `recipe1AverageRating` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1AverageRating\);?/)
+```
+
+You should create a `recipe1TotalIngredients` variable.
+
+```js
+assert.isNotNull(recipe1TotalIngredients)
+```
+
+Your `recipe1TotalIngredients` variable should be set to `getTotalIngredients(recipe1.ingredients)`.
+
+```js
+assert.equal(recipe1TotalIngredients, getTotalIngredients(recipe1.ingredients));
+```
+
+You should log `recipe1TotalIngredients` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1TotalIngredients\);?/)
+```
+
+You should create a `recipe1DifficultyLevel` variable.
+
+```js
+assert.isNotNull(recipe1DifficultyLevel)
+```
+
+Your `recipe1DifficultyLevel` variable should be set to `getDifficultyLevel(recipe1.cookingTime)`.
+
+```js
+assert.equal(recipe1DifficultyLevel, getDifficultyLevel(recipe1.cookingTime));
+```
+
+You should log `recipe1DifficultyLevel` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1DifficultyLevel\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
new file mode 100644
index 0000000000..3a34c4658f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
@@ -0,0 +1,124 @@
+---
+id: 66fbcf750a62784cf11f5635
+title: Step 11
+challengeType: 1
+dashedName: step-11
+---
+
+# --description--
+
+You can now fill in each item of the `recipes` array with values for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties.
+
+To do this, access the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of each recipe object and assign them the results of the corresponding function calls with the appropriate arguments.
+
+For now, access the `averageRating`, `totalIngredients`, and `difficultyLevel` of `recipe1` and set them to the appropriate function calls and arguments.
+
+# --hints--
+
+You should access the `averageRating` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.averageRating/)
+```
+
+You should set the `averageRating` of `recipe1` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter.
+
+```js
+assert.match(code, /recipe1\.averageRating\s*=\s*getAverageRating\(recipe1\.ratings\);?/)
+```
+
+You should access the `totalIngredients` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.totalIngredients/)
+```
+
+You should set the `totalIngredients` of `recipe1` you accessed to the calling of `getTotalIngredients` with `recipe1.ingredients` as its parameter.
+
+```js
+assert.match(code, /recipe1\.totalIngredients\s*=\s*getTotalIngredients\(recipe1\.ingredients\);?/)
+```
+
+You should access the `difficultyLevel` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.difficultyLevel/)
+```
+
+You should set the `difficultyLevel` of `recipe1` you accessed to the calling of `getDifficultyLevel` with `recipe1.cookingTime` as its parameter.
+
+```js
+assert.match(code, /recipe1\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe1\.cookingTime\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
new file mode 100644
index 0000000000..bd9aceddf5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
@@ -0,0 +1,124 @@
+---
+id: 66fbcf750a62784cf11f5636
+title: Step 12
+challengeType: 1
+dashedName: step-12
+---
+
+# --description--
+
+Repeat the process for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe2`.
+
+# --hints--
+
+You should access the `averageRating` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.averageRating/)
+```
+
+You should set the `averageRating` of `recipe2` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter.
+
+```js
+assert.match(code, /recipe2\.averageRating\s*=\s*getAverageRating\(recipe2\.ratings\);?/)
+```
+
+You should access the `totalIngredients` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.totalIngredients/)
+```
+
+You should set the `totalIngredients` of `recipe2` you accessed to the calling of `getTotalIngredients` with `recipe2.ingredients` as its parameter.
+
+```js
+assert.match(code, /recipe2\.totalIngredients\s*=\s*getTotalIngredients\(recipe2\.ingredients\);?/)
+```
+
+You should access the `difficultyLevel` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.difficultyLevel/)
+```
+
+You should set the `difficultyLevel` of `recipe2` you accessed to the calling of `getDifficultyLevel` with `recipe2.cookingTime` as its parameter.
+
+```js
+assert.match(code, /recipe2\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe2\.cookingTime\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
new file mode 100644
index 0000000000..032cb8cd78
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
@@ -0,0 +1,186 @@
+---
+id: 66fbcf750a62784cf11f5637
+title: Step 13
+challengeType: 1
+dashedName: step-13
+---
+
+# --description--
+
+The `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe3` have been filled in for you.
+
+Now, log the `recipes` array to the console to see all its items filled with the updated values.
+
+With that, your recipes tracker project is complete.
+
+# --hints--
+
+You should log the `recipes` array to the console.
+
+```js
+assert.match(code, /console\.log\(recipes\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+recipe2.averageRating = getAverageRating(recipe2.ratings);
+recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients);
+recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime);
+
+recipe3.averageRating = getAverageRating(recipe3.ratings);
+recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients)
+recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime)
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return (total / ratings.length).toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(`Recipe 1 Average Rating ${recipe1AverageRating}`);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(`Recipe 1 Total Ingredients: ${recipe1TotalIngredients}`);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(`Recipe 1 Difficulty: ${recipe1DifficultyLevel}`);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+recipe2.averageRating = getAverageRating(recipe2.ratings);
+recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients);
+recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime);
+
+recipe3.averageRating = getAverageRating(recipe3.ratings);
+recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients)
+recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime)
+
+console.log(recipes);
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
new file mode 100644
index 0000000000..193d3d702f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
@@ -0,0 +1,86 @@
+---
+id: 66ff02792b3042a2b811f475
+title: Step 3
+challengeType: 1
+dashedName: step-3
+---
+
+# --description--
+
+Add the following properties to the `recipe1` object:
+
+| Key                | Value  |
+| ------------------ | ------ |
+| `cookingTime`      | `22`   |
+| `totalIngredients` | `null` |
+| `difficultyLevel`  | `""`   |
+| `averageRating`    | `null` |
+
+The properties with `null` and empty string values will be updated later after you calculate them.
+
+# --hints--
+
+Your `recipe1` object should have a `cookingTime` property.
+
+```js
+assert.property(recipe1, "cookingTime");
+```
+
+Your `cookingTime` property should be set to `22`.
+
+```js
+assert.equal(recipe1.cookingTime, 22);
+```
+
+Your `recipe1` object should have a `totalIngredients` property.
+
+```js
+assert.property(recipe1, "totalIngredients");
+```
+
+Your `totalIngredients` property should be set to `null`.
+
+```js
+assert.isNull(recipe1.totalIngredients);
+```
+
+Your `recipe1` object should have a `difficultyLevel` property.
+
+```js
+assert.property(recipe1, "difficultyLevel");
+```
+
+Your `difficultyLevel` property should be set to an empty string.
+
+```js
+assert.deepEqual(recipe1.difficultyLevel, "");
+```
+
+Your `recipe1` object should have a `averageRating` property.
+
+```js
+assert.property(recipe1, "averageRating");
+```
+
+Your `averageRating` property should be set to `null`.
+
+```js
+assert.isNull(recipe1.averageRating);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  ratings: [4, 5, 4, 5],
+--fcc-editable-region--
+
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
new file mode 100644
index 0000000000..6e051af223
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
@@ -0,0 +1,135 @@
+---
+id: 670e4f45f7116c0f216a5177
+title: Step 5
+challengeType: 1
+dashedName: step-5
+---
+
+# --description--
+
+Before we move on, you should practice how to access properties from an object.
+
+You can use either dot (`.`) or bracket (`[]`) notation to do this. Here's an example:
+
+```js
+const person = {
+  name: 'John',
+  age: 30,
+  job: 'Software Engineer'
+};
+
+console.log(person.name); // John
+console.log(person['age']);  // 30
+```
+
+Access the `name` properties of both `recipe1` and `recipe2`, and assign them to the variables `recipe1Name` and `recipe2Name`, respectively.
+
+Next, access the `cookingTime` properties of both recipes and assign them to the variables `recipe1CookingTime` and `recipe2CookingTime`, respectively.
+
+Make sure all the variables you created are logged to the console.
+
+# --hints--
+
+You should create a `recipe1Name` variable.
+
+```js
+assert.isNotNull(recipe1Name)
+```
+
+You should set your `recipe1Name` variable to the accessment of the `name` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.name|recipe1\[("|'|`)name("|'|`)\]/)
+```
+
+You should log `recipe1Name` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1Name\)/)
+```
+
+You should create a `recipe2Name` variable.
+
+```js
+assert.isNotNull(recipe2Name)
+```
+
+You should set your `recipe2Name` variable to the accessment of the `name` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.name|recipe2\[("|'|`)name("|'|`)\]/)
+```
+
+You should log `recipe2Name` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe2Name\)/)
+```
+
+You should create a `recipe1CookingTime` variable.
+
+```js
+assert.isNotNull(recipe1CookingTime)
+```
+
+You should set your `recipe1CookingTime` variable to the accessment of the `cookingTime` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.cookingTime|recipe1\[("|'|`)cookingTime("|'|`)\]/)
+```
+
+You should log `recipe1CookingTime` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1CookingTime\)/)
+```
+
+You should create a `recipe2CookingTime` variable.
+
+```js
+assert.isNotNull(recipe2CookingTime)
+```
+
+You should set your `recipe2CookingTime` variable to the accessment of the `cookingTime` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.cookingTime|recipe2\[("|'|`)cookingTime("|'|`)\]/)
+```
+
+You should log `recipe2CookingTime` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe2CookingTime\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
new file mode 100644
index 0000000000..f86b2c6d43
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996b
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Begin your project by adding an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` within the `body` element.
+
+# --hints--
+
+Your code should have an `img` element.
+
+```js
+assert(document.querySelectorAll('img').length === 1);
+```
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
new file mode 100644
index 0000000000..ba70369909
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
@@ -0,0 +1,42 @@
+---
+id: 60a3e3396c7b40068ad6996c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+In the previous lecture videos about the CSS box model, you learned that every HTML element is treated as a box with four areas.
+
+Imagine you receive a box from your favorite online retailer — the content is the item in the box, or in your case, a header, paragraph, or image element.
+
+Change the `src` attribute in the `<img>` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`.
+
+# --hints--
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
new file mode 100644
index 0000000000..53f6395c12
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
@@ -0,0 +1,41 @@
+---
+id: 60a3e3396c7b40068ad6996d
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it.
+
+Think of the border like the cardboard box your item was shipped in.
+
+Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+# --hints--
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
new file mode 100644
index 0000000000..070dc57d06
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Margin is the area outside of the box, and can be used to control the space between other boxes or elements.
+
+Here the bottom element has a larger top margin, pushing it further down the page.
+
+Now that you quickly reviewed the CSS box model, let's get started on the Rothko painting.
+
+Remove the `<img>` element.
+
+# --hints--
+
+You should not have an `img` element in your code.
+
+```js
+assert(document.querySelector('img') === null);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
new file mode 100644
index 0000000000..33aa91b710
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
@@ -0,0 +1,47 @@
+---
+id: 60a3e3396c7b40068ad6996f
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Add a `div` element in the `body`.
+
+Set the `class` attribute equal to `canvas`.
+
+This will act as the canvas for your painting.
+
+# --hints--
+
+Your code should have a `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 1)
+```
+
+The `div` element should have a `class` with the value `canvas`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('canvas'))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
new file mode 100644
index 0000000000..4ef6fabe87
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
@@ -0,0 +1,53 @@
+---
+id: 60a3e3396c7b40068ad69970
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Before you can start styling the `div` you added, you need to link your CSS to your HTML.
+
+Add a `link` element to link your `styles.css` file. Set the `href` to `styles.css`, and remember to set the `rel` attribute to `stylesheet`.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert(/<link/.test(code))
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert.match(code, /<link.*?rel=('|"|`)stylesheet\1/)
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link.*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
new file mode 100644
index 0000000000..286d537b9e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69971
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Time for CSS.
+
+Even though your `<div>` has no text, it's still treated as a box with content. Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels. Here's a CSS rule that sets the width of the class `card` to 300 pixels:
+
+```css
+.card {
+  width: 300px;
+}
+```
+
+# --hints--
+
+Your code should have a `.canvas` selector.
+
+```js
+const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas');
+assert(hasCanvas)
+```
+
+You should set the `width` property to `500px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px')
+assert(hasWidth);
+```
+
+Your `.canvas` element should have a `width` of `500px`.
+
+```js
+const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width');
+assert(width === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
new file mode 100644
index 0000000000..9151276320
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
@@ -0,0 +1,54 @@
+---
+id: 60a3e3396c7b40068ad69972
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Add the `height` property with the value `600px` to your `.canvas` rule.
+
+# --hints--
+
+You should set the `height` property to `600px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px');
+assert(hasHeight);
+```
+
+Your `.canvas` element should have a `height` of `600px`.
+
+```js
+const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height');
+assert(canvasHeight === '600px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
new file mode 100644
index 0000000000..66a17e01da
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
@@ -0,0 +1,55 @@
+---
+id: 60a3e3396c7b40068ad69973
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Change the `background-color` of the canvas to `#4d0f00`.
+
+# --hints--
+
+You should set the `background-color` property to `#4d0f00`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)');
+assert(hasBackground);
+```
+
+Your `.canvas` element should have a `background-color` of `#4d0f00`.
+
+```js
+const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color');
+assert(canvasBackground === 'rgb(77, 15, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
new file mode 100644
index 0000000000..45d4fc208c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69974
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Every painting needs a frame.
+
+Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class.
+# --hints--
+
+You should add a new `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 2)
+```
+
+Your `.canvas` element should be nested in the new `div` element.
+
+```js
+assert(document.querySelector('.canvas').parentElement.tagName === 'DIV');
+```
+
+Your new `div` should have a `class` with the value `frame`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('frame'));
+```
+
+Your new `div` should be within your `body` element.
+
+```js
+assert(document.querySelector('div').parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+--fcc-editable-region--
+
+    <div class="canvas">
+    </div>
+
+--fcc-editable-region--
+  </body>
+  ```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
new file mode 100644
index 0000000000..8943f3095f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69975
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Write a new rule using the `.frame` class selector.
+
+Use the `border` shorthand declaration to give the `.frame` element a solid, black border with a width of `50px`.
+
+# --hints--
+
+Your code should have a `.frame` selector.
+
+```js
+const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame');
+assert(hasFrame);
+```
+
+You should set the `border` property to `50px solid black`.
+
+```js
+const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black');
+assert(hasBorder);
+```
+
+Your `.frame` element should have a `50px solid black` `border`.
+
+```js
+const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border');
+assert(frameBorder === '50px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
new file mode 100644
index 0000000000..67d334708d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
@@ -0,0 +1,64 @@
+---
+id: 60a3e3396c7b40068ad69976
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+The frame is much too wide.
+
+In `.frame`, set its `width` to 500 pixels.
+
+# --hints--
+
+You should set the `width` property to `500px`.
+
+```js
+const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px');
+assert(widthFilter.length === 2);
+```
+
+Your `.frame` element should have a `width` of `500px`.
+
+```js
+const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width');
+assert(frameWidth === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
new file mode 100644
index 0000000000..bba60c94f2
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
@@ -0,0 +1,65 @@
+---
+id: 60a3e3396c7b40068ad69977
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Use padding to adjust the spacing within an element.
+
+In `.frame`, use the `padding` shorthand property to increase the space between the `.frame` and `.canvas` elements by `50px`. The shorthand will increase space in the top, bottom, left, and right of the element's border and canvas within.
+
+# --hints--
+
+You should set the `padding` property to `50px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px');
+assert(hasPadding);
+```
+
+Your `.frame` element should have a `padding` value of `50px`.
+
+```js
+const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding');
+assert(framePadding === '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
new file mode 100644
index 0000000000..5bdf662a15
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
@@ -0,0 +1,66 @@
+---
+id: 60a3e3396c7b40068ad69978
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Use margins to adjust the spacing outside of an element.
+
+Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. This will move the frame down 20 pixels and horizontally center it on the page.
+
+# --hints--
+
+You should set the `margin` property to `20px auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto');
+assert(hasMargin);
+```
+
+Your `.frame` element should have a `margin` value of `20px auto`.
+
+```js
+const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin');
+assert(frameMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
new file mode 100644
index 0000000000..cbbaa5bd1d
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad69979
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Add a new `div` element inside of your `.canvas` element.
+
+Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 3);
+```
+
+You should nest the new `div` element within your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[0].tagName === 'DIV');
+```
+
+Your new `div` should have a `class` attribute with a value `one`.
+
+```js
+assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
new file mode 100644
index 0000000000..de2c2b089c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997a
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Write a new rule that targets `.one` and set its `width` to 425 pixels.
+
+# --hints--
+
+You should have a `.one` selector.
+
+```js
+const hasOne = new __helpers.CSSHelp(document).getStyle('.one');
+assert(hasOne);
+```
+
+You should set the `width` property to `425px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px');
+assert(hasWidth);
+```
+
+Your `.one` element should have a `width` value of `425px`.
+
+```js
+const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width');
+assert(oneWidth === '425px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
new file mode 100644
index 0000000000..aa9033dc8b
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
@@ -0,0 +1,70 @@
+---
+id: 60a3e3396c7b40068ad6997b
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Now set the `height` for `.one` to 150 pixels.
+
+# --hints--
+
+You should set the `height` property to `150px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px');
+assert(hasHeight);
+```
+
+Your `.one` element should have a `height` value of `150px`.
+
+```js
+const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height');
+assert(oneHeight === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
new file mode 100644
index 0000000000..bec4b8fdf3
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad6997c
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Set the `background-color` of `.one` to `#efb762`.
+
+# --hints--
+
+You should set the `background-color` property to `#efb762`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)');
+assert(hasBackground)
+```
+
+Your `.one` element should have a `background-color` value of `#efb762`.
+
+```js
+const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color');
+assert(oneBackground === 'rgb(239, 183, 98)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
new file mode 100644
index 0000000000..29042741c7
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997d
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Use margins to position the `.one` element on the canvas.
+
+Add the shorthand `margin` property with a vertical margin of `20px` and a horizontal margin of `auto`.
+
+# --hints--
+
+You should set the `margin` property to `20px auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto');
+assert(marginFilter.length === 2);
+```
+
+Your `.one` element should have a `margin` value of `20px auto`.
+
+```js
+const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin');
+assert(oneMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
new file mode 100644
index 0000000000..365ecbaec6
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
@@ -0,0 +1,75 @@
+---
+id: 60a3e3396c7b40068ad6997e
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels.
+
+Add `padding` of `1px` to the `.canvas` element to give the `.one` element something solid to push off of.
+
+# --hints--
+
+You should set the `padding` property to `1px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
+assert(hasPadding);
+```
+
+Your `.canvas` element should have a `padding` value of `1px`.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding');
+assert(canvasPadding === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
new file mode 100644
index 0000000000..9ffd481ee9
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
@@ -0,0 +1,82 @@
+---
+id: 60a3e3396c7b40068ad6997f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels.
+
+Replace the `padding` property with `overflow` set to `hidden` - changing the canvas back to its original dimensions.
+
+# --hints--
+
+You should remove the `padding` property from the `.canvas` selector.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding');
+assert(!canvasPadding);
+```
+
+You should set the `overflow` property to `hidden`.
+
+```js
+const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden');
+assert(hasOverflow);
+```
+
+Your `.canvas` element should have an `overflow` value of `hidden`.
+
+```js
+const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow');
+assert(canvasOverflow === 'hidden')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+  padding: 1px;
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
new file mode 100644
index 0000000000..84694dcaba
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69980
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle.
+
+# --hints--
+
+You should not change the existing `.one` element.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+```
+
+You should have a second `div` element in your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[1].tagName === 'DIV');
+```
+
+Your second `div` element should have a `class` value of `two`.
+
+```js
+assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two'));
+```
+
+Your `.two` element should come after your `.one` element.
+
+```js
+assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
new file mode 100644
index 0000000000..905c846534
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69981
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels.
+
+# --hints--
+
+You should have a `.two` selector.
+
+```js
+const hasTwo = new __helpers.CSSHelp(document).getStyle('.two');
+assert(hasTwo);
+```
+
+You should set the `width` property to `475px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px');
+assert(hasWidth);
+```
+
+Your `.two` element should have a `width` value of `475px`.
+
+```js
+const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width');
+assert(twoWidth === '475px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
new file mode 100644
index 0000000000..deb83104e5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
@@ -0,0 +1,79 @@
+---
+id: 60a3e3396c7b40068ad69982
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Set the `height` of the `.two` element to 200 pixels.
+
+# --hints--
+
+You should set the `height` property to `200px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px');
+assert(hasHeight);
+```
+
+Your `.two` element should have a `height` value of `200px`.
+
+```js
+const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height');
+assert(twoHeight === '200px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
new file mode 100644
index 0000000000..b473fbe95e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
@@ -0,0 +1,80 @@
+---
+id: 60a3e3396c7b40068ad69983
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Set the `background-color` of the `.two` element to `#8f0401`.
+
+# --hints--
+
+You should set the `background-color` property to `#8f0401`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)');
+assert(hasBackground);
+```
+
+Your `.two` element should have a `background-color` value of `#8f0401`.
+
+```js
+const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color');
+assert(twoBackground === 'rgb(143, 4, 1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
new file mode 100644
index 0000000000..aa6bfc9b10
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
@@ -0,0 +1,81 @@
+---
+id: 60a3e3396c7b40068ad69984
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Center the `.two` element by setting its `margin` to `auto`.
+
+# --hints--
+
+You should set the `margin` property to `auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto');
+assert(hasMargin);
+```
+
+Your `.two` element should have a `margin` value of `auto`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
new file mode 100644
index 0000000000..d4e9204170
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad69986
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle.
+
+# --hints--
+
+Your existing `.one` and `.two` elements should not be changed.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+assert(document.querySelectorAll('.two').length === 1);
+```
+
+Your new `div` should be nested in your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
+```
+
+Your new `div` should come after your `.two` element.
+
+```js
+assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
+```
+
+Your new `div` element should have a `class` with the value `three`.
+
+```js
+assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
new file mode 100644
index 0000000000..a8ed43828e
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
@@ -0,0 +1,94 @@
+---
+id: 60a3e3396c7b40068ad69987
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+You don't always have to use pixels when sizing an element.
+
+Create a new rule, `.three`, and set its `width` to `91%`.
+
+# --hints--
+
+You should use the `.three` selector.
+
+```js
+const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
+assert(hasThree);
+```
+
+You should set the `width` property to `91%`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
+assert(hasWidth);
+```
+
+Your `.three` element should have a `width` value of `91%`.
+
+```js
+const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
+assert(threeWidth === '91%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
new file mode 100644
index 0000000000..4bac9123c8
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
@@ -0,0 +1,87 @@
+---
+id: 60a3e3396c7b40068ad69988
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Set the `height` of `.three` to `28%`.
+
+# --hints--
+
+You should set the `height` property to `28%`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
+assert(hasHeight);
+```
+
+Your `.three` element should have a `height` value of `28%`.
+
+```js
+const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
+assert(threeHeight === '28%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
new file mode 100644
index 0000000000..aa949defd3
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
@@ -0,0 +1,88 @@
+---
+id: 60a3e3396c7b40068ad69989
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Change the `background-color` of `.three` to `#b20403`.
+
+# --hints--
+
+You should set the `background-color` property to `#b20403`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
+assert(hasBackground);
+```
+
+Your `.three` element should have a `background-color` value of `#b20403`.
+
+```js
+const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
+assert(threeBackground === 'rgb(178, 4, 3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
new file mode 100644
index 0000000000..6a8b129773
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
@@ -0,0 +1,89 @@
+---
+id: 60a3e3396c7b40068ad6998a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Center the `.three` element on the canvas by setting its `margin` to `auto`.
+
+# --hints--
+
+You should set the `margin` property to `auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
+assert(marginFilter.length === 2);
+```
+
+Your `.three` element should have a `margin` value of `auto`.
+
+```js
+const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
+assert(threeMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
new file mode 100644
index 0000000000..ba32bd466f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad6998b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+It's helpful to have your margins push in one direction.
+
+In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels.
+
+In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels.
+
+# --hints--
+
+You should set the `margin` property to `0 auto 20px`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
+assert(hasMargin);
+```
+
+Your `.two` element should have a `margin` value of `0 auto 20px`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === '0px auto 20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+  margin: auto;
+--fcc-editable-region--
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
new file mode 100644
index 0000000000..db47cb9346
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad6998c
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The colors and shapes of your painting are too sharp to pass as a Rothko.
+
+Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element.
+
+Here's an example of a rule that add a 3px `blur`:
+
+```css
+p {
+  filter: blur(3px);
+}
+```
+
+# --hints--
+
+You should set the `filter` property to `blur(2px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
+assert(hasFilter);
+```
+
+Your `.canvas` element should have a `filter` value of `blur(2px)`.
+
+```js
+const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
+assert(canvasFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+
+}
+--fcc-editable-region--
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
new file mode 100644
index 0000000000..06f7c56156
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
@@ -0,0 +1,108 @@
+---
+id: 60a3e3396c7b40068ad6998d
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel.
+
+# --hints--
+
+You should have a `.one, .two` selector list.
+
+```js
+const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
+assert(oneTwo);
+```
+
+You should set the `filter` property to `blur(1px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
+assert(hasFilter)
+```
+
+Your `.one` element should have a `filter` value of `blur(1px)`.
+
+```js
+const one = document.querySelector('.one');
+const oneFilter = getComputedStyle(one).filter;
+assert(oneFilter === 'blur(1px)');
+```
+
+Your `.two` element should have a `filter` value of `blur(1px)`.
+
+```js
+const two = document.querySelector('.two');
+const twoFilter = getComputedStyle(two).filter;
+assert(twoFilter === 'blur(1px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
new file mode 100644
index 0000000000..dafc3792ec
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
@@ -0,0 +1,95 @@
+---
+id: 60a3e3396c7b40068ad6998e
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Increase the `blur` of `.three` by 2 pixels.
+
+# --hints--
+
+You should set the `filter` property to `blur(2px)`.
+
+```js
+const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
+assert(filterFilter.length === 2);
+```
+
+Your `.three` element should have a `filter` value of `blur(2px)`.
+
+```js
+const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
+assert(threeFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
new file mode 100644
index 0000000000..9971a7dda8
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad6998f
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+The rectangles are too small and their edges don't have the soft quality of a painting.
+
+Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
+
+```js
+const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
+assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
new file mode 100644
index 0000000000..70123d3e87
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
@@ -0,0 +1,97 @@
+---
+id: 60a3e3396c7b40068ad69990
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 3px 3px #8f0401`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`.
+
+```js
+const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
+assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
new file mode 100644
index 0000000000..e7582ebc5a
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad69991
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+assert(hasBoxShadow);
+```
+
+Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
+
+```js
+const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
+assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
new file mode 100644
index 0000000000..f78535e86c
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
@@ -0,0 +1,101 @@
+---
+id: 60a3e3396c7b40068ad69992
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+The corners of each rectangle are still too sharp.
+
+Round each corner of the `.one` element by 9 pixels, using the `border-radius` property.
+
+# --hints--
+
+You should set the `border-radius` property to `9px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
+assert(hasBorderRadius);
+```
+
+Your `.one` element should have a `border-radius` value of `9px`.
+
+```js
+const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
+assert(oneBorderRadius === '9px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
new file mode 100644
index 0000000000..e99b91467f
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad69993
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Use the `border-radius` property on the `.two` selector, to set its top-left radius and bottom-right radius to `8px`, and top-right radius and bottom-left radius to `10px`.
+
+# --hints--
+
+You should set the `border-radius` property to `8px 10px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
+assert(hasBorderRadius);
+```
+
+Your `.two` element should have a `border-radius` value of `8px 10px`.
+
+```js
+const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
+assert(twoBorderRadius === '8px 10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
new file mode 100644
index 0000000000..41be8e8fd5
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69994
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners.
+
+Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels.
+
+# --hints--
+
+You should set the `border-radius` property to `30px 25px 60px 12px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
+assert(hasBorderRadius);
+```
+
+Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`.
+
+```js
+const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
+assert(threeBorderRadius === '30px 25px 60px 12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
new file mode 100644
index 0000000000..f5ebe9a726
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
@@ -0,0 +1,104 @@
+---
+id: 60a3e3396c7b40068ad69995
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Rotate each rectangle to give them more of an imperfect, hand-painted look.
+
+Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees.
+
+# --hints--
+
+You should set the `transform` property to `rotate(-0.6deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
+assert(hasTransform);
+```
+
+Your `.one` element should have a `transform` value of `rotate(-0.6deg)`.
+
+```js
+const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
+assert(oneTransform === 'rotate(-0.6deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
new file mode 100644
index 0000000000..3b25d4ac04
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69996
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Rotate the `.two` element clockwise by 0.4 degrees.
+
+# --hints--
+
+You should set the `transform` property to `rotate(0.4deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
+assert(hasTransform);
+```
+
+Your `.two` element should have a `transform` value of `rotate(0.4deg)`.
+
+```js
+const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
+assert(twoTransform === 'rotate(0.4deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
new file mode 100644
index 0000000000..a41a1976ff
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
@@ -0,0 +1,180 @@
+---
+id: 60a3e3396c7b40068ad69997
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Rotate `.three` counter clockwise by 0.2 degrees.
+
+With this final step, your Rothko painting is now complete.
+
+# --hints--
+
+You should set the `transform` property to `rotate(-0.2deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
+assert(hasTransform);
+```
+
+Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
+
+```js
+const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
+assert(threeTransform === 'rotate(-0.2deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+  transform: rotate(-0.2deg);
+}
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
index aa1b74184d..a3a9369721 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
@@ -9,7 +9,7 @@ dashedName: step-3
 
 The `p` element is used to create a paragraph of text on websites. Create a `p` element below your `h2` element and give it the following text:
 
-`See more cat photos in our gallery.`
+`Everyone loves cute cats online!`
 
 # --hints--
 
@@ -25,13 +25,13 @@ L'elemento `p` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un car
 assert(code.match(/<\/p\>/));
 ```
 
-Your `p` element's text should be `See more cat photos in our gallery.` You have either omitted the text or have a typo.
+Your `p` element's text should be `Everyone loves cute cats online!` You have either omitted the text or have a typo.
 
 ```js
 const extraSpacesRemoved = document
   .querySelector('p')
   .innerText.replace(/\s+/g, ' ');
-assert(extraSpacesRemoved.match(/see more cat photos in our gallery\.?$/i));
+assert.match(extraSpacesRemoved, /everyone loves cute cats online!$/i);
 ```
 
 L'elemento `p` dovrebbe essere al di sotto dell'elemento `h2`. Sono nell'ordine sbagliato.
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
index 5522061529..5cb60f7b18 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
@@ -49,12 +49,9 @@ assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/i));
 Your comment should be above the `p` element. Sono nell'ordine sbagliato.
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
-    )
+assert.match(
+  code.replace(/\s/g, ''),
+  /<!--todo:addlinktocatphotos--><p>everyonelovescutecatsonline!<\/p>/i
 );
 ```
 
@@ -69,7 +66,7 @@ assert(
     <h2>Cat Photos</h2>
 --fcc-editable-region--
 
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
index 931199747e..875d9012bf 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -55,10 +55,8 @@ Your `main` element's closing tag should be below the `p` element. Sono nell'ord
 ```js
 const mainNode = document.querySelector('main');
 const pNode = document.querySelector('p');
-assert(
-  mainNode.contains(pNode) &&
-    pNode.textContent.toLowerCase().match(/see more cat photos in our gallery/)
-);
+assert.isTrue(mainNode.contains(pNode));
+assert.match(pNode.textContent.toLowerCase(), /everyone loves cute cats online!/);
 ```
 
 # --seed--
@@ -73,7 +71,7 @@ assert(
     <h1>CatPhotoApp</h1>
     <h2>Cat Photos</h2>
     <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 1f6f7925b4..4f65380640 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -74,14 +74,14 @@ Your code should have a `p` element. You have removed the `p` element from an ea
 assert(document.querySelector('p'));
 ```
 
-The text of the `p` element should be `See more cat photos in our gallery.` Do not change the text, spacing, or punctuation of the `p` element.
+The text of the `p` element should be `Everyone loves cute cats online!` Do not change the text, spacing, or punctuation of the `p` element.
 
 ```js
-assert(
+assert.match(
   document
     .querySelector('p')
-    .innerText.toLowerCase()
-    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
+    .innerText.toLowerCase(),
+    /everyone\s+loves\s+cute\s+cats\s+online!$/
 );
 ```
 
@@ -98,12 +98,12 @@ assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
     </main>
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 92ef311a23..ca9f8fc101 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -52,7 +52,7 @@ assert(collection.indexOf('P') < collection.indexOf('IMG'));
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
     </main>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
index 7ccfb76487..1eb7aa83e6 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
@@ -36,19 +36,19 @@ assert(document.querySelector('img').src);
 L'attributo `src` dell'elemento `img` dovrebbe essere '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. Hai omesso l'URL o hai un refuso. Le maiuscole/minuscole nell'URL sono importanti.
 
 ```js
-assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
+assert.strictEqual(document.querySelector('img').src, 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
 ```
 
 Anche se hai impostato l'URL corretto per l'`src` dell'elemento `img`, è raccomandato circondare sempre il valore di un attributo con le virgolette.
 
 ```js
-assert(!/\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/);
 ```
 
 Your `img` element should be closed either with `>` or `/>`.
 
 ```js
-assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\1\s*\/?>/.test(code));
+assert.match(code, /<img\s+src\s*=\s*("|')\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\s*\1\s*\/?>/);
 ```
 
 # --seed--
@@ -62,7 +62,7 @@ assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img>
 --fcc-editable-region--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
index d545d667dd..03d16f9101 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
@@ -54,7 +54,7 @@ assert(altText.match(/A cute orange cat lying on its back\.?$/i));
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
 --fcc-editable-region--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index 410221015d..5487eda2f1 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -75,7 +75,7 @@ assert(
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index e6ebc6cf8b..c1cb0af51a 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -15,7 +15,7 @@ Here is an example of a link with the text `click here to go to freeCodeCamp.org
 <a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>
 ```
 
-Add the anchor text `link to cat pictures` to the anchor element. This will become the link's text.
+Add the anchor text `cat photos` to the anchor element. This will become the link's text.
 
 # --hints--
 
@@ -31,12 +31,12 @@ L'elemento di ancoraggio (`a`) dovrebbe avere un tag di chiusura. I tag di chius
 assert(code.match(/<\/a\>/));
 ```
 
-Your anchor (`a`) element's text should be `link to cat pictures`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag.
+Your anchor (`a`) element's text should be `cat photos`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag.
 
 ```js
-assert(
-  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
-    'link to cat pictures'
+assert.strictEqual(
+  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' '),
+    'cat photos'
 );
 ```
 
@@ -51,7 +51,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <a href="https://freecatphotoapp.com"></a>
 --fcc-editable-region--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
index 07b7a358ca..3b4808aaa6 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa2407b521be39a3de7be1
-title: Step 14
+title: Step 15
 challengeType: 0
-dashedName: step-14
+dashedName: step-15
 ---
 
 # --description--
@@ -25,22 +25,20 @@ Your `p` element should have a nested anchor (`a`) element with the text `cat ph
 
 ```js
 const anchor = document.querySelectorAll('p > a');
-assert(
-  anchor.length &&
-    anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+assert.isNotEmpty(anchor);
+assert.strictEqual(anchor[1]?.innerText?.toLowerCase().replace(/\s+/g, ' '), 'cat photos')
 ```
 
 Your anchor (`a`) element does not have a `target` attribute. Controlla che ci sia uno spazio dopo il nome del tag di apertura e/o che ci siano spazi prima di tutti i nomi degli attributi.
 
 ```js
-assert(document.querySelector('a').hasAttribute('target'));
+assert.isTrue(document.querySelectorAll('a')[1]?.hasAttribute('target'));
 ```
 
 The value of the `target` attribute should be `_blank`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere circondati da virgolette.
 
 ```js
-assert(document.querySelector('a').getAttribute('target') === '_blank');
+assert.strictEqual(document.querySelectorAll('a')[1]?.getAttribute('target'), '_blank');
 ```
 
 # --seed--
@@ -54,6 +52,7 @@ assert(document.querySelector('a').getAttribute('target') === '_blank');
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
 --fcc-editable-region--
       <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
index 32a292ff77..1355440130 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa30b9eacea3f48c6300ad
-title: Step 15
+title: Step 17
 challengeType: 0
-dashedName: step-15
+dashedName: step-17
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert(document.querySelectorAll('a').length >= 2);
 You are missing a closing (`a`) tag after the image.
 
 ```js
-assert(document.querySelectorAll('a').length === 2);
+assert.lengthOf(document.querySelectorAll('a'), 3);
 ```
 
 Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
@@ -52,7 +52,7 @@ assert(code.match(/<\/a>/g).length >= 2);
 You should only add one closing anchor (`a`) tag. Please remove any extras.
 
 ```js
-assert(code.match(/<\/a>/g).length === 2);
+assert.lengthOf(code.match(/<\/a>/g), 3);
 ```
 
 Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
@@ -86,7 +86,7 @@ assert(document.querySelector('img').parentNode.nodeName === 'A');
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
index 7567a6e16f..3300b32c73 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa3589eacea3f48c6300ae
-title: Step 18
+title: Step 20
 challengeType: 0
-dashedName: step-18
+dashedName: step-20
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
index a22c0deb77..52bb7118be 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa371beacea3f48c6300af
-title: Passo 19
+title: Step 21
 challengeType: 0
-dashedName: step-19
+dashedName: step-21
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index 1f0e29e5fa..52b21ec8ad 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa37b9eacea3f48c6300b0
-title: Step 20
+title: Step 22
 challengeType: 0
-dashedName: step-20
+dashedName: step-22
 ---
 
 # --description--
@@ -43,7 +43,7 @@ assert.equal(secondSectionLastElemNode?.nodeName , 'UL');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
index 19ed028336..d97f5a238c 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb5ecbeacea3f48c6300b1
-title: Step 21
+title: Step 23
 challengeType: 0
-dashedName: step-21
+dashedName: step-23
 ---
 
 # --description--
@@ -63,7 +63,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
index 8ae67c9873..5617388c29 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6250eacea3f48c6300b2
-title: Step 22
+title: Step 24
 challengeType: 0
-dashedName: step-22
+dashedName: step-24
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert.isTrue(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curricu
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
index 1eb2b59adf..146464ac6e 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb655eeacea3f48c6300b3
-title: Step 23
+title: Step 25
 challengeType: 0
-dashedName: step-23
+dashedName: step-25
 ---
 
 # --description--
@@ -34,11 +34,7 @@ assert.equal(document.querySelectorAll('section')?.[1]?.lastElementChild?.nodeNa
 L’elemento `img` con la lasagna dovrebbe essere annidato nell’elemento `figure`.
 
 ```js
-assert(
-  document.querySelector('figure > img') &&
-    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
-      'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
-);
+assert.strictEqual(document.querySelector('figure > img')?.src.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg');
 ```
 
 # --seed--
@@ -52,7 +48,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
index 6ab967d82c..9519f5139d 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6a35eacea3f48c6300b4
-title: Step 24
+title: Step 26
 challengeType: 0
-dashedName: step-24
+dashedName: step-26
 ---
 
 # --description--
@@ -82,7 +82,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
index 26e092651c..46893c0b64 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d0
-title: Step 25
+title: Step 27
 challengeType: 0
-dashedName: step-25
+dashedName: step-27
 ---
 
 # --description--
@@ -61,7 +61,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
index 8ae0587d1b..9eb2ce1399 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d1
-title: Step 26
+title: Step 28
 challengeType: 0
-dashedName: step-26
+dashedName: step-28
 ---
 
 # --description--
@@ -55,7 +55,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
index 7a5bd8d963..17c64dd61f 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d2
-title: Step 37
+title: Step 29
 challengeType: 0
-dashedName: step-27
+dashedName: step-29
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert([...document.querySelectorAll('ol')].length == 1);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
index 4538c207cb..f75f58a26b 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d3
-title: Step 28
+title: Step 30
 challengeType: 0
-dashedName: step-28
+dashedName: step-30
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert.equal(document.querySelectorAll('main > section')?.[1]?.lastElementChild?
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
index 2c79e43c24..7c935291f8 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d4
-title: Step 32
+title: Step 34
 challengeType: 0
-dashedName: step-32
+dashedName: step-34
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
index 815ef10443..2193436e4f 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d5
-title: Step 34
+title: Step 36
 challengeType: 0
-dashedName: step-34
+dashedName: step-36
 ---
 
 # --description--
@@ -67,7 +67,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
index 9db68b7792..d6780868fb 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d6
-title: Step 35
+title: Step 37
 challengeType: 0
-dashedName: step-35
+dashedName: step-37
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
index e926553a62..c831e04aaa 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d7
-title: Step 36
+title: Step 38
 challengeType: 0
-dashedName: step-36
+dashedName: step-38
 ---
 
 # --description--
@@ -83,7 +83,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
index 6a2bcf5d3a..a8a5f7d8d2 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d8
-title: Step 37
+title: Step 39
 challengeType: 0
-dashedName: step-37
+dashedName: step-39
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.isTrue(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
index 6ad578417c..fc789a8ea6 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d9
-title: Step 40
+title: Step 42
 challengeType: 0
-dashedName: step-40
+dashedName: step-42
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
index 8e553e2645..b53f275e7b 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804da
-title: Step 42
+title: Step 44
 challengeType: 0
-dashedName: step-42
+dashedName: step-44
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
index 92aa57a564..e9c571b046 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804db
-title: Step 41
+title: Step 43
 challengeType: 0
-dashedName: step-41
+dashedName: step-43
 ---
 
 # --description--
@@ -49,7 +49,7 @@ assert.strictEqual(document.querySelector('input')?.getAttribute('required'), ''
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
index dc222efe9f..661358b934 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dc
-title: Step 44
+title: Step 46
 challengeType: 0
-dashedName: step-44
+dashedName: step-46
 ---
 
 # --description--
@@ -107,7 +107,7 @@ assert.match(radioInputElem?.nextSibling?.nodeValue?.replace(/\s+/g, ' '), /\s*I
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
index a1961865ed..78c8cba66b 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dd
-title: Step 45
+title: Step 47
 challengeType: 0
-dashedName: step-45
+dashedName: step-47
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
index fc21b61b98..6aef36effc 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804de
-title: Step 48
+title: Step 50
 challengeType: 0
-dashedName: step-48
+dashedName: step-50
 ---
 
 # --description--
@@ -68,9 +68,10 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
index e93333aa28..156d4446e7 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804df
-title: Step 46
+title: Step 48
 challengeType: 0
-dashedName: step-46
+dashedName: step-48
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert.match(document.querySelector('input')?.id, /^indoor$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
index 37406753df..3f911cf4ba 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e1
-title: Step 50
+title: Step 52
 challengeType: 0
-dashedName: step-50
+dashedName: step-52
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
index 2bd6156dbc..e28bdb2e36 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e2
-title: Passo 54
+title: Step 56
 challengeType: 0
-dashedName: step-54
+dashedName: step-56
 ---
 
 # --description--
@@ -76,7 +76,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
index bebe0895cf..34012c6ebe 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e3
-title: Step 58
+title: Step 60
 challengeType: 0
-dashedName: step-58
+dashedName: step-60
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
index 839b777061..b813bc74a5 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e5
-title: Step 61
+title: Step 63
 challengeType: 0
-dashedName: step-61
+dashedName: step-63
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.isFalse(document.querySelectorAll('input[type="checkbox"]')?.[2]?.hasAttr
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
index bc51642d01..b0083481ba 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e7
-title: Step 62
+title: Step 64
 challengeType: 0
-dashedName: step-62
+dashedName: step-64
 ---
 
 # --description--
@@ -48,7 +48,7 @@ assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
index 8c4f245698..f07a7d8f9c 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e8
-title: Step 63
+title: Step 65
 challengeType: 0
-dashedName: step-63
+dashedName: step-65
 ---
 
 # --description--
@@ -23,11 +23,11 @@ L'elemento `footer` dovrebbe avere un elemento `p`. Assicurati di aggiungere il
 assert(document.querySelector('footer > p'));
 ```
 
-L'elemento `footer` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere`/` subito dopo il carattere `<`.
+Your `p` element should have a closing tag. I tag di chiusura hanno un carattere`/` subito dopo il carattere `<`.
 
 ```js
 const pElemClosingTags = code.match(/<\/p\>/g);
-assert(pElemClosingTags && pElemClosingTags.length === 2);
+assert.lengthOf(pElemClosingTags, 3);
 ```
 
 Il testo dell'elemento `p` dovrebbe essere `No Copyright - freeCodeCamp.org`. Hai omesso il testo, hai un refuso o il testo non è tra i tag di apertura e chiusura dell'elemento `p`.
@@ -48,7 +48,7 @@ assert.match(extraSpacesRemoved, /No Copyright - freeCodeCamp\.org$/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
index 5ae5d54b40..d679e7f628 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e9
-title: Step 64
+title: Step 66
 challengeType: 0
-dashedName: step-64
+dashedName: step-66
 ---
 
 # --description--
@@ -21,7 +21,7 @@ L'elemento di ancoraggio (`a`) dovrebbe avere un tag di chiusura. I tag di chius
 
 ```js
 const aElemClosingTags = code.match(/<\/a\>/g);
-assert(aElemClosingTags && aElemClosingTags.length === 3);
+assert.lengthOf(aElemClosingTags, 4);
 ```
 
 L'elemento di ancoraggio (`a`) dovrebbe avere un attributo `href` con il valore `https://www.freecodecamp.org`. Potresti aver omesso l'attributo o il valore o avere un refuso.
@@ -59,7 +59,7 @@ assert.match(pText, /^no copyright - freecodecamp.org$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
index a1f837b306..733f79a34a 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ea
-title: Step 65
+title: Step 67
 challengeType: 0
-dashedName: step-65
+dashedName: step-67
 ---
 
 # --description--
@@ -54,7 +54,7 @@ assert(noSpaces.match(/\<\/head\>\<body\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
index dc0a37b843..b2422dc134 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804eb
-title: Step 66
+title: Step 68
 challengeType: 0
-dashedName: step-66
+dashedName: step-68
 ---
 
 # --description--
@@ -56,7 +56,7 @@ assert(document.title && document.title.toLowerCase() === 'catphotoapp');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
index 5f24af58b8..435f6d2c66 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ec
-title: Step 67
+title: Step 69
 challengeType: 0
-dashedName: step-67
+dashedName: step-69
 ---
 
 # --description--
@@ -44,7 +44,7 @@ assert(extraSpacesRemoved.match(/\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
index f98f54be2d..a01a428a2f 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ee
-title: Step 68
+title: Step 70
 challengeType: 0
-dashedName: step-68
+dashedName: step-70
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\<html/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
index a9283de02c..05aba6d707 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
@@ -1,8 +1,8 @@
 ---
 id: 5efada803cbd2bbdab94e332
-title: Step 29
+title: Step 31
 challengeType: 0
-dashedName: step-29
+dashedName: step-31
 ---
 
 # --description--
@@ -42,16 +42,15 @@ The third image should have a `src` attribute set to `https://cdn.freecodecamp.o
 
 ```js
 const catsImg = document.querySelectorAll('figure > img')[1];
-assert(
-  catsImg &&
-    catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
+assert.strictEqual(
+  catsImg?.src?.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
 );
 ```
 
 Anche se hai inserito l'URL corretto nell'attributo `src` della nuova immagine, è raccomandato inserire sempre il valore di un attributo tra virgolette.
 
 ```js
-assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/);
 ```
 
 # --seed--
@@ -65,7 +64,7 @@ assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/ca
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
index 10056f63ff..bfe28cf264 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae0543cbd2bbdab94e333
-title: Step 30
+title: Step 32
 challengeType: 0
-dashedName: step-30
+dashedName: step-32
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
index c9c3128456..4ad203074d 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae16e3cbd2bbdab94e334
-title: Passo 31
+title: Step 33
 challengeType: 0
-dashedName: step-31
+dashedName: step-33
 ---
 
 # --description--
@@ -88,7 +88,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
index 046d0d2692..2aa302ad88 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb23e70dc218d6c85f89b1
-title: Step 38
+title: Step 40
 challengeType: 0
-dashedName: step-38
+dashedName: step-40
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(!/\<input\s+type\s*=\s*text/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
index 2aad33e8eb..3c6d447719 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb2c990dc218d6c85f89b2
-title: Step 43
+title: Step 45
 challengeType: 0
-dashedName: step-43
+dashedName: step-45
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
index 8839051402..279e4134d1 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc4f528d6a74d05e68af74
-title: Step 56
+title: Step 58
 challengeType: 0
-dashedName: step-56
+dashedName: step-58
 ---
 
 # --description--
@@ -110,7 +110,7 @@ assert.match(code, />\s+<label\s+for\s*=\s*('|")loving/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
index c66b5194a1..9c771a8966 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc518e8d6a74d05e68af75
-title: Step 57
+title: Step 59
 challengeType: 0
-dashedName: step-57
+dashedName: step-59
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
index 1483b120da..02e8876aa8 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc54138d6a74d05e68af76
-title: Passo 55
+title: Step 57
 challengeType: 0
-dashedName: step-55
+dashedName: step-57
 ---
 
 # --description--
@@ -34,7 +34,7 @@ assert.match(document.querySelector('input[type="checkbox"]')?.id, /^loving$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
index 59397887da..95e7987a54 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc575c8d6a74d05e68af77
-title: Step 59
+title: Step 61
 challengeType: 0
-dashedName: step-59
+dashedName: step-61
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
index 633eb4318b..d1d3319f8a 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5f05a1d8e233dff4a68508d8
-title: Step 47
+title: Step 49
 challengeType: 0
-dashedName: step-47
+dashedName: step-49
 ---
 
 # --description--
@@ -92,7 +92,7 @@ assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
index e248c8465c..0ee5d4b7fb 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07be6ef7412fbad0c5626b
-title: Step 16
+title: Step 18
 challengeType: 0
-dashedName: step-16
+dashedName: step-18
 ---
 
 # --description--
@@ -40,14 +40,14 @@ The entire `section` element should be between the opening and closing tags of t
 assert(document.querySelector('section').parentNode.nodeName === 'MAIN');
 ```
 
-The existing `h2`, comment, `p` element, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
+The existing `h2`, comment, two `p` elements, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
 
 ```js
 const childrenOfSection = [...document.querySelector('section').childNodes];
 const foundElements = childrenOfSection.filter((child) => {
   return ['H2', 'A', 'P'].includes(child.nodeName);
 });
-assert(foundElements.length === 3);
+assert.lengthOf(foundElements, 4);
 ```
 
 The `h1` element should not be nested in the `section` element.
@@ -65,12 +65,12 @@ assert.isFalse(includesH1);
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
 
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
       <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
index fca62f3745..4ee3a3dcfb 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07c98cdb9413cbd4b16750
-title: Passaggio 17
+title: Step 19
 challengeType: 0
-dashedName: step-17
+dashedName: step-19
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(foundElems.length === 2);
 --fcc-editable-region--
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
index eb30c6560c..c619df5e05 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07fb1579dc934717801375
-title: Step 33
+title: Step 35
 challengeType: 0
-dashedName: step-33
+dashedName: step-35
 ---
 
 # --description--
@@ -62,7 +62,7 @@ assert.lengthOf(document.querySelectorAll('main > section')?.[2]?.children, 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
index c951a32783..0f2b39963d 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d48e7b435f13ab6550051
-title: Step 51
+title: Step 53
 challengeType: 0
-dashedName: step-51
+dashedName: step-53
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
index 554737bd4b..c72e73e8f7 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4ab1b435f13ab6550052
-title: Step 52
+title: Step 54
 challengeType: 0
-dashedName: step-52
+dashedName: step-54
 ---
 
 # --description--
@@ -79,7 +79,7 @@ assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
index 5cea934f00..57757efa41 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4d04b435f13ab6550053
-title: Step 53
+title: Step 55
 challengeType: 0
-dashedName: step-53
+dashedName: step-55
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
index 2df0645471..39396bc817 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a80975fc4bcae0edb3497
-title: Step 49
+title: Step 51
 challengeType: 0
-dashedName: step-49
+dashedName: step-51
 ---
 
 # --description--
@@ -64,9 +64,10 @@ assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
index 961c35b31d..e84f5a3cc5 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a89f1190aff21ae42105a
-title: Passo 60
+title: Step 62
 challengeType: 0
-dashedName: step-60
+dashedName: step-62
 ---
 
 # --description--
@@ -52,7 +52,7 @@ assert(energeticCheckbox.getAttribute('value').match(/^energetic$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
index 15be03669a..49e1c8e9e9 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
@@ -1,8 +1,8 @@
 ---
 id: 62bb4009e3458a128ff57d5d
-title: Step 69
+title: Step 71
 challengeType: 0
-dashedName: step-69
+dashedName: step-71
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
@@ -127,7 +127,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
new file mode 100644
index 0000000000..aa057f8e17
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
@@ -0,0 +1,57 @@
+---
+id: 671141d8e32fe934c26fa1be
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Add the words `See more` before the anchor element and `in our gallery` after the anchor element
+
+# --hints--
+
+You should use the existing anchor element, do not create a new one.
+
+```js
+assert.lengthOf(document.querySelectorAll('a'), 1);
+```
+
+You should have the words `See more` before the anchor element.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a>/)
+```
+
+You should have the words `in our gallery` after the anchor element.
+
+```js
+assert.match(code, /<a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+You should have `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery` in your code.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <a href="https://freecatphotoapp.com">cat photos</a>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
new file mode 100644
index 0000000000..78aae1394e
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
@@ -0,0 +1,48 @@
+---
+id: 671141f948cbab359e74cc93
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Add `p` tags to turn `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.` into a paragraph.
+
+# --hints--
+
+You should add a `p` element around `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.`.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P);
+assert.strictEqual(P.innerText, "See more cat photos in our gallery.");
+```
+
+You should still have the anchor element inside the new paragraph.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P.querySelector('a'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
new file mode 100644
index 0000000000..57b4139497
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -0,0 +1,57 @@
+---
+id: 671141feba228a35cefba82d
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Turn the text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+# --hints--
+
+There should be a new anchor element in the first `p` element.
+
+```js
+assert.exists(document.querySelector('p')?.querySelector('a'));
+```
+
+The anchor text should be `cute cats`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.innerText, "cute cats");
+```
+
+The `href` attrivute of the new anchor element should be `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.href, "https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg");
+```
+
+The text of the `p` element should still be `Everyone loves cute cats online!`.
+
+```js
+assert.strictEqual(document.querySelector('p')?.innerText, "Everyone loves cute cats online!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
new file mode 100644
index 0000000000..7256f63593
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
@@ -0,0 +1,47 @@
+---
+id: 671144cdcc01d73f7dd79dc9
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have added the link you can remove the comment.
+
+# --hints--
+
+There should not be any comment in your code.
+
+```js
+assert.notMatch(code, /<!--/);
+assert.notMatch(code, /-->/);
+```
+
+The text `TODO: Add link to cat photos` should not be present anymore.
+
+```js
+assert.notMatch(code, /TODO:?/i)
+assert.notMatch(code, /Add\s*link\s*to\s*cat\s*photos/i)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+--fcc-editable-region--
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
+      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
index eeeca2608a..2f35e06daa 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
@@ -1,8 +1,8 @@
 ---
 id: 7cf9b03d81a65668421804c3
-title: Step 39
+title: Step 41
 challengeType: 0
-dashedName: step-39
+dashedName: step-41
 ---
 
 # --description--
@@ -66,7 +66,7 @@ assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/italian/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/italian/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
index 692385ab63..c833584c2d 100644
--- a/curriculum/challenges/italian/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
+++ b/curriculum/challenges/italian/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is asynchronous programming?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to execute code in a sequential order.
 
 ---
 
-Placeholder distractor 2
+A technique to handle errors in synchronous code.
 
 ---
 
-Placeholder distractor 3
+A way to guarantee task order.
 
 #### --answer--
 
-Placeholder answer
+A method to execute code concurrently without blocking the main thread.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `async` attribute do when used in a `<script>` tag?
 
 #### --distractors--
 
-Placeholder distractor 1
+It allows the script to be executed after the HTML document has been completely parsed.
 
 ---
 
-Placeholder distractor 2
+It ensures the script runs in a synchronous manner.
 
 ---
 
-Placeholder distractor 3
+It delays the script execution until the browser is idle.
 
 #### --answer--
 
-Placeholder answer
+The script is downloaded in parallel with parsing the page and executed as soon as it is available.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Fetch API in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manage asynchronous callbacks.
 
 ---
 
-Placeholder distractor 2
+To create and manage cookies.
 
 ---
 
-Placeholder distractor 3
+To render dynamic HTML content.
 
 #### --answer--
 
-Placeholder answer
+To make network requests to servers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which `HTTP` method is used to send data to a server for processing?
 
 #### --distractors--
 
-Placeholder distractor 1
+`GET`
 
 ---
 
-Placeholder distractor 2
+`DELETE`
 
 ---
 
-Placeholder distractor 3
+`HEAD`
 
 #### --answer--
 
-Placeholder answer
+`POST`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `res.json()` method do in Express.js?
 
 #### --distractors--
 
-Placeholder distractor 1
+It retrieves data from a JSON file.
 
 ---
 
-Placeholder distractor 2
+It parses a JSON string into a JavaScript object.
 
 ---
 
-Placeholder distractor 3
+It sends raw JSON as a response without any processing.
 
 #### --answer--
 
-Placeholder answer
+It converts a JavaScript object to a JSON string and sends it as a response.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a promise in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to synchronize multiple operations.
 
 ---
 
-Placeholder distractor 2
+A callback function that runs after an operation.
 
 ---
 
-Placeholder distractor 3
+A technique to handle errors in asynchronous code.
 
 #### --answer--
 
-Placeholder answer
+An object that represents the eventual completion (or failure) of an asynchronous operation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does promise chaining allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Execute multiple asynchronous operations in parallel.
 
 ---
 
-Placeholder distractor 2
+Handle synchronous operations more efficiently.
 
 ---
 
-Placeholder distractor 3
+Retry failed operations automatically.
 
 #### --answer--
 
-Placeholder answer
+Pass the result of one promise to the next.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle successful completion of a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.catch()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.then()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle errors in a promise chain?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.then()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.catch()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the use of the `.finally()` method in a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+It returns the result of the promise.
 
 ---
 
-Placeholder distractor 2
+It stops the execution of subsequent promise handlers.
 
 ---
 
-Placeholder distractor 3
+It retries the promise if it fails.
 
 #### --answer--
 
-Placeholder answer
+It executes code after a promise is fulfilled or rejected, regardless of the outcome.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the syntax for declaring an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+`function myFunction() {}`
 
 ---
 
-Placeholder distractor 2
+`function async myFunction() {}`
 
 ---
 
-Placeholder distractor 3
+`async {} => ()`
 
 #### --answer--
 
-Placeholder answer
+`async function myFunction() {}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `await` keyword do in an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+It creates a new promise.
 
 ---
 
-Placeholder distractor 2
+It executes code immediately without waiting.
 
 ---
 
-Placeholder distractor 3
+It returns the result of the promise.
 
 #### --answer--
 
-Placeholder answer
+It pauses the execution of the function until the promise is resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Geolocation API?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manipulate HTML elements.
 
 ---
 
-Placeholder distractor 2
+To create and manage map elements.
 
 ---
 
-Placeholder distractor 3
+To control the device's camera.
 
 #### --answer--
 
-Placeholder answer
+To retrieve the geographical location of a device.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method of the Geolocation API is used to get the current position of the device?
 
 #### --distractors--
 
-Placeholder distractor 1
+`getLocation()`
 
 ---
 
-Placeholder distractor 2
+`getPosition()`
 
 ---
 
-Placeholder distractor 3
+`getLatLong()`
 
 #### --answer--
 
-Placeholder answer
+`getCurrentPosition()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What parameters can be passed to the `getCurrentPosition()` method?
 
 #### --distractors--
 
-Placeholder distractor 1
+Only the success callback function.
 
 ---
 
-Placeholder distractor 2
+Only options.
 
 ---
 
-Placeholder distractor 3
+One the error callback function.
 
 #### --answer--
 
-Placeholder answer
+Success and error callback functions, along with options.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What will the following code return? `fetch('https://api.example.com/data')`
 
 #### --distractors--
 
-Placeholder distractor 1
+The JSON response directly.
 
 ---
 
-Placeholder distractor 2
+An error if the URL is not reachable.
 
 ---
 
-Placeholder distractor 3
+A synchronous response.
 
 #### --answer--
 
-Placeholder answer
+A `Promise` that resolves to a `Response` object
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default HTTP method for the Fetch API?
 
 #### --distractors--
 
-Placeholder distractor 1
+`POST`
 
 ---
 
-Placeholder distractor 2
+`PUT`
 
 ---
 
-Placeholder distractor 3
+`DELETE`
 
 #### --answer--
 
-Placeholder answer
+`GET`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `Promise.all()` method do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resolves a single promise.
 
 ---
 
-Placeholder distractor 2
+It rejects the first promise that fails.
 
 ---
 
-Placeholder distractor 3
+It runs all promises sequentially.
 
 #### --answer--
 
-Placeholder answer
+It executes multiple promises concurrently and returns the results when all are resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you handle multiple asynchronous operations using async/await?
 
 #### --distractors--
 
-Placeholder distractor 1
+You must always use `.then()` for each operation.
 
 ---
 
-Placeholder distractor 2
+You cannot handle multiple operations with async/await.
 
 ---
 
-Placeholder distractor 3
+You must use callback functions for all operations.
 
 #### --answer--
 
-Placeholder answer
+You can use `await` for each operation in sequence and put them inside an async function.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is true about the `fetch` API?
 
 #### --distractors--
 
-Placeholder distractor 1
+It can only handle `GET` requests.
 
 ---
 
-Placeholder distractor 2
+It requires a callback function for handling responses.
 
 ---
 
-Placeholder distractor 3
+It only works in synchronous code.
 
 #### --answer--
 
-Placeholder answer
+It is used to make HTTP requests to a server.
 
diff --git a/curriculum/challenges/italian/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/italian/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
index 80af1166b6..cac5b80e72 100644
--- a/curriculum/challenges/italian/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
+++ b/curriculum/challenges/italian/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What happens when there is too much content to fit in an element box?
 
 #### --distractors--
 
-Placeholder distractor 1
+Underflow
 
 ---
 
-Placeholder distractor 2
+Compression
 
 ---
 
-Placeholder distractor 3
+Padding
 
 #### --answer--
 
-Placeholder answer
+Overflow
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default behavior of CSS when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+Content is hidden
 
 ---
 
-Placeholder distractor 2
+Content is clipped
 
 ---
 
-Placeholder distractor 3
+Content is resized
 
 #### --answer--
 
-Placeholder answer
+Content is visible
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why does CSS typically avoid hiding content when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+To enhance page design by hiding irrelevant content
 
 ---
 
-Placeholder distractor 2
+To save memory and load pages faster
 
 ---
 
-Placeholder distractor 3
+To automatically fix broken layout issues
 
 #### --answer--
 
-Placeholder answer
+To prevent data loss and make issues noticeable
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you handle overflow in CSS to hide content or add scrollbars?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars
 
 ---
 
-Placeholder distractor 2
+Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars
 
 ---
 
-Placeholder distractor 3
+Use `overflow: none` to hide content and `overflow: show` to display scrollbars
 
 #### --answer--
 
-Placeholder answer
+Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you specify different scrolling behaviors for the x-axis and y-axis in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+By using `scroll-x` and `scroll-y` properties
 
 ---
 
-Placeholder distractor 2
+By using `overflow-x` and `overflow-y` separately in every case
 
 ---
 
-Placeholder distractor 3
+By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x`
 
 #### --answer--
 
-Placeholder answer
+By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform` CSS property allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Change the color and font style of an element
 
 ---
 
-Placeholder distractor 2
+Adjust the margin and padding of an element
 
 ---
 
-Placeholder distractor 3
+Modify the visibility and display of an element
 
 #### --answer--
 
-Placeholder answer
+Rotate, scale, skew, or translate an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform-box: fill-box` property do in an animation that rotates an element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resizes the element to fit the canvas during the transformation
 
 ---
 
-Placeholder distractor 2
+It changes the background of the element during transformation
 
 ---
 
-Placeholder distractor 3
+It sets the transform origin to the top-left corner of the element
 
 #### --answer--
 
-Placeholder answer
+It sets the transform origin to the center of the element's bounding box, allowing it to spin in place
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `transform-origin` property in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It controls the animation speed of transformed elements
 
 ---
 
-Placeholder distractor 2
+It defines the display type of transformed elements
 
 ---
 
-Placeholder distractor 3
+It sets the background of transformed elements
 
 #### --answer--
 
-Placeholder answer
+It specifies the point around which a transformation is applied to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does margin affect the size of an element in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Margin increases the actual size of the element's box
 
 ---
 
-Placeholder distractor 2
+Margin has no effect on the element's size or position
 
 ---
 
-Placeholder distractor 3
+Margin decreases the total area the element occupies on the page
 
 #### --answer--
 
-Placeholder answer
+Margin affects the total area an element occupies but is not part of the actual size of the box
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the content area of an element in CSS represent?
 
 #### --distractors--
 
-Placeholder distractor 1
+It defines the margins and padding around the element
 
 ---
 
-Placeholder distractor 2
+It specifies the border thickness of the element
 
 ---
 
-Placeholder distractor 3
+It controls the visibility of the element on the page
 
 #### --answer--
 
-Placeholder answer
+It contains the "real" content of the element, such as text, images, or videos
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the difference between `content-box` and `border-box` in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`content-box` includes padding and border, while `border-box` includes only content dimensions
 
 ---
 
-Placeholder distractor 2
+Both `content-box` and `border-box` include only the border dimensions
 
 ---
 
-Placeholder distractor 3
+`content-box` is used for 2D elements, while `border-box` is used for 3D elements
 
 #### --answer--
 
-Placeholder answer
+`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+To apply default styles to all elements for faster loading
 
 ---
 
-Placeholder distractor 2
+To minimize the size of CSS files by removing unused styles
 
 ---
 
-Placeholder distractor 3
+To optimize images and fonts for better performance
 
 #### --answer--
 
-Placeholder answer
+To remove default browser styling and create a consistent baseline for styling across different browsers
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What are the common types of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bootstrap Reset, Tailwind Reset, and Foundation Reset
 
 ---
 
-Placeholder distractor 2
+Simple Reset, Comprehensive Reset, and Adaptive Reset
 
 ---
 
-Placeholder distractor 3
+Minimal Reset, Advanced Reset, and Legacy Reset
 
 #### --answer--
 
-Placeholder answer
+Normalize.css, Eric Meyer's Reset, and HTML5 Reset
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `scale3d()` property value do in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It rotates an element in 3D space
 
 ---
 
-Placeholder distractor 2
+It skews an element on the x, y, and z axes
 
 ---
 
-Placeholder distractor 3
+It translates an element in 3D space
 
 #### --answer--
 
-Placeholder answer
+It scales an element along the x, y, and z axes
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the total width of an element calculated in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Total width = width + margin + padding + border
 
 ---
 
-Placeholder distractor 2
+Total width = width + margin + padding
 
 ---
 
-Placeholder distractor 3
+Total width = width + margin + border
 
 #### --answer--
 
-Placeholder answer
+Total width = width + left padding + right padding + left border + right border
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the filter property in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the layout of the element on the page
 
 ---
 
-Placeholder distractor 2
+It changes the background color and texture of an element
 
 ---
 
-Placeholder distractor 3
+It alters the size and position of an element
 
 #### --answer--
 
-Placeholder answer
+It applies visual effects like blur and saturation to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the `filter` property specified in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+As only a single function, where percentage values must be used
 
 ---
 
-Placeholder distractor 2
+As `block` or `inline`, with values expressed in pixels
 
 ---
 
-Placeholder distractor 3
+As `none` or multiple functions, but only percentage values are accepted
 
 #### --answer--
 
-Placeholder answer
+As `none` or one or more functions, where percentage values can also be expressed as decimals
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `contrast()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white
 
 ---
 
-Placeholder distractor 2
+Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it
 
 ---
 
-Placeholder distractor 3
+Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque
 
 #### --answer--
 
-Placeholder answer
+Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `hue-rotate()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the brightness of the input image based on degrees
 
 ---
 
-Placeholder distractor 2
+It rotates an element's size and position in the document
 
 ---
 
-Placeholder distractor 3
+It adjusts the saturation and contrast of the input image
 
 #### --answer--
 
-Placeholder answer
+It applies a hue rotation, where the `<angle>` value defines the degrees around the hue color circle
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens when two animated filters have different function list lengths in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+The shorter list's filters override the longer list's filters
 
 ---
 
-Placeholder distractor 2
+The filters are discarded and no animation is applied
 
 ---
 
-Placeholder distractor 3
+Only the first filter function in each list is animated
 
 #### --answer--
 
-Placeholder answer
+The longer list's missing equivalent filter functions are added to the shorter list using their initial values
 
diff --git a/curriculum/challenges/italian/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/italian/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
index 79e4cb7a88..6855b5dea7 100644
--- a/curriculum/challenges/italian/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
+++ b/curriculum/challenges/italian/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A database structured to recognize non-relation between stored items.
 
 ---
 
-Placeholder distractor 2
+A database that stores unstructured data.
 
 ---
 
-Placeholder distractor 3
+A flat file-based system.
 
 #### --answer--
 
-Placeholder answer
+A database structured to recognize relations between stored items.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a non-relational database differ from a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Non-relational databases use tables, while relational databases do not.
 
 ---
 
-Placeholder distractor 2
+Relational databases can store unstructured data.
 
 ---
 
-Placeholder distractor 3
+Non-relational databases are slower than relational databases.
 
 #### --answer--
 
-Placeholder answer
+Non-relational databases can store unstructured data.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `\l` command do when executed in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all schemas
 
 ---
 
-Placeholder distractor 2
+Lists all tables
 
 ---
 
-Placeholder distractor 3
+Connects to a database
 
 #### --answer--
 
-Placeholder answer
+Lists all databases
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following commands creates a new table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD TABLE`
 
 ---
 
-Placeholder distractor 2
+`NEW TABLE`
 
 ---
 
-Placeholder distractor 3
+`ALTER TABLE`
 
 #### --answer--
 
-Placeholder answer
+`CREATE TABLE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of a foreign key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To allow duplication of data.
 
 ---
 
-Placeholder distractor 2
+To uniquely identify a row in the table.
 
 ---
 
-Placeholder distractor 3
+To store large amounts of text data.
 
 #### --answer--
 
-Placeholder answer
+To create a relationship between two tables.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command will add a new column to an existing table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD COLUMN column_name TO table_name data_type;`
 
 ---
 
-Placeholder distractor 2
+`INSERT COLUMN column_name INTO table_name data_type;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name ADD COLUMN column_name data_type;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name ADD COLUMN column_name data_type;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What type of relationship exists when one record in Table A corresponds to one or more records in Table B?
 
 #### --distractors--
 
-Placeholder distractor 1
+One-to-One (1-1)
 
 ---
 
-Placeholder distractor 2
+Many-to-Many (m-m)
 
 ---
 
-Placeholder distractor 3
+Many-to-one(m-1)
 
 #### --answer--
 
-Placeholder answer
+One-to-Many (1-m)
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary purpose of normalization in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To increase the speed of data retrieval.
 
 ---
 
-Placeholder distractor 2
+To enforce security measures.
 
 ---
 
-Placeholder distractor 3
+To simplify the database schema.
 
 #### --answer--
 
-Placeholder answer
+To eliminate data redundancy and ensure data integrity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you delete a column from a table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 2
+`DELETE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name DELETE column_name;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name DROP COLUMN column_name;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the function of the `PRIMARY KEY` constraint in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+To link two tables together.
 
 ---
 
-Placeholder distractor 2
+To define the default value for a column.
 
 ---
 
-Placeholder distractor 3
+To allow null values in the column.
 
 #### --answer--
 
-Placeholder answer
+To ensure that the column contains unique values.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the command `\c` do in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all tables in the current database.
 
 ---
 
-Placeholder distractor 2
+Displays the current database connection details.
 
 ---
 
-Placeholder distractor 3
+Exits the `psql` shell.
 
 #### --answer--
 
-Placeholder answer
+Connects to the specified database.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command inserts data into a table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`PUT VALUES`
 
 ---
 
-Placeholder distractor 2
+`UPDATE INTO`
 
 ---
 
-Placeholder distractor 3
+`ADD DATA`
 
 #### --answer--
 
-Placeholder answer
+`INSERT INTO`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you rename a column in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`MODIFY COLUMN`
 
 ---
 
-Placeholder distractor 2
+`CHANGE COLUMN`
 
 ---
 
-Placeholder distractor 3
+`ALTER COLUMN`
 
 #### --answer--
 
-Placeholder answer
+`RENAME COLUMN`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which query will delete all records from the employees table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE ALL`
 
 ---
 
-Placeholder distractor 2
+`TRUNCATE employees`
 
 ---
 
-Placeholder distractor 3
+`DROP RECORDS`
 
 #### --answer--
 
-Placeholder answer
+`DELETE FROM employees`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which SQL constraint specifically ensures that a column can contain only unique values, allowing nulls?
 
 #### --distractors--
 
-Placeholder distractor 1
+`NOT NULL`
 
 ---
 
-Placeholder distractor 2
+`FOREIGN KEY`
 
 ---
 
-Placeholder distractor 3
+`PRIMARY KEY`
 
 #### --answer--
 
-Placeholder answer
+`UNIQUE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a relational database, what is an index used for?
 
 #### --distractors--
 
-Placeholder distractor 1
+To store additional metadata about tables.
 
 ---
 
-Placeholder distractor 2
+To ensure unique values in a column.
 
 ---
 
-Placeholder distractor 3
+To enforce data integrity.
 
 #### --answer--
 
-Placeholder answer
+To speed up data retrieval.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does a one-to-one (1-1) relationship represent in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Each record in Table A corresponds to one or more records in Table B.
 
 ---
 
-Placeholder distractor 2
+Each record in Table A corresponds to no records in Table B.
 
 ---
 
-Placeholder distractor 3
+Each record in Table A corresponds to multiple records in Table B and vice versa.
 
 #### --answer--
 
-Placeholder answer
+Each record in Table A corresponds to exactly one record in Table B.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command will list all tables in the current PostgreSQL database?
 
 #### --distractors--
 
-Placeholder distractor 1
+`\l`
 
 ---
 
-Placeholder distractor 2
+`SHOW TABLES`
 
 ---
 
-Placeholder distractor 3
+`\t`
 
 #### --answer--
 
-Placeholder answer
+`\d`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
new file mode 100644
index 0000000000..6a1bfc5b2b
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
@@ -0,0 +1,65 @@
+---
+id: 619665c9abd72906f3ad30f9
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You will be building a happy Flappy Penguin, and further practicing CSS transforms and animations in the process.
+
+Begin with linking your stylesheet to the page.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.exists(document.querySelector('link'));
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
new file mode 100644
index 0000000000..2572b413a4
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
@@ -0,0 +1,56 @@
+---
+id: 61967e74a8e3690ab6292daa
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`.
+
+# --hints--
+
+You should use the `body` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+You should use the `background` property in the `body` selector.
+
+```js
+assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background'));
+```
+
+You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
new file mode 100644
index 0000000000..67e0a51de0
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
@@ -0,0 +1,53 @@
+---
+id: 61968df2acd5550bf1616c34
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Normalize your page's sizing, by removing the `body` element's `margin` and `padding`.
+
+# --hints--
+
+You should give `body` a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+You should give `body` a `padding` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
new file mode 100644
index 0000000000..ec42f16803
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
@@ -0,0 +1,51 @@
+---
+id: 61968e9243a4090cc805531c
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Remove both the horizontal and vertical scrollbars, using only one property.
+
+# --hints--
+
+You should give `body` an `overflow` of `--fcc-expected--`. But found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
new file mode 100644
index 0000000000..75b3097c34
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
@@ -0,0 +1,64 @@
+---
+id: 61968f8877c6720d6d61aaf5
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within the `body`, add a `div` with a `class` of `ground`.
+
+# --hints--
+
+You should add a new `div`.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+You should give the `div` a `class` of `ground`.
+
+```js
+assert.include(document.querySelector('div')?.className, 'ground');
+```
+
+You should place the `div` within the `body`.
+
+```js
+assert.exists(document.querySelector('body > div.ground'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
new file mode 100644
index 0000000000..2e20bd3589
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
@@ -0,0 +1,66 @@
+---
+id: 619691693bc14b0e528f5a20
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`.
+
+# --hints--
+
+You should use the `.ground` selector.
+
+```js
+assert.match(code, /\.ground\s*\{/);
+```
+
+You should give the `.ground` element a `width` of `100vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw');
+```
+
+You should give the `.ground` element a `height` of `400px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
new file mode 100644
index 0000000000..afa5d6f94b
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
@@ -0,0 +1,58 @@
+---
+id: 6196928658b6010f28c39484
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`.
+
+# --hints--
+
+You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
new file mode 100644
index 0000000000..606e749c43
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
@@ -0,0 +1,73 @@
+---
+id: 619692ff79f5770fc6d8c0b4
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin.
+
+# --hints--
+
+You should add a new `div` within the `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 2);
+```
+
+You should give the `div` a `class` of `penguin`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin');
+```
+
+You should place `div.penguin` before `div.ground`.
+
+```js
+assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
new file mode 100644
index 0000000000..46ebd08c10
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
@@ -0,0 +1,75 @@
+---
+id: 6196990f966e8f10a40094f6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Target the `.penguin` element, and set its `width` and `height` to `300px`.
+
+# --hints--
+
+You should use the `.penguin` selector.
+
+```js
+assert.match(code, /\.penguin\s*\{/);
+```
+
+You should give `.penguin` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
+```
+
+You should give `.penguin` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
new file mode 100644
index 0000000000..860cde3323
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
@@ -0,0 +1,74 @@
+---
+id: 619699c10a0f6e11591d73c4
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`.
+
+# --hints--
+
+You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto');
+```
+
+You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
new file mode 100644
index 0000000000..3fa5992f53
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
@@ -0,0 +1,83 @@
+---
+id: 61969aa6acef5b12200f672e
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To create some scenery in the background, you will add two mountains.
+
+Above the `.penguin` element, add a `div` with a `class` of `left-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `left-mountain`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain');
+```
+
+You should place `.left-mountain` before `.penguin`.
+
+```js
+assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
new file mode 100644
index 0000000000..3568d09eeb
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
@@ -0,0 +1,89 @@
+---
+id: 61969c487ced6f12db8fef94
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`.
+
+# --hints--
+
+You should use the `.left-mountain` selector.
+
+```js
+assert.match(code, /\.left-mountain\s*\{/);
+```
+
+You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
+```
+
+You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
+```
+
+You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
new file mode 100644
index 0000000000..e8eba6e4ec
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
@@ -0,0 +1,76 @@
+---
+id: 61969d66cfcdba137d021558
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
new file mode 100644
index 0000000000..a182060c6c
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
@@ -0,0 +1,91 @@
+---
+id: 61969e7451455614217e901b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by.
+
+Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis.
+
+# --hints--
+
+You should give `.left-mountain` a `transform` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
+```
+
+You should use the `skew` function on `transform`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
+```
+
+You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
new file mode 100644
index 0000000000..dc15f9983e
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
@@ -0,0 +1,90 @@
+---
+id: 6196adc17f77a714d51485f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Set the stack level of the mountain element such that it remains directly behind the `.ground` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+You should not change the `z-index` of the `.ground` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
new file mode 100644
index 0000000000..870ce25dc1
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
@@ -0,0 +1,86 @@
+---
+id: 6196aead7ac7bf1584b17a7f
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`.
+
+# --hints--
+
+You should give `.left-mountain` a `margin-top` of `100px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px');
+```
+
+You should give `.ground` a `margin-top` of `-58px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
new file mode 100644
index 0000000000..b6ddd5cad7
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
@@ -0,0 +1,92 @@
+---
+id: 6196ce0415498d2463989e84
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 4);
+```
+
+You should give the `div` a `class` of `back-mountain`.
+
+```js
+assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain');
+```
+
+You should place `.back-mountain` after `.left-mountain`.
+
+```js
+assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
new file mode 100644
index 0000000000..bcbe4d3e9d
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
@@ -0,0 +1,100 @@
+---
+id: 6196cee94c6da1253809dff9
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`.
+
+# --hints--
+
+You should use the `.back-mountain` selector.
+
+```js
+assert.match(code, /\.back-mountain\s*\{/);
+```
+
+You should give `.back-mountain` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px');
+```
+
+You should give `.back-mountain` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px');
+```
+
+You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
new file mode 100644
index 0000000000..4bb9ea8634
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
@@ -0,0 +1,87 @@
+---
+id: 6196d00a5d7292262bc02f4c
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.back-mountain` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
new file mode 100644
index 0000000000..d3fd004502
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
@@ -0,0 +1,100 @@
+---
+id: 6196d0cda039d026f7f78d1e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1');
+```
+
+You should not change the `z-index` of the `.left-mountain` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
new file mode 100644
index 0000000000..cdd348db03
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
@@ -0,0 +1,131 @@
+---
+id: 6196d1ac33c68d27dcda5796
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`.
+
+# --hints--
+
+You should use the `transform` property to rotate the element.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.notEmpty(backMountain?.transform);
+} else {
+  assert.notEmpty(backMountain?.rotate);
+}
+```
+
+You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.equal(backMountain?.transform, 'rotate(45deg)');
+} else {
+  assert.equal(backMountain?.rotate, '45deg');
+}
+```
+
+You should give `.back-mountain` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
+```
+
+You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
+```
+
+You should give `.back-mountain` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
+```
+
+You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
new file mode 100644
index 0000000000..151831dbd7
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
@@ -0,0 +1,104 @@
+---
+id: 6196d213d99f16287bff22ae
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`.
+
+# --hints--
+
+You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 5);
+```
+
+You should give the new `div` element a `class` of `sun`.
+
+```js
+assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun');
+```
+
+You should place the new `div` element immediately after the `.back-mountain` element.
+
+```js
+assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
new file mode 100644
index 0000000000..61cf99cfee
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
@@ -0,0 +1,112 @@
+---
+id: 6196d2c0f22ca0293107c048
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`.
+
+# --hints--
+
+You should use the `.sun` selector.
+
+```js
+assert.match(code, /\.sun\s*\{/);
+```
+
+You should give `.sun` a `width` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px');
+```
+
+You should give `.sun` a `height` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px');
+```
+
+You should give `.sun` a `background-color` of `yellow`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
new file mode 100644
index 0000000000..f924e1d525
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
@@ -0,0 +1,105 @@
+---
+id: 6196d32d1340d829f0f6f57d
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle.
+
+# --hints--
+
+You should give `.sun` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute');
+```
+
+You should give `.sun` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
new file mode 100644
index 0000000000..969618185d
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
@@ -0,0 +1,107 @@
+---
+id: 6196d41d40bf9b2aaea5d520
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen.
+
+# --hints--
+
+You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px');
+```
+
+You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
new file mode 100644
index 0000000000..1253455f06
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
@@ -0,0 +1,118 @@
+---
+id: 6197cff995d03905b0cca8ad
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Your penguin will consist of two main sections: the head, and the body.
+
+Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`.
+
+# --hints--
+
+You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `penguin-head`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head');
+```
+
+You should give the second `div` a `class` of `penguin-body`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+--fcc-editable-region--
+    <div class="penguin">
+
+    </div>
+--fcc-editable-region--
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
new file mode 100644
index 0000000000..5256d40e7d
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
@@ -0,0 +1,125 @@
+---
+id: 6197f40a16afea068c7e60c8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex);
+```
+
+You should give the `.penguin` element a `z-index` of `4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4');
+```
+
+You should give `.penguin` a `position` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position);
+```
+
+You should give `.penguin` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
new file mode 100644
index 0000000000..c34e5dc0b5
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
@@ -0,0 +1,65 @@
+---
+id: 6197f667297bb30a552ce017
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`.
+
+# --hints--
+
+You should give `.ground` a `z-index` of `3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+You should give `.ground` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
new file mode 100644
index 0000000000..4f42960c10
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
@@ -0,0 +1,128 @@
+---
+id: 61993b72e874e709b8dfd666
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`.
+
+# --hints--
+
+You should use the `.penguin-head` selector.
+
+```js
+assert.match(code, /\.penguin-head\s*\{/);
+```
+
+You should give `.penguin-head` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%');
+```
+
+You should give `.penguin-head` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`.
+
+```js
+assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
new file mode 100644
index 0000000000..837b66e7b8
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
@@ -0,0 +1,122 @@
+---
+id: 61993cf26a8e0f0a553db223
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+_Most_ penguins do not have a square head.
+
+Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`.
+
+# --hints--
+
+You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`.
+
+```js
+// Maybe check for individual border-radius properties?
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
new file mode 100644
index 0000000000..42992c942d
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
@@ -0,0 +1,139 @@
+---
+id: 61993dbb35adf30b10d49e38
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.
+
+# --hints--
+
+You should use the `.penguin-body` selector.
+
+```js
+assert.match(code, /\.penguin-body\s*\{/);
+```
+
+You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
+```
+
+You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
+```
+
+You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
new file mode 100644
index 0000000000..1304f820e2
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
@@ -0,0 +1,133 @@
+---
+id: 61993e9adc9e9a0bb4d28fff
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Another interesting fact about penguins is that they do not have square bodies.
+
+Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body.
+
+# --hints--
+
+You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
new file mode 100644
index 0000000000..177fa37ed7
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
@@ -0,0 +1,139 @@
+---
+id: 6199409834ccaf0d10736596
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`.
+
+# --hints--
+
+You should use the `.penguin *` selector.
+
+```js
+assert.match(code, /\.penguin\s*\*\s*\{/);
+```
+
+You should give `.penguin *` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
new file mode 100644
index 0000000000..39d2becaa7
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
@@ -0,0 +1,154 @@
+---
+id: 6199429802b7c10dc79ff871
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-head` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
+```
+
+You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
+```
+
+You should give `.penguin-head` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
+```
+
+You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
new file mode 100644
index 0000000000..06adbcbaed
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
@@ -0,0 +1,156 @@
+---
+id: 619943285a41720e6370d985
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top);
+```
+
+You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%');
+```
+
+You should give `.penguin-body` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left);
+```
+
+You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
new file mode 100644
index 0000000000..841e0fac70
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
@@ -0,0 +1,146 @@
+---
+id: 619943876b706d0f35c01dbc
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex);
+```
+
+You should give the `.penguin-head` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
new file mode 100644
index 0000000000..71620d485d
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
@@ -0,0 +1,148 @@
+---
+id: 6199442866286d0ff421a4fc
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string.
+
+# --hints--
+
+You should use the `.penguin-body::before` selector.
+
+```js
+assert.match(code, /\.penguin-body::before\s*\{/);
+```
+
+You should give `.penguin-body::before` a `content` of `""`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
new file mode 100644
index 0000000000..95939a0a79
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
@@ -0,0 +1,145 @@
+---
+id: 619bcf239fc15905ecd66fce
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Position the pseudo-element relative to its closest positioned ancestor.
+
+# --hints--
+
+You should give `.penguin-body::before` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
new file mode 100644
index 0000000000..144a263043
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
@@ -0,0 +1,158 @@
+---
+id: 619be73b3c806006ccc00bb0
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`.
+
+# --hints--
+
+You should give `.penguin-body::before` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
+```
+
+You should give `.penguin-body::before` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%');
+```
+
+You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
new file mode 100644
index 0000000000..32e8d7967e
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Position the pseudo-element `10%` from the top and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
new file mode 100644
index 0000000000..f22f0e3944
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
@@ -0,0 +1,160 @@
+---
+id: 619be80062551a080e32c821
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`.
+
+# --hints--
+
+You should use the `border-radius` property to round off the crest.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
+```
+
+You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
new file mode 100644
index 0000000000..1c9a12db86
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
@@ -0,0 +1,152 @@
+---
+id: 619be8ce4ea49008c5bfbc30
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Increase the pseudo-element's transparency by `30%`.
+
+# --hints--
+
+You should give `.penguin-body::before` an `opacity` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
new file mode 100644
index 0000000000..088e47ba55
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
@@ -0,0 +1,166 @@
+---
+id: 619be946958c6009844f1dee
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`.
+
+# --hints--
+
+You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
+```
+
+You should give the second `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
new file mode 100644
index 0000000000..e25cfd80ce
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
@@ -0,0 +1,193 @@
+---
+id: 619c155df0063a0a3fec0e32
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`.
+
+# --hints--
+
+You should use the `.face` selector.
+
+```js
+assert.match(code, /\.face\s*\{/);
+```
+
+You should give `.face` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
+```
+
+You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
+```
+
+You should give `.face` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
+```
+
+You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
+```
+
+You should give `.face` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
+```
+
+You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
new file mode 100644
index 0000000000..999faf2cd7
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
@@ -0,0 +1,165 @@
+---
+id: 619c16debd0c270b01c5ce38
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`.
+
+# --hints--
+
+You should give `.face` a `border-radius` of `70% 70% 60% 60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
new file mode 100644
index 0000000000..1204286781
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
@@ -0,0 +1,169 @@
+---
+id: 619cfdf2e63ddf05feab86ad
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Position the `.face` elements so that they are `15%` from the top.
+
+# --hints--
+
+You should give `.face` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top);
+```
+
+You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
new file mode 100644
index 0000000000..3529e08289
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
@@ -0,0 +1,171 @@
+---
+id: 619d019488f98c06acbbb71a
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Currently, the two `.face` elements are on top of each other.
+
+Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element.
+
+# --hints--
+
+You should give a `class` of `left` to the first `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left');
+```
+
+You should give a `class` of `right` to the second `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
new file mode 100644
index 0000000000..cdb0268e02
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
@@ -0,0 +1,177 @@
+---
+id: 619d022dc8400c0763829a17
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Target the `.face` element with the `left` class, and position it `5%` left of its parent.
+
+# --hints--
+
+You should use the `.face.left` selector.
+
+```js
+assert.match(code, /\.face\.left\s*\{/);
+```
+
+You should give `.face.left` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left);
+```
+
+You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
new file mode 100644
index 0000000000..c81e359b35
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
@@ -0,0 +1,181 @@
+---
+id: 619d02c7bc95bf0827a5d296
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Target the `.face` element with the `right` class, and position it `5%` right of its parent.
+
+# --hints--
+
+You should use the `.face.right` selector.
+
+```js
+assert.match(code, /\.face\.right\s*\{/);
+```
+
+You should give `.face.right` a `right` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
+```
+
+You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+.face.left {
+  left: 5%;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
new file mode 100644
index 0000000000..7101cc6218
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
@@ -0,0 +1,184 @@
+---
+id: 619d033915012509031f309a
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Below the `.face.right` element, add a `div` element with a `class` of `chin`.
+
+# --hints--
+
+You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `chin`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.chin'));
+```
+
+You should place the `div` element below the `.face.right` element.
+
+```js
+assert.exists(document.querySelector('.face.right + .chin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
new file mode 100644
index 0000000000..8ff7447615
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
@@ -0,0 +1,210 @@
+---
+id: 619d03dadadb6509a16f4f5f
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`.
+
+# --hints--
+
+You should use the `.chin` selector.
+
+```js
+assert.match(code, /\.chin\s*\{/);
+```
+
+You should give `.chin` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width);
+```
+
+You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%');
+```
+
+You should give `.chin` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height);
+```
+
+You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%');
+```
+
+You should give `.chin` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor);
+```
+
+You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
new file mode 100644
index 0000000000..9177d13254
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
@@ -0,0 +1,206 @@
+---
+id: 619d0503e03a790a4179d463
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`.
+
+# --hints--
+
+You should give `.chin` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top);
+```
+
+You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%');
+```
+
+You should give `.chin` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left);
+```
+
+You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%');
+```
+
+You should give `.chin` a `border-radius` of `70% 70% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
new file mode 100644
index 0000000000..ca096090f1
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
@@ -0,0 +1,197 @@
+---
+id: 619d05c54dabca0b10058235
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+So far, the `.face` and `.chin` elements have the same `background-color`.
+
+Create a custom CSS property called `--penguin-face`, and set it to `white`.
+
+# --hints--
+
+You should use the `:root` selector.
+
+```js
+assert.match(code, /:root\s*\{/);
+```
+
+You should give `:root` a `--penguin-face` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face'));
+```
+
+You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
new file mode 100644
index 0000000000..207c0664d1
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
@@ -0,0 +1,197 @@
+---
+id: 619d0882f54bf40bdc4671ed
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Where relevant, replace property values with your `--penguin-face` variable.
+
+# --hints--
+
+You should give `.face` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should give `.chin` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should not use `var(--penguin-face)` in the `.penguin-body` selector.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
new file mode 100644
index 0000000000..a7caac10b5
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
@@ -0,0 +1,222 @@
+---
+id: 619d090cd8d6db0c93dc5087
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5);
+```
+
+You should give the first new `div` a `class` of `eye`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye'));
+```
+
+You should give the second new `div` a `class` of `eye`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.right'));
+```
+
+You should place `div.eye.left` after `div.chin`.
+
+```js
+assert.exists(document.querySelector('.chin + .eye.left'));
+```
+
+You should place `div.eye.right` after `div.eye.left`.
+
+```js
+assert.exists(document.querySelector('.eye.left + .eye.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
new file mode 100644
index 0000000000..e2f3ce9e93
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
@@ -0,0 +1,207 @@
+---
+id: 619d0b51ca42ed0d74582186
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`.
+
+# --hints--
+
+You should use the `.eye` selector.
+
+```js
+assert.match(code, /\.eye\s*\{/);
+```
+
+You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%');
+```
+
+You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%');
+```
+
+You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
new file mode 100644
index 0000000000..a4e7d18c12
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
@@ -0,0 +1,200 @@
+---
+id: 619d0bc9cb05360e1bf549c3
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%');
+```
+
+You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
new file mode 100644
index 0000000000..b567a24805
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
@@ -0,0 +1,215 @@
+---
+id: 619d0c1594c38c0ebae75878
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent.
+
+# --hints--
+
+You should use the `.eye.left` selector.
+
+```js
+assert.match(code, /\.eye\.left\s*\{/);
+```
+
+You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%');
+```
+
+You should use the `.eye.right` selector.
+
+```js
+assert.match(code, /\.eye\.right\s*\{/);
+```
+
+You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
new file mode 100644
index 0000000000..2d324e7251
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
@@ -0,0 +1,225 @@
+---
+id: 619d0d18ca99870f884a7bff
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Within each `.eye` element, add a `div` with a `class` of `eye-lid`.
+
+# --hints--
+
+You should add one `div` element within `.eye.left`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
+```
+
+You should add one `div` element within `.eye.right`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
+```
+
+You should give the first new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.left > div.eye-lid'));
+```
+
+You should give the second new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.right > div.eye-lid'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+
+        </div>
+        <div class="eye right">
+
+        </div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
new file mode 100644
index 0000000000..224cfce88b
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
@@ -0,0 +1,227 @@
+---
+id: 619d0daf214542102739b0da
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`.
+
+# --hints--
+
+You should use the `.eye-lid` selector.
+
+```js
+assert.match(code, /\.eye-lid\s*\{/);
+```
+
+You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%');
+```
+
+You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%');
+```
+
+You should give `.eye-lid` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
new file mode 100644
index 0000000000..e779df5c2d
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
@@ -0,0 +1,226 @@
+---
+id: 619d0e56f9ca9710fcb974e3
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%');
+```
+
+You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%');
+```
+
+You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
new file mode 100644
index 0000000000..ed405abe92
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
@@ -0,0 +1,247 @@
+---
+id: 619d0eec0ac40611b41e2ccc
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7);
+```
+
+You should give the first new `div` a `class` of `blush`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush'));
+```
+
+You should give the second new `div` a `class` of `blush`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.right'));
+```
+
+You should place `.blush.right` after `.blush.left`.
+
+```js
+assert.exists(document.querySelector('.blush.left + .blush.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
new file mode 100644
index 0000000000..a346767374
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
@@ -0,0 +1,238 @@
+---
+id: 619d0fc9825c271253df28d4
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`.
+
+# --hints--
+
+You should use the `.blush` selector.
+
+```js
+assert.match(code, /\.blush\s*\{/);
+```
+
+You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%');
+```
+
+You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%');
+```
+
+You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
new file mode 100644
index 0000000000..78310b8e23
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
@@ -0,0 +1,231 @@
+---
+id: 619d102d786c3d13124c37c6
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%');
+```
+
+You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
new file mode 100644
index 0000000000..9431c4764e
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
@@ -0,0 +1,246 @@
+---
+id: 619d107edf7ddf13cc77106a
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent.
+
+# --hints--
+
+You should use the `.blush.left` selector.
+
+```js
+assert.match(code, /\.blush\.left\s*\{/);
+```
+
+You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%');
+```
+
+You should use the `.blush.right` selector.
+
+```js
+assert.match(code, /\.blush\.right\s*\{/);
+```
+
+You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
new file mode 100644
index 0000000000..39348186b5
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
@@ -0,0 +1,271 @@
+---
+id: 619d10cc98145f14820399c5
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9);
+```
+
+You should give the first new `div` a `class` of `beak`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak'));
+```
+
+You should give the second new `div` a `class` of `beak`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `top`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.top'));
+```
+
+You should give the second new `div` a `class` of `bottom`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.bottom'));
+```
+
+You should place `div.beak.top` after `div.blush.right`.
+
+```js
+assert.exists(document.querySelector('.blush.right + .beak.top'));
+```
+
+You should place `div.beak.bottom` after `div.beak.top`.
+
+```js
+assert.exists(document.querySelector('.beak.top + .beak.bottom'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
new file mode 100644
index 0000000000..ea381856af
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
@@ -0,0 +1,256 @@
+---
+id: 619d115e2adcd71538e82ebb
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should use the `.beak` selector.
+
+```js
+assert.match(code, /\.beak\s*\{/);
+```
+
+You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%');
+```
+
+You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange');
+```
+
+You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
new file mode 100644
index 0000000000..d1617d8dce
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
@@ -0,0 +1,262 @@
+---
+id: 619d11e6d5ef9515d2a16033
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent.
+
+# --hints--
+
+You should use the `.beak.top` selector.
+
+```js
+assert.match(code, /\.beak\.top\s*\{/);
+```
+
+You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%');
+```
+
+You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%');
+```
+
+You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
new file mode 100644
index 0000000000..e580633578
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
@@ -0,0 +1,267 @@
+---
+id: 619d129a417d0716a94de913
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`.
+
+# --hints--
+
+You should use the `.beak.bottom` selector.
+
+```js
+assert.match(code, /\.beak\.bottom\s*\{/);
+```
+
+You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%');
+```
+
+You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%');
+```
+
+You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
new file mode 100644
index 0000000000..4773a10cef
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
@@ -0,0 +1,267 @@
+---
+id: 619d1340361095175f4b5115
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element.
+
+# --hints--
+
+You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
+```
+
+You should give the new `div` a `class` of `shirt`.
+
+```js
+assert.exists(document.querySelector('.penguin > div.shirt'));
+```
+
+You should place the new `div` before `.penguin-body`.
+
+```js
+assert.exists(document.querySelector('.shirt + .penguin-body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
new file mode 100644
index 0000000000..ff117fcdd8
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
@@ -0,0 +1,263 @@
+---
+id: 619d15797b580c1828b05426
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Within the `.shirt` element, add a `div` with the following emoji as content: 💜
+
+# --hints--
+
+You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
+```
+
+You should give the new `div` a content of `💜`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > div')?.textContent, '💜');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
new file mode 100644
index 0000000000..b0330c317b
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
@@ -0,0 +1,264 @@
+---
+id: 619d15d955d9d418c4487bbc
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS`
+
+# --hints--
+
+You should add one `p` element within `.shirt`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > p')?.length, 1);
+```
+
+You should give the `p` element the content `I CSS`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+        <div>💜</div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
new file mode 100644
index 0000000000..2ca7d6a5d8
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
@@ -0,0 +1,278 @@
+---
+id: 619d1629a8adc61960ca8b40
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`.
+
+# --hints--
+
+You should use the `.shirt` selector.
+
+```js
+assert.match(code, /\.shirt\s*\{/);
+```
+
+You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px');
+```
+
+You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif');
+```
+
+You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
new file mode 100644
index 0000000000..c21bb0f24d
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
@@ -0,0 +1,272 @@
+---
+id: 619d1c5fc9f8941a400955da
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+In some browsers, the _heart_ emoji may look slightly different from the previous step. This is because some of the character's properties were overridden by the `font-weight` style of `bold`.
+
+Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value.
+
+# --hints--
+
+You should use the `.shirt div` selector to target the `div` with the heart emoji.
+
+```js
+assert.match(code, /\.shirt div\s*\{/);
+```
+
+You should give the `.shirt div` a `font-weight` of `initial` or `normal`.
+
+```js
+assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
new file mode 100644
index 0000000000..79b1e394fb
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
@@ -0,0 +1,273 @@
+---
+id: 619d1dab9ff3421ae1976991
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent.
+
+# --hints--
+
+You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px');
+```
+
+You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+.shirt div {
+  font-weight: initial;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
new file mode 100644
index 0000000000..0c23ce14f1
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
@@ -0,0 +1,281 @@
+---
+id: 619d1deb8b04811b8839ffe4
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element.
+
+# --hints--
+
+You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px');
+```
+
+You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px');
+```
+
+You should give the `.shirt` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
new file mode 100644
index 0000000000..e650139f7e
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
@@ -0,0 +1,272 @@
+---
+id: 619d1e7a8e81a61c5a819dc4
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+For the shirt's final touch, set the `color` to `#6a6969`.
+
+# --hints--
+
+You should give `.shirt` a `color` of `#6a6969`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
new file mode 100644
index 0000000000..a3dc1fdbf5
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
@@ -0,0 +1,306 @@
+---
+id: 619d1ed33c9a071cf657a0d6
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Fun fact: Penguins cannot stand without at least two feet.
+
+Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `foot`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot'));
+```
+
+You should give the second new `div` a `class` of `foot`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.right'));
+```
+
+You should place `.foot.right` after `.foot.left`.
+
+```js
+assert.exists(document.querySelector('.foot.left + .foot.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
new file mode 100644
index 0000000000..f685b84cb6
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
@@ -0,0 +1,295 @@
+---
+id: 619d1fb5d244c31db8a7fdb7
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`.
+
+# --hints--
+
+You should use the `.foot` selector.
+
+```js
+assert.match(code, /\.foot\s*\{/);
+```
+
+You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%');
+```
+
+You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%');
+```
+
+You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
new file mode 100644
index 0000000000..e26cf4e13a
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
@@ -0,0 +1,288 @@
+---
+id: 619d204bd73ae51e743b8e94
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%');
+```
+
+You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
new file mode 100644
index 0000000000..b4d5cd859d
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
@@ -0,0 +1,304 @@
+---
+id: 619d20b12996101f430920fb
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+The penguin's beak and feet share the same `color`.
+
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-picorna` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna'));
+```
+
+You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange');
+```
+
+You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+  top: 85%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
new file mode 100644
index 0000000000..d2083801b8
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
@@ -0,0 +1,304 @@
+---
+id: 619d21fe6a3f9b2016be9d9d
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent.
+
+# --hints--
+
+You should use the `.foot.left` selector.
+
+```js
+assert.match(code, /\.foot\.left\s*\{/);
+```
+
+You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%');
+```
+
+You should use the `.foot.right` selector.
+
+```js
+assert.match(code, /\.foot\.right\s*\{/);
+```
+
+You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
new file mode 100644
index 0000000000..003b9709c0
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
@@ -0,0 +1,312 @@
+---
+id: 619d229b0e542520cd91c685
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`.
+
+# --hints--
+
+You should give `.foot.left` a `transform` of `rotate(80deg)`.
+
+```js
+const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left');
+
+if (leftFoot?.transform) {
+  assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)');
+} else {
+  assert.equal(leftFoot.getPropVal('rotate', true), '80deg');
+}
+```
+
+You should give `.foot.right` a `transform` of `rotate(-80deg)`.
+
+```js
+const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right');
+
+if (rightFoot?.transform) {
+  assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)');
+} else {
+  assert.equal(rightFoot.getPropVal('rotate', true), '-80deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.foot.left {
+  left: 25%;
+
+}
+
+.foot.right {
+  right: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
new file mode 100644
index 0000000000..ef45038dbc
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
@@ -0,0 +1,295 @@
+---
+id: 619d23089e787e216a7043d6
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element.
+
+# --hints--
+
+You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
new file mode 100644
index 0000000000..906076ce8b
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
@@ -0,0 +1,328 @@
+---
+id: 619d237a107c10221ed743fa
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Fun fact: Penguins cannot fly without wings.
+
+Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4);
+```
+
+You should give the first new `div` a `class` of `arm`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm'));
+```
+
+You should give the second new `div` a `class` of `arm`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.right'));
+```
+
+You should place `.arm.right` after `.arm.left`.
+
+```js
+assert.exists(document.querySelector('.arm.left + .arm.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
new file mode 100644
index 0000000000..94dcb78521
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
@@ -0,0 +1,317 @@
+---
+id: 619d26b12e651022d80cd017
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`.
+
+# --hints--
+
+You should use the `.arm` selector.
+
+```js
+assert.match(code, /\.arm\s*\{/);
+```
+
+You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%');
+```
+
+You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
+
+```js
+assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
new file mode 100644
index 0000000000..a3333bcfba
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
@@ -0,0 +1,332 @@
+---
+id: 619d2712853306238f41828e
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-skin` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin'));
+```
+
+You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))');
+```
+
+You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    gray,
+    rgb(209, 210, 199)
+  );
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
new file mode 100644
index 0000000000..b897e4cc61
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
@@ -0,0 +1,340 @@
+---
+id: 619d2b7a84e78b246f2d17a2
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent.
+
+# --hints--
+
+You should use the `.arm.left` selector.
+
+```js
+assert.match(code, /\.arm\.left\s*\{/);
+```
+
+You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%');
+```
+
+You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%');
+```
+
+You should use the `.arm.right` selector.
+
+```js
+assert.match(code, /\.arm\.right\s*\{/);
+```
+
+You should give `.arm.right` a `top` of `0%`.
+
+```js
+assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top);
+```
+
+You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
new file mode 100644
index 0000000000..a677c9a443
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
@@ -0,0 +1,325 @@
+---
+id: 619d2bd9c1d43c2526e96f1f
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent.
+
+# --hints--
+
+You should use the `transform-origin` property to do this.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`.
+
+```js
+assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
new file mode 100644
index 0000000000..ce148c7f62
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
@@ -0,0 +1,326 @@
+---
+id: 619d2d4e80400325ff89664a
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis.
+
+# --hints--
+
+You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left');
+
+if (leftArm?.rotate && leftArm?.transform) {
+  assert.equal(leftArm.getPropVal('rotate', true), '130deg');
+  assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)');
+} else {
+  assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
new file mode 100644
index 0000000000..7b8d308ed3
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
@@ -0,0 +1,326 @@
+---
+id: 619d2ebc81ba81271460850d
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+Rotate the right arm by `45deg` counterclockwise.
+
+# --hints--
+
+You should give `.arm.right` a `transform` of `rotate(-45deg)`.
+
+```js
+const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right');
+
+if (rightArm?.transform) {
+  assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)');
+} else {
+  assert.equal(rightArm?.getPropVal('rotate', true), '-45deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+--fcc-editable-region--
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
new file mode 100644
index 0000000000..cb6dc37d62
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
@@ -0,0 +1,327 @@
+---
+id: 619d2f0e9440bc27caee1cec
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Fun fact: Most, if not all, flippers are not naturally rectangles.
+
+Give the `.arm` elements' top-left, top-right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`.
+
+# --hints--
+
+You should give `.arm` a `border-radius` of `30% 30% 30% 120%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
new file mode 100644
index 0000000000..81854db2b7
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
@@ -0,0 +1,323 @@
+---
+id: 619d2fd3ff4f772882e3d998
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element.
+
+# --hints--
+
+You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
new file mode 100644
index 0000000000..f11d2a97f4
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
@@ -0,0 +1,333 @@
+---
+id: 619d30350883802921bfcccc
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Now, you are going to use CSS animations to make the penguin wave.
+
+Define a new `@keyframes` named `wave`.
+
+# --hints--
+
+You should define a new `@keyframes` rule.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes'));
+```
+
+You should give the `@keyframes` rule a name of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
new file mode 100644
index 0000000000..3294c31569
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
@@ -0,0 +1,351 @@
+---
+id: 619d324f5915c929f36ae91d
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Give `wave` four waypoints starting at `10%`, and incrementing by `10%`.
+
+# --hints--
+
+You should add a `10%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
+```
+
+You should add a `20%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
+```
+
+You should add a `30%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
+```
+
+You should add a `40%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
+```
+
+You should have 4 waypoints in your keyframe.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
new file mode 100644
index 0000000000..74235426b5
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
@@ -0,0 +1,347 @@
+---
+id: 619d32c7fa21f32aaa91d499
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%');
+const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, '');
+const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
new file mode 100644
index 0000000000..ac97b33ea2
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
@@ -0,0 +1,347 @@
+---
+id: 619d333b738e3c2b5d58b095
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%');
+const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
new file mode 100644
index 0000000000..fd1c9193d0
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
@@ -0,0 +1,362 @@
+---
+id: 619d337765b9f02c10e93722
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+For the third and fourth waypoints, repeat the `transform` pattern once more.
+
+# --hints--
+
+You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%');
+const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%');
+const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
new file mode 100644
index 0000000000..caa7a1fe0a
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
@@ -0,0 +1,357 @@
+---
+id: 619d33c51140292cc5a21742
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function.
+
+# --hints--
+
+You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave');
+```
+
+You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s');
+```
+
+You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite');
+```
+
+You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
new file mode 100644
index 0000000000..e8ab0952d4
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
@@ -0,0 +1,347 @@
+---
+id: 619d3482f505452d861d0f62
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions.
+
+# --hints--
+
+You should use the `.penguin:active` selector.
+
+```js
+assert.match(code, /\.penguin:active\s*\{/);
+```
+
+You should give `.penguin:active` a `transform` of `scale(1.5)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
new file mode 100644
index 0000000000..3530454295
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
@@ -0,0 +1,346 @@
+---
+id: 619d3561a951bf2e41a24f10
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+When you activate the `.penguin` element, it might look as though you can drag it around. This is not true.
+
+Indicate this to users, by giving the active element a `cursor` property of `not-allowed`.
+
+# --hints--
+
+You should give `.penguin:active` a `cursor` property of `not-allowed`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin:active {
+  transform: scale(1.5);
+
+}
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
new file mode 100644
index 0000000000..b2fd620c1f
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
@@ -0,0 +1,357 @@
+---
+id: 619d36103839c82efa95dd34
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`.
+
+# --hints--
+
+You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s');
+```
+
+You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out');
+```
+
+You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+
+}
+--fcc-editable-region--
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
new file mode 100644
index 0000000000..18d3c26b52
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
@@ -0,0 +1,670 @@
+---
+id: 619d3711d04d623000013e9e
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element.
+
+Congratulations! You have completed the Flappy Penguin Workshop.
+
+# --hints--
+
+You should give `.ground` a `height` of `calc(100vh - 300px)`.
+
+```js
+assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: calc(100vh - 300px);
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
new file mode 100644
index 0000000000..9d306c557a
--- /dev/null
+++ b/curriculum/challenges/italian/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Normalize your page, by setting the `width` to `100%`, and `height` to `100vh`.
+
+# --hints--
+
+You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/10-coding-interview-prep/algorithms/implement-binary-search.md b/curriculum/challenges/japanese/10-coding-interview-prep/algorithms/implement-binary-search.md
index 3717280142..d8d5fce695 100644
--- a/curriculum/challenges/japanese/10-coding-interview-prep/algorithms/implement-binary-search.md
+++ b/curriculum/challenges/japanese/10-coding-interview-prep/algorithms/implement-binary-search.md
@@ -10,10 +10,10 @@ dashedName: implement-binary-search
 
 二分探索はソートされた配列内で要素を検索するアルゴリズムで、その時間計算量は **O(log(n))** です。 次のように演算が行われます。
 
-1. ソートされた配列内の中央の `value` (値) を探します。 If `value == target` return `true` (The value has been found and the search is complete).
+1. ソートされた配列内の中央の `value` (値) を探します。 もし `value == target` であれば、`true` を返します。(値が見つかったため、検索が完了。)
 1. 中央の `value < target` であれば、次の比較で配列の右半分を検索します。
 1. 中央の `value > target` であれば、次の比較で配列の左半分を検索します。
-1. If after searching the whole array the value is not present, return `false` (The array has been searched and the value is not in the array).
+1. 配列全体を検索し終わっても値が見つからない場合、`false` を返します。(配列全体の検索が完了し、値が配列内に存在しない。)
 
 このように配列を連続的に半減させており、時間計算量は log(n) になります。 このチャレンジでは、あなたがどのような経路をたどって目標値に到達したかを提示していただきます。
 
@@ -21,7 +21,7 @@ dashedName: implement-binary-search
 
 二分探索アルゴリズムを配列に実装し、配列内で目標値を見つけるためにたどった経路 (各回の中間値比較) を返すような関数 `binarySearch` を記述してください。
 
-この関数は、ソートされた整数配列と目標値を入力として取ります。 そして目標値を見つけるまで、元の配列の各 2 分割で見つけた中間値が含まれる配列を返します (通りがけ順)。 目標値は、返される配列の最後の要素でなければなりません。 If the value is not found, return the string `Value Not Found`.
+この関数は、ソートされた整数配列と目標値を入力として取ります。 そして目標値を見つけるまで、元の配列の各 2 分割で見つけた中間値が含まれる配列を返します (通りがけ順)。 目標値は、返される配列の最後の要素でなければなりません。 値が見つからない場合は、文字列 `Value Not Found` (値が見つかりません) を返します。
 
 例えば、`binarySearch([1,2,3,4,5,6,7], 5)` は `[4,6,5]` を返します。
 
diff --git a/curriculum/challenges/japanese/10-coding-interview-prep/data-structures/add-a-new-element-to-a-binary-search-tree.md b/curriculum/challenges/japanese/10-coding-interview-prep/data-structures/add-a-new-element-to-a-binary-search-tree.md
index 1363011cf3..64eb9528f0 100644
--- a/curriculum/challenges/japanese/10-coding-interview-prep/data-structures/add-a-new-element-to-a-binary-search-tree.md
+++ b/curriculum/challenges/japanese/10-coding-interview-prep/data-structures/add-a-new-element-to-a-binary-search-tree.md
@@ -14,7 +14,7 @@ dashedName: add-a-new-element-to-a-binary-search-tree
 
 最初に、特別な種類の木 (二分木) について説明します。 実際には、特別な二分木である「二分探索木」についてです。 これが何を意味するのかを以下に説明します。 ツリーデータ構造では 1 つの ノードが何本でも枝を持てますが、二分木ではすべてのノードに枝が 2 本しかありません。 さらに二分探索木では、左部分木の各ノードの値が親ノードの値以下になり、右部分木の各ノードの値が親ノードの値以上になるという形で、子部分木を基準にして順序が決まります。 視覚化すると、この関係は一目瞭然です。
 
-<div style='width: 100%; display: flex; justify-content: center; align-items: center;'><img alt="an example of a binary search tree" style='width: 100%; max-width: 350px; background-color: var(--gray-05);' src='https://user-images.githubusercontent.com/18563015/32136009-1e665d98-bbd6-11e7-9133-63184f9f9182.png'></div>
+<div style='width: 100%; display: flex; justify-content: center; align-items: center;'><img alt="二分探索木の例" style='width: 100%; max-width: 350px; background-color: var(--gray-05);' src='https://user-images.githubusercontent.com/18563015/32136009-1e665d98-bbd6-11e7-9133-63184f9f9182.png'></div>
 
 これで、順序付けの関係が簡単に分かります。 注目すべき点は、根ノードである 8 の左側の値はすべて 8 より小さく、右側の値はすべて 8 より大きいということです。 また、この関係がそれぞれの部分木にも当てはまるという点に注意してください。 例えば、左側にある最初の子は部分木です。 3 は親ノードであり、ちょうど 2 つの子ノードを持っています。二分探索木のルールにより、このノードの左側の子 (およびそのすべての子) は 3 より小さく、右側の子 (およびそのすべての子) は 3 よりも大きい (ただし、この構造の根の値よりも小さい) ということは、もう見なくても分かります。
 
diff --git a/curriculum/challenges/japanese/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md b/curriculum/challenges/japanese/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md
index 446366c470..8af1e97e52 100644
--- a/curriculum/challenges/japanese/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md
+++ b/curriculum/challenges/japanese/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md
@@ -12,11 +12,11 @@ dashedName: build-a-nightlife-coordination-app
 
 このプロジェクトに実装する必要がある具体的なユーザー ストーリーはこちらです:
 
-**User Story:** As an unauthenticated user, you can view all bars in your area.
+**ユーザーストーリー:** 認証が済んでいないユーザーである時に、自分がいるエリア内の、すべてのバーを見ることができます。
 
-**User Story:** As an authenticated user, you can add yourself to a bar to indicate you are going there tonight.
+**ユーザーストーリー:** 認証済みのユーザーである時に、自分をバーに追加して、その晩にそこへ行くことを表示できます。
 
-**User Story:** As an authenticated user, you can remove yourself from a bar if you no longer want to go there.
+**ユーザーストーリー:** 認証済みのユーザーである時に、もしそこへ行く気が無くなったときは、自分をバーから削除できます。
 
 **ユーザーストーリー:** 認証されていないユーザーは、ログインする時に、再度検索する必要はありません。
 
diff --git a/curriculum/challenges/japanese/10-coding-interview-prep/take-home-projects/build-a-simon-game.md b/curriculum/challenges/japanese/10-coding-interview-prep/take-home-projects/build-a-simon-game.md
index f9332a9787..6eef92571b 100644
--- a/curriculum/challenges/japanese/10-coding-interview-prep/take-home-projects/build-a-simon-game.md
+++ b/curriculum/challenges/japanese/10-coding-interview-prep/take-home-projects/build-a-simon-game.md
@@ -28,7 +28,7 @@ dashedName: build-a-simon-game
 
 **ユーザーストーリー:** 連続で 20 のステップを正しく入力できれば、ゲームに勝利できます。 私がゲームに勝利したことが通知され、ゲームをもう一度やり直します。
 
-**Hint:** Here are mp3s you can use for each button: `https://cdn.freecodecamp.org/curriculum/take-home-projects/simonSound1.mp3`, `https://cdn.freecodecamp.org/curriculum/take-home-projects/simonSound2.mp3`, `https://cdn.freecodecamp.org/curriculum/take-home-projects/simonSound3.mp3`, `https://cdn.freecodecamp.org/curriculum/take-home-projects/simonSound4.mp3`.
+**ヒント:** 各ボタンの音としてこちらの MP3 を使用しても構いません: `https://cdn.freecodecamp.org/curriculum/take-home-projects/simonSound1.mp3`, `https://cdn.freecodecamp.org/curriculum/take-home-projects/simonSound2.mp3`, `https://cdn.freecodecamp.org/curriculum/take-home-projects/simonSound3.mp3`, `https://cdn.freecodecamp.org/curriculum/take-home-projects/simonSound4.mp3`
 
 完了したら、CodePen のプロジェクトへのリンクを入れて、「このチャレンジを完了しました」ボタンをクリックしてください。
 
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
index cfe15945a7..b0283baa1d 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
@@ -17,22 +17,36 @@ gradient-type(
 );
 ```
 
-`.bb3` に `repeating-linear-gradient` を設定してください。 方向には `90deg` を、最初の 2 つの色には `building-color3` を指定し、3 つ目の色は `15%` 地点で `window-color3` に指定してください。 色の距離を指定しない場合は、適当な値が使用されます。 この例では最初の 2 色はデフォルトで `0%` と `7.5%` になります。これは、始まりが `0%` で、`7.5%` が `15%` の半分だからです。
+`.bb3` に `repeating-linear-gradient` を設定してください。 方向には `90deg` を、最初の 2 つの色には `building-color3` を指定し、3 つ目の色は `15%` 地点で `window-color3` に指定してください。
+
+When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`, so you do not need to set them.
 
 # --hints--
 
-`.bb3` の `background` の設定には `repeating-linear-gradient` を使用する必要があります。
+You should give `.bb3` a `background` using `repeating-linear-gradient`.
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
 ```
 
-`repeating-linear-gradient` の最初の引数には、方向として `90deg` を使用する必要があります。
+You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`.
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
 ```
 
+You should not set the percentage for the first color.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "var(--building-color3)0%");
+```
+
+You should not set the percentage for the second color.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "var(--building-color3)7.5%");
+```
+
 最初の 2 つの色には `--building-color3` を使用する必要があります。
 
 ```js
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
index c7666d1d0b..030537770a 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
@@ -9,7 +9,7 @@ dashedName: step-3
 
 `p` 要素は、ウェブサイト上に文章の段落 (paragraph) を作成するために使われます。 `p` 要素を `h2` 要素の下に作成し、それに次のテキストを設定してください:
 
-`See more cat photos in our gallery.`
+`Everyone loves cute cats online!`
 
 # --hints--
 
@@ -25,13 +25,13 @@ assert(document.querySelector('p'));
 assert(code.match(/<\/p\>/));
 ```
 
-`p` 要素のテキストは `See more cat photos in our gallery.` でなければなりません。テキストに誤字脱字があります。
+Your `p` element's text should be `Everyone loves cute cats online!` You have either omitted the text or have a typo.
 
 ```js
 const extraSpacesRemoved = document
   .querySelector('p')
   .innerText.replace(/\s+/g, ' ');
-assert(extraSpacesRemoved.match(/see more cat photos in our gallery\.?$/i));
+assert.match(extraSpacesRemoved, /everyone loves cute cats online!$/i);
 ```
 
 `p` 要素は `h2` 要素の下に置く必要があります。 順番に誤りがあるようです。
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
index 780633da84..f7860b69e2 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
@@ -49,12 +49,9 @@ assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/i));
 コメントが `p` 要素の上にあるようにしてください。 順番に誤りがあるようです。
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
-    )
+assert.match(
+  code.replace(/\s/g, ''),
+  /<!--todo:addlinktocatphotos--><p>everyonelovescutecatsonline!<\/p>/i
 );
 ```
 
@@ -69,7 +66,7 @@ assert(
     <h2>Cat Photos</h2>
 --fcc-editable-region--
 
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
index afea241d39..75dcf686f6 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -55,10 +55,8 @@ assert(collection.indexOf('MAIN') < collection.indexOf('H1'));
 ```js
 const mainNode = document.querySelector('main');
 const pNode = document.querySelector('p');
-assert(
-  mainNode.contains(pNode) &&
-    pNode.textContent.toLowerCase().match(/see more cat photos in our gallery/)
-);
+assert.isTrue(mainNode.contains(pNode));
+assert.match(pNode.textContent.toLowerCase(), /everyone loves cute cats online!/);
 ```
 
 # --seed--
@@ -73,7 +71,7 @@ assert(
     <h1>CatPhotoApp</h1>
     <h2>Cat Photos</h2>
     <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 636bf324b7..6b37afce36 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -74,14 +74,14 @@ assert(
 assert(document.querySelector('p'));
 ```
 
-`p` 要素のテキストは `See more cat photos in our gallery.` でなければなりません。 `p` 要素のテキストやスペース、句読点を変更しないでください。
+The text of the `p` element should be `Everyone loves cute cats online!` Do not change the text, spacing, or punctuation of the `p` element.
 
 ```js
-assert(
+assert.match(
   document
     .querySelector('p')
-    .innerText.toLowerCase()
-    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
+    .innerText.toLowerCase(),
+    /everyone\s+loves\s+cute\s+cats\s+online!$/
 );
 ```
 
@@ -98,12 +98,12 @@ assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
     </main>
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 95a143d3c4..cf0a89be40 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -52,7 +52,7 @@ assert(collection.indexOf('P') < collection.indexOf('IMG'));
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
     </main>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
index 80e74e2922..d5e1383aae 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
@@ -36,19 +36,19 @@ assert(document.querySelector('img').src);
 `img` 要素の `src` 属性は '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`' に設定される必要があります。 URL が設定されていないか、誤字脱字があります。 URL の大文字小文字も重要です。
 
 ```js
-assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
+assert.strictEqual(document.querySelector('img').src, 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
 ```
 
 `img` 要素の `src` は正しい URL に設定されていますが、属性の値は常に引用符 (") で囲むことが推奨されています。
 
 ```js
-assert(!/\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/);
 ```
 
 `img` 要素を `>` または `/>` で閉じてください。
 
 ```js
-assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\1\s*\/?>/.test(code));
+assert.match(code, /<img\s+src\s*=\s*("|')\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\s*\1\s*\/?>/);
 ```
 
 # --seed--
@@ -62,7 +62,7 @@ assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img>
 --fcc-editable-region--
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
index c9d0adff0c..340c99f034 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
@@ -54,7 +54,7 @@ assert(altText.match(/A cute orange cat lying on its back\.?$/i));
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
 --fcc-editable-region--
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index f88dbde5d7..788ddae5ab 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -75,7 +75,7 @@ assert(
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index 1cb88aef33..67583b78c9 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -15,7 +15,7 @@ dashedName: step-11
 <a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>
 ```
 
-アンカー要素に対して、`link to cat pictures` というアンカーテキストを追加してください。 これがリンクのテキストになります。
+Add the anchor text `cat photos` to the anchor element. これがリンクのテキストになります。
 
 # --hints--
 
@@ -31,12 +31,12 @@ assert(document.querySelector('a'));
 assert(code.match(/<\/a\>/));
 ```
 
-アンカー (`a`) 要素のテキストは `link to cat pictures` である必要があります。 リンクテキストがアンカー (`a`) 要素の開始タグと終了タグの間に置かれていることを確認してください。
+Your anchor (`a`) element's text should be `cat photos`. リンクテキストがアンカー (`a`) 要素の開始タグと終了タグの間に置かれていることを確認してください。
 
 ```js
-assert(
-  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
-    'link to cat pictures'
+assert.strictEqual(
+  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' '),
+    'cat photos'
 );
 ```
 
@@ -51,7 +51,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <a href="https://freecatphotoapp.com"></a>
 --fcc-editable-region--
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
index d32650b64d..c2efae6333 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa2407b521be39a3de7be1
-title: ステップ 14
+title: Step 15
 challengeType: 0
-dashedName: step-14
+dashedName: step-15
 ---
 
 # --description--
@@ -25,22 +25,20 @@ dashedName: step-14
 
 ```js
 const anchor = document.querySelectorAll('p > a');
-assert(
-  anchor.length &&
-    anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+assert.isNotEmpty(anchor);
+assert.strictEqual(anchor[1]?.innerText?.toLowerCase().replace(/\s+/g, ' '), 'cat photos')
 ```
 
 アンカー (`a`) 要素に `target` 属性がありません。 開始タグのタグ名の後にスペースがあることと、すべての属性名の前にスペースがあることを確認してください。
 
 ```js
-assert(document.querySelector('a').hasAttribute('target'));
+assert.isTrue(document.querySelectorAll('a')[1]?.hasAttribute('target'));
 ```
 
 `target` 属性の値は `_blank` である必要があります。 値が設定されていないか、誤字脱字があります。 属性値は引用符で囲むことを忘れないでください。
 
 ```js
-assert(document.querySelector('a').getAttribute('target') === '_blank');
+assert.strictEqual(document.querySelectorAll('a')[1]?.getAttribute('target'), '_blank');
 ```
 
 # --seed--
@@ -54,6 +52,7 @@ assert(document.querySelector('a').getAttribute('target') === '_blank');
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
 --fcc-editable-region--
       <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
index 48d55fdb2c..fa3334aa3b 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa30b9eacea3f48c6300ad
-title: ステップ 15
+title: Step 17
 challengeType: 0
-dashedName: step-15
+dashedName: step-17
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert(document.querySelectorAll('a').length >= 2);
 画像の後に、`a` タグの終了タグがありません。
 
 ```js
-assert(document.querySelectorAll('a').length === 2);
+assert.lengthOf(document.querySelectorAll('a'), 3);
 ```
 
 アンカー (`a`) 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。
@@ -52,7 +52,7 @@ assert(code.match(/<\/a>/g).length >= 2);
 アンカー (`a`) の終了タグは 1 つだけ追加してください。 余分なものは削除してください。
 
 ```js
-assert(code.match(/<\/a>/g).length === 2);
+assert.lengthOf(code.match(/<\/a>/g), 3);
 ```
 
 アンカー (`a`) 要素に `href` 属性がありません。 開始タグのタグ名の後にスペースがあることと、すべての属性名の前にスペースがあることを確認してください。
@@ -86,7 +86,7 @@ assert(document.querySelector('img').parentNode.nodeName === 'A');
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
index 1d701b0385..c9f33a1e16 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa3589eacea3f48c6300ae
-title: ステップ 18
+title: Step 20
 challengeType: 0
-dashedName: step-18
+dashedName: step-20
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
index 3182c613da..0a5a17b83a 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa371beacea3f48c6300af
-title: ステップ 19
+title: Step 21
 challengeType: 0
-dashedName: step-19
+dashedName: step-21
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index 206328c999..20d1242bfa 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa37b9eacea3f48c6300b0
-title: ステップ 20
+title: Step 22
 challengeType: 0
-dashedName: step-20
+dashedName: step-22
 ---
 
 # --description--
@@ -43,7 +43,7 @@ assert.equal(secondSectionLastElemNode?.nodeName , 'UL');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
index e1e8268c38..d6216ff913 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb5ecbeacea3f48c6300b1
-title: ステップ 21
+title: Step 23
 challengeType: 0
-dashedName: step-21
+dashedName: step-23
 ---
 
 # --description--
@@ -63,7 +63,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
index 10d610d242..186943c97b 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6250eacea3f48c6300b2
-title: ステップ 22
+title: Step 24
 challengeType: 0
-dashedName: step-22
+dashedName: step-24
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert.isTrue(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curricu
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
index 0ba78e9d67..7f9ebdd360 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb655eeacea3f48c6300b3
-title: ステップ 23
+title: Step 25
 challengeType: 0
-dashedName: step-23
+dashedName: step-25
 ---
 
 # --description--
@@ -34,11 +34,7 @@ assert.equal(document.querySelectorAll('section')?.[1]?.lastElementChild?.nodeNa
 ラザニアの `img` 要素は `figure` 要素内にネストされている必要があります。
 
 ```js
-assert(
-  document.querySelector('figure > img') &&
-    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
-      'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
-);
+assert.strictEqual(document.querySelector('figure > img')?.src.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg');
 ```
 
 # --seed--
@@ -52,7 +48,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
index e91fc878c7..bd46f0cb18 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6a35eacea3f48c6300b4
-title: ステップ 24
+title: Step 26
 challengeType: 0
-dashedName: step-24
+dashedName: step-26
 ---
 
 # --description--
@@ -82,7 +82,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
index 7883f1d219..fec1975e8c 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d0
-title: ステップ 25
+title: Step 27
 challengeType: 0
-dashedName: step-25
+dashedName: step-27
 ---
 
 # --description--
@@ -61,7 +61,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
index 82a3f34130..f82477dc36 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d1
-title: ステップ 26
+title: Step 28
 challengeType: 0
-dashedName: step-26
+dashedName: step-28
 ---
 
 # --description--
@@ -55,7 +55,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
index 9d36359f3f..826be3d6fc 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d2
-title: ステップ 27
+title: Step 29
 challengeType: 0
-dashedName: step-27
+dashedName: step-29
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert([...document.querySelectorAll('ol')].length == 1);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
index 089be13d27..169f9b7d68 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d3
-title: ステップ 28
+title: Step 30
 challengeType: 0
-dashedName: step-28
+dashedName: step-30
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert.equal(document.querySelectorAll('main > section')?.[1]?.lastElementChild?
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
index fdebb57bc6..05beff4c3c 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d4
-title: ステップ 32
+title: Step 34
 challengeType: 0
-dashedName: step-32
+dashedName: step-34
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
index 1289b66391..36761bd579 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d5
-title: ステップ 34
+title: Step 36
 challengeType: 0
-dashedName: step-34
+dashedName: step-36
 ---
 
 # --description--
@@ -67,7 +67,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
index 10db2dbfef..ba7627225d 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d6
-title: ステップ 35
+title: Step 37
 challengeType: 0
-dashedName: step-35
+dashedName: step-37
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
index b409ff330c..ad5c56941b 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d7
-title: ステップ 36
+title: Step 38
 challengeType: 0
-dashedName: step-36
+dashedName: step-38
 ---
 
 # --description--
@@ -83,7 +83,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
index e0a39d9345..c8e2c47da2 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d8
-title: ステップ 37
+title: Step 39
 challengeType: 0
-dashedName: step-37
+dashedName: step-39
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.isTrue(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
index ce4af7ea64..3aa9e6f78b 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d9
-title: ステップ 40
+title: Step 42
 challengeType: 0
-dashedName: step-40
+dashedName: step-42
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
index 73f3da8fa5..614aa03dd8 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804da
-title: ステップ 42
+title: Step 44
 challengeType: 0
-dashedName: step-42
+dashedName: step-44
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
index 0032e8c8ed..4d72901c47 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804db
-title: ステップ 41
+title: Step 43
 challengeType: 0
-dashedName: step-41
+dashedName: step-43
 ---
 
 # --description--
@@ -49,7 +49,7 @@ assert.strictEqual(document.querySelector('input')?.getAttribute('required'), ''
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
index 87cc964a61..ea2040a3b9 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dc
-title: ステップ 44
+title: Step 46
 challengeType: 0
-dashedName: step-44
+dashedName: step-46
 ---
 
 # --description--
@@ -107,7 +107,7 @@ assert.match(radioInputElem?.nextSibling?.nodeValue?.replace(/\s+/g, ' '), /\s*I
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
index 60f7dd27ba..33896e2d07 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dd
-title: ステップ 45
+title: Step 47
 challengeType: 0
-dashedName: step-45
+dashedName: step-47
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
index 9e84d2c79b..7e6fe4217d 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804de
-title: ステップ 48
+title: Step 50
 challengeType: 0
-dashedName: step-48
+dashedName: step-50
 ---
 
 # --description--
@@ -68,9 +68,10 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
index b50cdd6b53..6e00209062 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804df
-title: ステップ 46
+title: Step 48
 challengeType: 0
-dashedName: step-46
+dashedName: step-48
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert.match(document.querySelector('input')?.id, /^indoor$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
index 9d5afebd29..c500d6ec5e 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e1
-title: ステップ 50
+title: Step 52
 challengeType: 0
-dashedName: step-50
+dashedName: step-52
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
index 389fd27932..7ad6c99b83 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e2
-title: ステップ 54
+title: Step 56
 challengeType: 0
-dashedName: step-54
+dashedName: step-56
 ---
 
 # --description--
@@ -76,7 +76,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
index 5793ec6e62..33e593f494 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e3
-title: ステップ 58
+title: Step 60
 challengeType: 0
-dashedName: step-58
+dashedName: step-60
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
index 290eeb39dd..b85034a643 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e5
-title: ステップ 61
+title: Step 63
 challengeType: 0
-dashedName: step-61
+dashedName: step-63
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.isFalse(document.querySelectorAll('input[type="checkbox"]')?.[2]?.hasAttr
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
index 9cea8eca4d..91539ab643 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e7
-title: ステップ 62
+title: Step 64
 challengeType: 0
-dashedName: step-62
+dashedName: step-64
 ---
 
 # --description--
@@ -48,7 +48,7 @@ assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
index 98a23848b8..09c190d865 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e8
-title: ステップ 63
+title: Step 65
 challengeType: 0
-dashedName: step-63
+dashedName: step-65
 ---
 
 # --description--
@@ -23,11 +23,11 @@ assert(document.querySelector('footer') && code.match(/<\/footer>/));
 assert(document.querySelector('footer > p'));
 ```
 
-`footer` 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があるタグです。
+Your `p` element should have a closing tag. 終了タグは `<` の直後に `/` があるタグです。
 
 ```js
 const pElemClosingTags = code.match(/<\/p\>/g);
-assert(pElemClosingTags && pElemClosingTags.length === 2);
+assert.lengthOf(pElemClosingTags, 3);
 ```
 
 `p` 要素のテキストは `No Copyright - freeCodeCamp.org` でなければなりません。 テキストに誤字脱字があるか、テキストが `p` 要素の開始タグと終了タグの間に入っていない可能性があります。
@@ -48,7 +48,7 @@ assert.match(extraSpacesRemoved, /No Copyright - freeCodeCamp\.org$/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
index 84c0db16b9..5e7d11b2f2 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e9
-title: ステップ 64
+title: Step 66
 challengeType: 0
-dashedName: step-64
+dashedName: step-66
 ---
 
 # --description--
@@ -21,7 +21,7 @@ assert(document.querySelectorAll('footer > p > a').length);
 
 ```js
 const aElemClosingTags = code.match(/<\/a\>/g);
-assert(aElemClosingTags && aElemClosingTags.length === 3);
+assert.lengthOf(aElemClosingTags, 4);
 ```
 
 アンカー (`a`) 要素は値が `https://www.freecodecamp.org` に設定されている `href` 属性を持つ必要があります。 属性または値が設定されていないか、誤字脱字があります。
@@ -59,7 +59,7 @@ assert.match(pText, /^no copyright - freecodecamp.org$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
index a603523dcc..e2d75d255d 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ea
-title: ステップ 65
+title: Step 67
 challengeType: 0
-dashedName: step-65
+dashedName: step-67
 ---
 
 # --description--
@@ -54,7 +54,7 @@ assert(noSpaces.match(/\<\/head\>\<body\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
index 8c6ba062b5..11518ef145 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804eb
-title: ステップ 66
+title: Step 68
 challengeType: 0
-dashedName: step-66
+dashedName: step-68
 ---
 
 # --description--
@@ -56,7 +56,7 @@ assert(document.title && document.title.toLowerCase() === 'catphotoapp');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
index 13bacf17ab..6a89b08d47 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ec
-title: ステップ 67
+title: Step 69
 challengeType: 0
-dashedName: step-67
+dashedName: step-69
 ---
 
 # --description--
@@ -44,7 +44,7 @@ assert(extraSpacesRemoved.match(/\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
index 53ec1619de..bc4a21841c 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ee
-title: ステップ 68
+title: Step 70
 challengeType: 0
-dashedName: step-68
+dashedName: step-70
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\<html/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
index 72e19794b3..646df557ff 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
@@ -1,8 +1,8 @@
 ---
 id: 5efada803cbd2bbdab94e332
-title: ステップ 29
+title: Step 31
 challengeType: 0
-dashedName: step-29
+dashedName: step-31
 ---
 
 # --description--
@@ -42,16 +42,15 @@ assert(
 
 ```js
 const catsImg = document.querySelectorAll('figure > img')[1];
-assert(
-  catsImg &&
-    catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
+assert.strictEqual(
+  catsImg?.src?.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
 );
 ```
 
 新しい画像の `src` は正しい URL に設定されていますが、属性の値は常に引用符で囲むことが推奨されています。
 
 ```js
-assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/);
 ```
 
 # --seed--
@@ -65,7 +64,7 @@ assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/ca
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
index 5904e06345..5871f785c6 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae0543cbd2bbdab94e333
-title: ステップ 30
+title: Step 32
 challengeType: 0
-dashedName: step-30
+dashedName: step-32
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
index b555c4d113..e5c7af74db 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae16e3cbd2bbdab94e334
-title: ステップ 31
+title: Step 33
 challengeType: 0
-dashedName: step-31
+dashedName: step-33
 ---
 
 # --description--
@@ -88,7 +88,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
index 1f75efd36a..815fb378a0 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb23e70dc218d6c85f89b1
-title: ステップ 38
+title: Step 40
 challengeType: 0
-dashedName: step-38
+dashedName: step-40
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(!/\<input\s+type\s*=\s*text/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
index 7b20735cae..44a13b9f3b 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb2c990dc218d6c85f89b2
-title: ステップ 43
+title: Step 45
 challengeType: 0
-dashedName: step-43
+dashedName: step-45
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
index af8b2cfae4..78367ba846 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc4f528d6a74d05e68af74
-title: ステップ 56
+title: Step 58
 challengeType: 0
-dashedName: step-56
+dashedName: step-58
 ---
 
 # --description--
@@ -110,7 +110,7 @@ assert.match(code, />\s+<label\s+for\s*=\s*('|")loving/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
index 1c9a2a5e7f..65c4df3f5a 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc518e8d6a74d05e68af75
-title: ステップ 57
+title: Step 59
 challengeType: 0
-dashedName: step-57
+dashedName: step-59
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
index 11d59d15c9..be71f2f1ec 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc54138d6a74d05e68af76
-title: ステップ 55
+title: Step 57
 challengeType: 0
-dashedName: step-55
+dashedName: step-57
 ---
 
 # --description--
@@ -34,7 +34,7 @@ assert.match(document.querySelector('input[type="checkbox"]')?.id, /^loving$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
index e44578d0ec..b6c62187ee 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc575c8d6a74d05e68af77
-title: ステップ 59
+title: Step 61
 challengeType: 0
-dashedName: step-59
+dashedName: step-61
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
index 85c6f36827..5c36f2f9e4 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5f05a1d8e233dff4a68508d8
-title: ステップ 47
+title: Step 49
 challengeType: 0
-dashedName: step-47
+dashedName: step-49
 ---
 
 # --description--
@@ -92,7 +92,7 @@ assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
index 64bad6870a..3c822e915e 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07be6ef7412fbad0c5626b
-title: ステップ 16
+title: Step 18
 challengeType: 0
-dashedName: step-16
+dashedName: step-18
 ---
 
 # --description--
@@ -40,14 +40,14 @@ assert(code.match(/<\/section\s*>/i));
 assert(document.querySelector('section').parentNode.nodeName === 'MAIN');
 ```
 
-既存の `h2` 要素、コメント、`p` 要素、アンカー (`a`) 要素を、`section` 要素の開始タグと終了タグの間に入れてください。
+The existing `h2`, comment, two `p` elements, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
 
 ```js
 const childrenOfSection = [...document.querySelector('section').childNodes];
 const foundElements = childrenOfSection.filter((child) => {
   return ['H2', 'A', 'P'].includes(child.nodeName);
 });
-assert(foundElements.length === 3);
+assert.lengthOf(foundElements, 4);
 ```
 
 `h1` 要素は `section` 要素の中にネストしないでください。
@@ -65,12 +65,12 @@ assert.isFalse(includesH1);
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
 
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
       <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
index 2211f26f27..fd482e8f22 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07c98cdb9413cbd4b16750
-title: ステップ 17
+title: Step 19
 challengeType: 0
-dashedName: step-17
+dashedName: step-19
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(foundElems.length === 2);
 --fcc-editable-region--
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
index 5c4543b207..a4d7394e98 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07fb1579dc934717801375
-title: ステップ 33
+title: Step 35
 challengeType: 0
-dashedName: step-33
+dashedName: step-35
 ---
 
 # --description--
@@ -62,7 +62,7 @@ assert.lengthOf(document.querySelectorAll('main > section')?.[2]?.children, 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
index d60610b12b..23e2e2d912 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d48e7b435f13ab6550051
-title: ステップ 51
+title: Step 53
 challengeType: 0
-dashedName: step-51
+dashedName: step-53
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
index b1f11eb61b..ace5a54460 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4ab1b435f13ab6550052
-title: ステップ 52
+title: Step 54
 challengeType: 0
-dashedName: step-52
+dashedName: step-54
 ---
 
 # --description--
@@ -79,7 +79,7 @@ assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
index 93a493bb4e..1a77ce7ce0 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4d04b435f13ab6550053
-title: ステップ 53
+title: Step 55
 challengeType: 0
-dashedName: step-53
+dashedName: step-55
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
index ebd03aaee7..f96f403241 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a80975fc4bcae0edb3497
-title: ステップ 49
+title: Step 51
 challengeType: 0
-dashedName: step-49
+dashedName: step-51
 ---
 
 # --description--
@@ -64,9 +64,10 @@ assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
index b416ad8267..a29faad5fd 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a89f1190aff21ae42105a
-title: ステップ 60
+title: Step 62
 challengeType: 0
-dashedName: step-60
+dashedName: step-62
 ---
 
 # --description--
@@ -52,7 +52,7 @@ assert(energeticCheckbox.getAttribute('value').match(/^energetic$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
index 2157aadf66..3ef92b795e 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
@@ -1,8 +1,8 @@
 ---
 id: 62bb4009e3458a128ff57d5d
-title: ステップ 69
+title: Step 71
 challengeType: 0
-dashedName: step-69
+dashedName: step-71
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
@@ -127,7 +127,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
new file mode 100644
index 0000000000..aa057f8e17
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
@@ -0,0 +1,57 @@
+---
+id: 671141d8e32fe934c26fa1be
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Add the words `See more` before the anchor element and `in our gallery` after the anchor element
+
+# --hints--
+
+You should use the existing anchor element, do not create a new one.
+
+```js
+assert.lengthOf(document.querySelectorAll('a'), 1);
+```
+
+You should have the words `See more` before the anchor element.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a>/)
+```
+
+You should have the words `in our gallery` after the anchor element.
+
+```js
+assert.match(code, /<a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+You should have `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery` in your code.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <a href="https://freecatphotoapp.com">cat photos</a>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
new file mode 100644
index 0000000000..78aae1394e
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
@@ -0,0 +1,48 @@
+---
+id: 671141f948cbab359e74cc93
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Add `p` tags to turn `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.` into a paragraph.
+
+# --hints--
+
+You should add a `p` element around `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.`.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P);
+assert.strictEqual(P.innerText, "See more cat photos in our gallery.");
+```
+
+You should still have the anchor element inside the new paragraph.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P.querySelector('a'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
new file mode 100644
index 0000000000..57b4139497
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -0,0 +1,57 @@
+---
+id: 671141feba228a35cefba82d
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Turn the text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+# --hints--
+
+There should be a new anchor element in the first `p` element.
+
+```js
+assert.exists(document.querySelector('p')?.querySelector('a'));
+```
+
+The anchor text should be `cute cats`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.innerText, "cute cats");
+```
+
+The `href` attrivute of the new anchor element should be `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.href, "https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg");
+```
+
+The text of the `p` element should still be `Everyone loves cute cats online!`.
+
+```js
+assert.strictEqual(document.querySelector('p')?.innerText, "Everyone loves cute cats online!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
new file mode 100644
index 0000000000..7256f63593
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
@@ -0,0 +1,47 @@
+---
+id: 671144cdcc01d73f7dd79dc9
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have added the link you can remove the comment.
+
+# --hints--
+
+There should not be any comment in your code.
+
+```js
+assert.notMatch(code, /<!--/);
+assert.notMatch(code, /-->/);
+```
+
+The text `TODO: Add link to cat photos` should not be present anymore.
+
+```js
+assert.notMatch(code, /TODO:?/i)
+assert.notMatch(code, /Add\s*link\s*to\s*cat\s*photos/i)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+--fcc-editable-region--
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
+      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
index eee696b142..6a3649d3d5 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
@@ -1,8 +1,8 @@
 ---
 id: 7cf9b03d81a65668421804c3
-title: ステップ 39
+title: Step 41
 challengeType: 0
-dashedName: step-39
+dashedName: step-41
 ---
 
 # --description--
@@ -66,7 +66,7 @@ assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
index 93597f0d81..418e21789b 100644
--- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
+++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
@@ -56,9 +56,29 @@ Rentals are usually stationary services, not something that stops.
 # --scene--
 
 ```json
-{ "setup": { "background": "company2-center.png", "characters": [
-      { "character": "Maria", "position": {"x":50,"y":0,"z":1.5}, "opacity": 0 } ], "audio": { "filename": "1.3-5.mp3", "startTime": 1, "startTimestamp": 37.92, "finishTimestamp": 42.38 } }, "commands": [
-    { "character": "Maria", "opacity": 1, "startTime": 0 },
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {"x":50,"y":0,"z":1.5},
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "1.3-5.mp3",
+      "startTime": 1,
+      "startTimestamp": 37.92,
+      "finishTimestamp": 42.38
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
     {
       "character": "Maria",
       "startTime": 1,
@@ -73,4 +93,6 @@ Rentals are usually stationary services, not something that stops.
       "opacity": 0,
       "startTime": 5.96
     }
-  ] }
+  ]
+}
+```
diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
index d4e08d4892..b7c5edd310 100644
--- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
+++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
@@ -39,9 +39,29 @@ Refers to the act of being introduced to someone for the first time.
 # --scene--
 
 ```json
-{ "setup": { "background": "company1-boardroom.png", "characters": [
-      { "character": "David", "position": {"x":50,"y":0,"z":1.4}, "opacity": 0 } ], "audio": { "filename": "1.2-5.mp3", "startTime": 1, "startTimestamp": 27.38, "finishTimestamp": 29.06 } }, "commands": [
-    { "character": "David", "opacity": 1, "startTime": 0 },
+{
+  "setup": {
+    "background": "company1-boardroom.png",
+    "characters": [
+      {
+        "character": "David",
+        "position": {"x":50,"y":0,"z":1.4},
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "1.2-5.mp3",
+      "startTime": 1,
+      "startTimestamp": 27.38,
+      "finishTimestamp": 29.06
+    }
+  },
+  "commands": [
+    {
+      "character": "David",
+      "opacity": 1,
+      "startTime": 0
+    },
     {
       "character": "David",
       "startTime": 1,
@@ -56,4 +76,6 @@ Refers to the act of being introduced to someone for the first time.
       "opacity": 0,
       "startTime": 3.18
     }
-  ] }
+  ]
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md b/curriculum/challenges/japanese/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
index fdd7771c7f..bd0ce8863b 100644
--- a/curriculum/challenges/japanese/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
+++ b/curriculum/challenges/japanese/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
@@ -24,13 +24,13 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 # --hints--
 
-You should define a funtion named `maskEmail`.
+You should define a function named `maskEmail`.
 
 ```js
 assert.isFunction(maskEmail);
 ```
 
-The `maskEmail` funtion should take a string, `email` as an argument.
+The `maskEmail` function should take a string, `email` as an argument.
 
 ```js
 assert.match(maskEmail.toString(), /\s*maskEmail\(\s*\w+\s*\)/);
diff --git a/curriculum/challenges/japanese/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md b/curriculum/challenges/japanese/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
index cefbcfd944..6ebd40d2b4 100644
--- a/curriculum/challenges/japanese/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
+++ b/curriculum/challenges/japanese/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
@@ -15,7 +15,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 1. Define a function called `isLeapYear` that takes a number as an argument.
 2. Outside the function, declare a variable `year` that stores the value of the year you want to check.
-3. Inside the funtion, use an `if/ else` statement or a ternary operator to check if the year is a leap year.
+3. Inside the function, use an `if/ else` statement or a ternary operator to check if the year is a leap year.
 4. To check if the year is a leap year, fulfill the following conditions:
 
    - If the year is divisible by `4`, then it is a leap year.
@@ -34,7 +34,7 @@ You should define a function named `isLeapYear`.
 assert(typeof isLeapYear === 'function');
 ```
 
-The `isLeapYear` funtion should take a number as an argument.
+The `isLeapYear` function should take a number as an argument.
 
 ```js
 assert.match(isLeapYear.toString(), /\s*isLeapYear\(\s*\w+\s*\)/);
diff --git a/curriculum/challenges/japanese/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md b/curriculum/challenges/japanese/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
index 6673c1d5fb..a0458dc280 100644
--- a/curriculum/challenges/japanese/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
+++ b/curriculum/challenges/japanese/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
@@ -343,7 +343,7 @@ assert(usesFlex || usesFlexMedia)
                     <div class="desc">
                         <h2>Fast Shipping</h2>
                         <p>
-                            We make sure you recieve your trombone as soon as we have
+                            We make sure you receive your trombone as soon as we have
                             finished making it. We also provide free returns if you are not
                             satisfied.
                         </p>
diff --git a/curriculum/challenges/japanese/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md b/curriculum/challenges/japanese/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
index bdd51b0cba..436d464855 100644
--- a/curriculum/challenges/japanese/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
+++ b/curriculum/challenges/japanese/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
@@ -248,7 +248,7 @@ for (let anchor of anchors) {
         <h1>Discover Italy</h1>
         <p>Art, folklore, food, nature, and more. Choose among our wide selection of guided tours and excursions, and live an unforgettable experience exploring Italy.</p>
         <h2>Packages</h2>
-        <p>We offer an extensive range of holiday solutions to accomodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
+        <p>We offer an extensive range of holiday solutions to accommodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
         <ul>
             <li><a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li>
             <li><a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</a></li>
diff --git a/curriculum/challenges/japanese/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md b/curriculum/challenges/japanese/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
index 43ecf43115..4f1257b2d1 100644
--- a/curriculum/challenges/japanese/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
+++ b/curriculum/challenges/japanese/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
@@ -278,7 +278,7 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
           </li>
           <li>
             <strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat
-            with a high-yeidling American breed, creating a strain that responds
+            with a high-yielding American breed, creating a strain that responds
             well to fertilizer. It goes on to provide 95% of Mexico's wheat.
           </li>
           <li>
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
new file mode 100644
index 0000000000..6ced83e0fe
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
@@ -0,0 +1,121 @@
+---
+id: 670803abcb3e980233da4768
+title: What Are Divs and Spans, and When Should You Use Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-divs-and-spans
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What type of element is a `div` element?
+
+## --answers--
+
+An inline-level element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+An inline-block element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+A block-inline element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+A block-level element.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What kind of an element is a `span` element?
+
+## --answers--
+
+An inline-level element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+---
+
+An inline element.
+
+---
+
+A block element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+---
+
+A block-level element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What should you group using a `div` element?
+
+## --answers--
+
+Block-level content and larger sections.
+
+---
+
+Inline texts and smaller sections.
+
+### --feedback--
+
+Think about related and larger content.
+
+---
+
+The whole HTML content.
+
+### --feedback--
+
+Think about related and larger content.
+
+---
+
+A small chuck of text.
+
+### --feedback--
+
+Think about related and larger content.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
new file mode 100644
index 0000000000..6c660565a2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
@@ -0,0 +1,121 @@
+---
+id: 6708143cab2b583ecd3324f5
+title: What Are Attributes, and How Do They Work?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-attributes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of these best describes a boolean attribute?
+
+## --answers--
+
+They always require a value.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+---
+
+They add JavaScript functionality to your code.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+---
+
+Their presence implies true.
+
+---
+
+They are not different from regular attributes.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What do regular attributes do in HTML?
+
+## --answers--
+
+They provide additional information about an element.
+
+---
+
+They provide the background information about an element.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+---
+
+They are replacements for HTML elements.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+---
+
+They allow developers to toggle a feature on and off.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of these differentiates a boolean attribute from a regular attribute?
+
+## --answers--
+
+A boolean attribute is true and a regular attribute is false.
+
+---
+
+A boolean attribute requires a value but a regular attribute does not.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+---
+
+A boolean attribute provides additional information about an element but a regular attribute does not.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+---
+
+A boolean attribute does not require a value but a regular attribute does.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
new file mode 100644
index 0000000000..4007ac4197
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
@@ -0,0 +1,125 @@
+---
+id: 6708382cf088b216580a9ff1
+title: What Are IDs and Classes, and When Should You Use Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-ids-and-classes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+When should you use an `id` versus a `class`?
+
+## --answers--
+
+Use a `class` when you want a unique identifier that should only apply to one element.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Use an `id` when you need a unique identifier for a specific element, and use a `class` when you want to apply styles or behavior to multiple elements.
+
+---
+
+Use an `id` when you want to style multiple elements consistently across different parts of your webpage.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Use an `id` when you want to apply styles that can be easily overridden by other styles in your CSS.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What happens if you try to use duplicate an `id` in your HTML?
+
+## --answers--
+
+It can lead to unwanted results and issues when trying to apply styles or targeting an element in JavaScript.
+
+---
+
+The program will crash.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Nothing will happen.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+There will be a popup alert message in the browser window.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of the following is NOT a correct value for the `id` attribute?
+
+## --answers--
+
+`id="heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main-heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
new file mode 100644
index 0000000000..3ea5a03c99
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
@@ -0,0 +1,121 @@
+---
+id: 67083868d5fdcb17bf8c14bd
+title: What Are HTML Entities, and What Are Some Common Examples?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-html-entities
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is an HTML entity (character reference)?
+
+## --answers--
+
+A set of Google fonts.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A group of images and captions.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A set of characters used to represent JavaScript code.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A set of characters used to represent a reserved character in HTML.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What are the three types of character references?
+
+## --answers--
+
+Named, Roman and Hexadecimal numeric character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+---
+
+Octal, Named and Binary character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+---
+
+Named, Decimal numeric, and Hexadecimal numeric character references.
+
+---
+
+Asymmetric, Decimal numeric, and Hexadecimal numeric character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which of the following is the correct syntax for a named character reference?
+
+## --answers--
+
+`&amp;`
+
+---
+
+`;amp;`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+---
+
+`&amp>>`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+---
+
+`&amp&`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
new file mode 100644
index 0000000000..7412866fc7
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
@@ -0,0 +1,121 @@
+---
+id: 670838977810401844af6fe0
+title: What Is the Role of the Link Element in HTML, and How Can It Be Used to Link to External Stylesheets?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-link-element-in-html
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the role of the `link` element in HTML?
+
+## --answers--
+
+It specifies the content type of the linked resource.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It determines the visibility of the linked resource on the webpage.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It defines the font size of the linked resource when displayed.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It is used to link to external resources like stylesheets and site icons.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is the role of the `rel` attribute inside the `link` element?
+
+## --answers--
+
+It is used to indicate the language of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+---
+
+It is used to specify the relationship between the linked resource and the HTML document.
+
+---
+
+It is used to define the media type of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+---
+
+It is used to determine the size of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What is a favicon?
+
+## --answers--
+
+A type of JavaScript file used to enhance website functionality.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+---
+
+A type of font used to style text on a website.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+---
+
+A small icon typically displayed in the browser tab next to the site title.
+
+---
+
+A security feature used to prevent cross-site scripting attacks.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
new file mode 100644
index 0000000000..85b77abd45
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
@@ -0,0 +1,121 @@
+---
+id: 670838b10ee87a18e5faff62
+title: What Is the Role of the Script Element in HTML, and How Can It Be Used to Link to External JavaScript Files?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-script-element-in-html
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which attribute is used to link to an external JavaScript file?
+
+## --answers--
+
+The `div` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location/
+
+---
+
+The `defer` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location.
+
+---
+
+The `async` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location.
+
+---
+
+The `src` attribute.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is separation of concerns?
+
+## --answers--
+
+It's about making sure everyone on the team has their own clear responsibilities.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+---
+
+A design principle where you separate your programs into distinct sections and have each section address a separate concern.
+
+---
+
+The act of combining all aspects of a program into a single module for simplicity.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+---
+
+It involves dividing up tasks among team members without considering how they might overlap or affect each other.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which of the following is the correct syntax for linking to an external JavaScript file?
+
+## --answers--
+
+`<script div="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+---
+
+`<script alt="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+---
+
+`<script src="path-to-javascript-file.js"></script>`
+
+---
+
+`<script defer="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
new file mode 100644
index 0000000000..dd0270925c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
@@ -0,0 +1,121 @@
+---
+id: 670838e914096b194b0c51aa
+title: What Is an HTML Boilerplate, and Why Is It Important?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-an-html-boilerplate
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Where would you set the character encoding for your page?
+
+## --answers--
+
+A `meta` element in the `body`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+---
+
+A `head` element in the `body`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+---
+
+A `meta` element in the `head`.
+
+---
+
+In the `DOCTYPE`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Where would you set the language for your page?
+
+## --answers--
+
+In the opening `html` tag.
+
+---
+
+A `meta` element in the `body`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+---
+
+A `head` element in the `body`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+---
+
+A `meta` element in the `head`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+## --video-solution--
+
+1
+
+## --text--
+
+What purpose does a boilerplate serve?
+
+## --answers--
+
+Provides a starting structure for your websites.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+Ensures you are not missing any essential elements.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+Allows you to get started writing the content of your page faster.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+All of the above.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
new file mode 100644
index 0000000000..57fce3537b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
@@ -0,0 +1,120 @@
+---
+id: 670839051794aa19fcef6dc8
+title: What Is UTF-8 Character Encoding and Why Is It Needed?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-utf-8-character-encoding
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+Which attribute is used to set the UTF-8 character encoding for HTML documents?
+
+## --answers--
+
+`pattern`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+---
+
+`content`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+---
+
+`charset`
+
+---
+
+`lang`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is character encoding?
+
+## --answers--
+
+A method computers use to store characters as data.
+
+---
+
+A way to compress text files.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+---
+
+It determines the font used to display text on a screen.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+---
+
+It refers to the process of converting spoken language into written text.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+## --video-solution--
+
+1
+
+## --text--
+
+How many bits are inside of a byte?
+
+## --answers--
+
+1
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+33
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+7
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+8
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
new file mode 100644
index 0000000000..96e393015a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
@@ -0,0 +1,121 @@
+---
+id: 67083952f800051a8a21fcfd
+title: What Is the Role of the Meta Description, and How Does It Affect SEO?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-meta-description
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which element is used to set the description for a web page?
+
+## --answers--
+
+`img`
+
+### --feedback--
+
+Look closely to the title of this video
+
+---
+
+`meta`
+
+---
+
+`slot`
+
+### --feedback--
+
+Look closely to the title of this video
+
+---
+
+`figure`
+
+### --feedback--
+
+Look closely to the title of this video
+
+## --video-solution--
+
+2
+
+## --text--
+
+What does SEO stand for?
+
+## --answers--
+
+Slot Engine Optimization
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Site Enhancement Outreach
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Social Engagement Optimization
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Search Engine Optimization
+
+## --video-solution--
+
+4
+
+## --text--
+
+Where does the page's description typically show up?
+
+## --answers--
+
+Inside the `figure` element.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+---
+
+Inside the `footer` element.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+---
+
+In the search engine results page.
+
+---
+
+In a popup alert message.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
new file mode 100644
index 0000000000..7977b8cc03
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
@@ -0,0 +1,121 @@
+---
+id: 6708396caa00e11b597b3365
+title: What Is the Role of Open Graph Tags, and How Do They Affect SEO?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-open-graph-tags
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What are open graph properties used for?
+
+## --answers--
+
+For embedding interactive multimedia content directly into web pages.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+---
+
+To set how your website's content will be seen on different social media platforms.
+
+---
+
+For generating dynamic pop-up advertisements on websites.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+---
+
+For encrypting sensitive data transmitted between web servers and users' browsers.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What does the `name="og:title"` do in the `meta` element?
+
+## --answers--
+
+It automatically adjusts the font size and style of the webpage title based on user preferences.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It directs the browser to display a specific emoticon or emoji as the title of the webpage.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It causes the webpage to play a specific audio file when the title is displayed in the browser tab.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It specifies the title of your web page content when it is shared on social media platforms.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What does the `property="og:type"` do in the `meta` element?
+
+## --answers--
+
+It selects the page's default font style.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+---
+
+It triggers a pop-up advertisement when the webpage is loaded.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+---
+
+It specifies the type of content used for your web page when it is shared on social media platforms.
+
+---
+
+It changes the webpage's background color based on the user's time zone.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/japanese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/japanese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
index 692385ab63..c833584c2d 100644
--- a/curriculum/challenges/japanese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
+++ b/curriculum/challenges/japanese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is asynchronous programming?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to execute code in a sequential order.
 
 ---
 
-Placeholder distractor 2
+A technique to handle errors in synchronous code.
 
 ---
 
-Placeholder distractor 3
+A way to guarantee task order.
 
 #### --answer--
 
-Placeholder answer
+A method to execute code concurrently without blocking the main thread.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `async` attribute do when used in a `<script>` tag?
 
 #### --distractors--
 
-Placeholder distractor 1
+It allows the script to be executed after the HTML document has been completely parsed.
 
 ---
 
-Placeholder distractor 2
+It ensures the script runs in a synchronous manner.
 
 ---
 
-Placeholder distractor 3
+It delays the script execution until the browser is idle.
 
 #### --answer--
 
-Placeholder answer
+The script is downloaded in parallel with parsing the page and executed as soon as it is available.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Fetch API in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manage asynchronous callbacks.
 
 ---
 
-Placeholder distractor 2
+To create and manage cookies.
 
 ---
 
-Placeholder distractor 3
+To render dynamic HTML content.
 
 #### --answer--
 
-Placeholder answer
+To make network requests to servers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which `HTTP` method is used to send data to a server for processing?
 
 #### --distractors--
 
-Placeholder distractor 1
+`GET`
 
 ---
 
-Placeholder distractor 2
+`DELETE`
 
 ---
 
-Placeholder distractor 3
+`HEAD`
 
 #### --answer--
 
-Placeholder answer
+`POST`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `res.json()` method do in Express.js?
 
 #### --distractors--
 
-Placeholder distractor 1
+It retrieves data from a JSON file.
 
 ---
 
-Placeholder distractor 2
+It parses a JSON string into a JavaScript object.
 
 ---
 
-Placeholder distractor 3
+It sends raw JSON as a response without any processing.
 
 #### --answer--
 
-Placeholder answer
+It converts a JavaScript object to a JSON string and sends it as a response.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a promise in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to synchronize multiple operations.
 
 ---
 
-Placeholder distractor 2
+A callback function that runs after an operation.
 
 ---
 
-Placeholder distractor 3
+A technique to handle errors in asynchronous code.
 
 #### --answer--
 
-Placeholder answer
+An object that represents the eventual completion (or failure) of an asynchronous operation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does promise chaining allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Execute multiple asynchronous operations in parallel.
 
 ---
 
-Placeholder distractor 2
+Handle synchronous operations more efficiently.
 
 ---
 
-Placeholder distractor 3
+Retry failed operations automatically.
 
 #### --answer--
 
-Placeholder answer
+Pass the result of one promise to the next.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle successful completion of a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.catch()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.then()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle errors in a promise chain?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.then()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.catch()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the use of the `.finally()` method in a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+It returns the result of the promise.
 
 ---
 
-Placeholder distractor 2
+It stops the execution of subsequent promise handlers.
 
 ---
 
-Placeholder distractor 3
+It retries the promise if it fails.
 
 #### --answer--
 
-Placeholder answer
+It executes code after a promise is fulfilled or rejected, regardless of the outcome.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the syntax for declaring an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+`function myFunction() {}`
 
 ---
 
-Placeholder distractor 2
+`function async myFunction() {}`
 
 ---
 
-Placeholder distractor 3
+`async {} => ()`
 
 #### --answer--
 
-Placeholder answer
+`async function myFunction() {}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `await` keyword do in an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+It creates a new promise.
 
 ---
 
-Placeholder distractor 2
+It executes code immediately without waiting.
 
 ---
 
-Placeholder distractor 3
+It returns the result of the promise.
 
 #### --answer--
 
-Placeholder answer
+It pauses the execution of the function until the promise is resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Geolocation API?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manipulate HTML elements.
 
 ---
 
-Placeholder distractor 2
+To create and manage map elements.
 
 ---
 
-Placeholder distractor 3
+To control the device's camera.
 
 #### --answer--
 
-Placeholder answer
+To retrieve the geographical location of a device.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method of the Geolocation API is used to get the current position of the device?
 
 #### --distractors--
 
-Placeholder distractor 1
+`getLocation()`
 
 ---
 
-Placeholder distractor 2
+`getPosition()`
 
 ---
 
-Placeholder distractor 3
+`getLatLong()`
 
 #### --answer--
 
-Placeholder answer
+`getCurrentPosition()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What parameters can be passed to the `getCurrentPosition()` method?
 
 #### --distractors--
 
-Placeholder distractor 1
+Only the success callback function.
 
 ---
 
-Placeholder distractor 2
+Only options.
 
 ---
 
-Placeholder distractor 3
+One the error callback function.
 
 #### --answer--
 
-Placeholder answer
+Success and error callback functions, along with options.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What will the following code return? `fetch('https://api.example.com/data')`
 
 #### --distractors--
 
-Placeholder distractor 1
+The JSON response directly.
 
 ---
 
-Placeholder distractor 2
+An error if the URL is not reachable.
 
 ---
 
-Placeholder distractor 3
+A synchronous response.
 
 #### --answer--
 
-Placeholder answer
+A `Promise` that resolves to a `Response` object
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default HTTP method for the Fetch API?
 
 #### --distractors--
 
-Placeholder distractor 1
+`POST`
 
 ---
 
-Placeholder distractor 2
+`PUT`
 
 ---
 
-Placeholder distractor 3
+`DELETE`
 
 #### --answer--
 
-Placeholder answer
+`GET`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `Promise.all()` method do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resolves a single promise.
 
 ---
 
-Placeholder distractor 2
+It rejects the first promise that fails.
 
 ---
 
-Placeholder distractor 3
+It runs all promises sequentially.
 
 #### --answer--
 
-Placeholder answer
+It executes multiple promises concurrently and returns the results when all are resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you handle multiple asynchronous operations using async/await?
 
 #### --distractors--
 
-Placeholder distractor 1
+You must always use `.then()` for each operation.
 
 ---
 
-Placeholder distractor 2
+You cannot handle multiple operations with async/await.
 
 ---
 
-Placeholder distractor 3
+You must use callback functions for all operations.
 
 #### --answer--
 
-Placeholder answer
+You can use `await` for each operation in sequence and put them inside an async function.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is true about the `fetch` API?
 
 #### --distractors--
 
-Placeholder distractor 1
+It can only handle `GET` requests.
 
 ---
 
-Placeholder distractor 2
+It requires a callback function for handling responses.
 
 ---
 
-Placeholder distractor 3
+It only works in synchronous code.
 
 #### --answer--
 
-Placeholder answer
+It is used to make HTTP requests to a server.
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md b/curriculum/challenges/japanese/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
index b43c4043e7..b6812d1bbf 100644
--- a/curriculum/challenges/japanese/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
+++ b/curriculum/challenges/japanese/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
@@ -381,7 +381,7 @@ Gives animations to the page.
 
 ---
 
-Improves Search Emgine Optimiztion (SEO).
+Improves Search Emgine Optimization (SEO).
 
 #### --answer--
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/japanese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
index 80af1166b6..cac5b80e72 100644
--- a/curriculum/challenges/japanese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
+++ b/curriculum/challenges/japanese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What happens when there is too much content to fit in an element box?
 
 #### --distractors--
 
-Placeholder distractor 1
+Underflow
 
 ---
 
-Placeholder distractor 2
+Compression
 
 ---
 
-Placeholder distractor 3
+Padding
 
 #### --answer--
 
-Placeholder answer
+Overflow
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default behavior of CSS when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+Content is hidden
 
 ---
 
-Placeholder distractor 2
+Content is clipped
 
 ---
 
-Placeholder distractor 3
+Content is resized
 
 #### --answer--
 
-Placeholder answer
+Content is visible
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why does CSS typically avoid hiding content when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+To enhance page design by hiding irrelevant content
 
 ---
 
-Placeholder distractor 2
+To save memory and load pages faster
 
 ---
 
-Placeholder distractor 3
+To automatically fix broken layout issues
 
 #### --answer--
 
-Placeholder answer
+To prevent data loss and make issues noticeable
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you handle overflow in CSS to hide content or add scrollbars?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars
 
 ---
 
-Placeholder distractor 2
+Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars
 
 ---
 
-Placeholder distractor 3
+Use `overflow: none` to hide content and `overflow: show` to display scrollbars
 
 #### --answer--
 
-Placeholder answer
+Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you specify different scrolling behaviors for the x-axis and y-axis in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+By using `scroll-x` and `scroll-y` properties
 
 ---
 
-Placeholder distractor 2
+By using `overflow-x` and `overflow-y` separately in every case
 
 ---
 
-Placeholder distractor 3
+By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x`
 
 #### --answer--
 
-Placeholder answer
+By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform` CSS property allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Change the color and font style of an element
 
 ---
 
-Placeholder distractor 2
+Adjust the margin and padding of an element
 
 ---
 
-Placeholder distractor 3
+Modify the visibility and display of an element
 
 #### --answer--
 
-Placeholder answer
+Rotate, scale, skew, or translate an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform-box: fill-box` property do in an animation that rotates an element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resizes the element to fit the canvas during the transformation
 
 ---
 
-Placeholder distractor 2
+It changes the background of the element during transformation
 
 ---
 
-Placeholder distractor 3
+It sets the transform origin to the top-left corner of the element
 
 #### --answer--
 
-Placeholder answer
+It sets the transform origin to the center of the element's bounding box, allowing it to spin in place
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `transform-origin` property in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It controls the animation speed of transformed elements
 
 ---
 
-Placeholder distractor 2
+It defines the display type of transformed elements
 
 ---
 
-Placeholder distractor 3
+It sets the background of transformed elements
 
 #### --answer--
 
-Placeholder answer
+It specifies the point around which a transformation is applied to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does margin affect the size of an element in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Margin increases the actual size of the element's box
 
 ---
 
-Placeholder distractor 2
+Margin has no effect on the element's size or position
 
 ---
 
-Placeholder distractor 3
+Margin decreases the total area the element occupies on the page
 
 #### --answer--
 
-Placeholder answer
+Margin affects the total area an element occupies but is not part of the actual size of the box
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the content area of an element in CSS represent?
 
 #### --distractors--
 
-Placeholder distractor 1
+It defines the margins and padding around the element
 
 ---
 
-Placeholder distractor 2
+It specifies the border thickness of the element
 
 ---
 
-Placeholder distractor 3
+It controls the visibility of the element on the page
 
 #### --answer--
 
-Placeholder answer
+It contains the "real" content of the element, such as text, images, or videos
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the difference between `content-box` and `border-box` in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`content-box` includes padding and border, while `border-box` includes only content dimensions
 
 ---
 
-Placeholder distractor 2
+Both `content-box` and `border-box` include only the border dimensions
 
 ---
 
-Placeholder distractor 3
+`content-box` is used for 2D elements, while `border-box` is used for 3D elements
 
 #### --answer--
 
-Placeholder answer
+`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+To apply default styles to all elements for faster loading
 
 ---
 
-Placeholder distractor 2
+To minimize the size of CSS files by removing unused styles
 
 ---
 
-Placeholder distractor 3
+To optimize images and fonts for better performance
 
 #### --answer--
 
-Placeholder answer
+To remove default browser styling and create a consistent baseline for styling across different browsers
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What are the common types of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bootstrap Reset, Tailwind Reset, and Foundation Reset
 
 ---
 
-Placeholder distractor 2
+Simple Reset, Comprehensive Reset, and Adaptive Reset
 
 ---
 
-Placeholder distractor 3
+Minimal Reset, Advanced Reset, and Legacy Reset
 
 #### --answer--
 
-Placeholder answer
+Normalize.css, Eric Meyer's Reset, and HTML5 Reset
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `scale3d()` property value do in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It rotates an element in 3D space
 
 ---
 
-Placeholder distractor 2
+It skews an element on the x, y, and z axes
 
 ---
 
-Placeholder distractor 3
+It translates an element in 3D space
 
 #### --answer--
 
-Placeholder answer
+It scales an element along the x, y, and z axes
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the total width of an element calculated in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Total width = width + margin + padding + border
 
 ---
 
-Placeholder distractor 2
+Total width = width + margin + padding
 
 ---
 
-Placeholder distractor 3
+Total width = width + margin + border
 
 #### --answer--
 
-Placeholder answer
+Total width = width + left padding + right padding + left border + right border
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the filter property in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the layout of the element on the page
 
 ---
 
-Placeholder distractor 2
+It changes the background color and texture of an element
 
 ---
 
-Placeholder distractor 3
+It alters the size and position of an element
 
 #### --answer--
 
-Placeholder answer
+It applies visual effects like blur and saturation to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the `filter` property specified in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+As only a single function, where percentage values must be used
 
 ---
 
-Placeholder distractor 2
+As `block` or `inline`, with values expressed in pixels
 
 ---
 
-Placeholder distractor 3
+As `none` or multiple functions, but only percentage values are accepted
 
 #### --answer--
 
-Placeholder answer
+As `none` or one or more functions, where percentage values can also be expressed as decimals
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `contrast()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white
 
 ---
 
-Placeholder distractor 2
+Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it
 
 ---
 
-Placeholder distractor 3
+Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque
 
 #### --answer--
 
-Placeholder answer
+Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `hue-rotate()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the brightness of the input image based on degrees
 
 ---
 
-Placeholder distractor 2
+It rotates an element's size and position in the document
 
 ---
 
-Placeholder distractor 3
+It adjusts the saturation and contrast of the input image
 
 #### --answer--
 
-Placeholder answer
+It applies a hue rotation, where the `<angle>` value defines the degrees around the hue color circle
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens when two animated filters have different function list lengths in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+The shorter list's filters override the longer list's filters
 
 ---
 
-Placeholder distractor 2
+The filters are discarded and no animation is applied
 
 ---
 
-Placeholder distractor 3
+Only the first filter function in each list is animated
 
 #### --answer--
 
-Placeholder answer
+The longer list's missing equivalent filter functions are added to the shorter list using their initial values
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md b/curriculum/challenges/japanese/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
index 2f36f50f71..698708ccfd 100644
--- a/curriculum/challenges/japanese/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
+++ b/curriculum/challenges/japanese/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+Which method is used to check if an `input` element's value satisfies the validation rules?
 
 #### --distractors--
 
-Placeholder distractor 1
+`validateInput()`
 
 ---
 
-Placeholder distractor 2
+`isValid()`
 
 ---
 
-Placeholder distractor 3
+`checkValue()`
 
 #### --answer--
 
-Placeholder answer
+`checkValidity()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if the `checkValidity()` method finds an invalid `input`?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is automatically submitted
 
 ---
 
-Placeholder distractor 2
+Nothing happens
 
 ---
 
-Placeholder distractor 3
+The `input` value is cleared
 
 #### --answer--
 
-Placeholder answer
+The browser displays a validation message
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to customize the message shown during validation failure?
 
 #### --distractors--
 
-Placeholder distractor 1
+`setErrorMessage()`
 
 ---
 
-Placeholder distractor 2
+`setValidationMessage()`
 
 ---
 
-Placeholder distractor 3
+`customMessage()`
 
 #### --answer--
 
-Placeholder answer
+`setCustomValidity()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default validation behavior for required fields when the form is submitted?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is submitted even if required fields are empty
 
 ---
 
-Placeholder distractor 2
+The form submits but gives a warning
 
 ---
 
-Placeholder distractor 3
+The form resets the `input` values
 
 #### --answer--
 
-Placeholder answer
+The browser stops the form submission if required fields are empty
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which actions does not cause an HTML form to be checked for errors?
 
 #### --distractors--
 
-Placeholder distractor 1
+Changing the `input` value
 
 ---
 
-Placeholder distractor 2
+Submitting the form
 
 ---
 
-Placeholder distractor 3
+Calling `reportValidity()`
 
 #### --answer--
 
-Placeholder answer
+Clicking a reset button
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does `checkValidity()` return when all form inputs are valid?
 
 #### --distractors--
 
-Placeholder distractor 1
+`false`
 
 ---
 
-Placeholder distractor 2
+`undefined`
 
 ---
 
-Placeholder distractor 3
+`null`
 
 #### --answer--
 
-Placeholder answer
+`true`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When does the `checkValidity()` method stop form submission?
 
 #### --distractors--
 
-Placeholder distractor 1
+When the form has no submit button
 
 ---
 
-Placeholder distractor 2
+When the form `action` is empty
 
 ---
 
-Placeholder distractor 3
+When the form method is POST
 
 #### --answer--
 
-Placeholder answer
+When the form has at least one invalid `input` (and the default behavior of form submission is prevented).
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if `checkValidity()` is called, but a field fails validation?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form submits without error
 
 ---
 
-Placeholder distractor 2
+The `input` values are cleared
 
 ---
 
-Placeholder distractor 3
+The form closes immediately
 
 #### --answer--
 
-Placeholder answer
+The invalid field is highlighted and a message appears
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which action will make `checkValidity()` run?
 
 #### --distractors--
 
-Placeholder distractor 1
+Resetting the form
 
 ---
 
-Placeholder distractor 2
+Changing an `input` value
 
 ---
 
-Placeholder distractor 3
+Clicking an anchor tag
 
 #### --answer--
 
-Placeholder answer
+Submitting the form manually
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of calling `checkValidity()` before submitting a form?
 
 #### --distractors--
 
-Placeholder distractor 1
+To automatically submit the form
 
 ---
 
-Placeholder distractor 2
+To reload the page
 
 ---
 
-Placeholder distractor 3
+To clear all `input` fields
 
 #### --answer--
 
-Placeholder answer
+To check if all `input` elements meet their specified constraints
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the main purpose of `e.preventDefault()`?
 
 #### --distractors--
 
-Placeholder distractor 1
+To reload the form
 
 ---
 
-Placeholder distractor 2
+To clear form data
 
 ---
 
-Placeholder distractor 3
+To reset the form values
 
 #### --answer--
 
-Placeholder answer
+To stop the default action of an event
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When used on a form's submit event, what does `e.preventDefault()` do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It submits the form
 
 ---
 
-Placeholder distractor 2
+It clears all form fields
 
 ---
 
-Placeholder distractor 3
+It disables the form temporarily
 
 #### --answer--
 
-Placeholder answer
+It prevents the form from being submitted
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In which scenario is `e.preventDefault()` most useful?
 
 #### --distractors--
 
-Placeholder distractor 1
+When handling a button click that submits a form
 
 ---
 
-Placeholder distractor 2
+When closing a modal dialog
 
 ---
 
-Placeholder distractor 3
+When opening a new page
 
 #### --answer--
 
-Placeholder answer
+When submitting a form via AJAX and preventing a page reload
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if you forget to call `e.preventDefault()` on a form submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is submitted via AJAX
 
 ---
 
-Placeholder distractor 2
+The form does not submit
 
 ---
 
-Placeholder distractor 3
+The form data is lost
 
 #### --answer--
 
-Placeholder answer
+The form submits and refreshes the page
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which default behavior can be prevented using `e.preventDefault()`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Editing a form
 
 ---
 
-Placeholder distractor 2
+Rendering the form
 
 ---
 
-Placeholder distractor 3
+Reloading the form
 
 #### --answer--
 
-Placeholder answer
+The default behavior caused by submitting a form (e.g., page refresh or POST call).
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What triggers the form's submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+When an input field changes
 
 ---
 
-Placeholder distractor 2
+When the form is reset
 
 ---
 
-Placeholder distractor 3
+When the form's action is cleared
 
 #### --answer--
 
-Placeholder answer
+When a form's submit button is clicked or Enter is pressed
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Where do you usually handle the submit event in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+On a text input element
 
 ---
 
-Placeholder distractor 2
+On any field in the form
 
 ---
 
-Placeholder distractor 3
+On a button element outside the form
 
 #### --answer--
 
-Placeholder answer
+On the form element itself
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the submit event do by default?
 
 #### --distractors--
 
-Placeholder distractor 1
+It validates the form but doesn’t submit it
 
 ---
 
-Placeholder distractor 2
+It clears the form fields
 
 ---
 
-Placeholder distractor 3
+It cancels form submission
 
 #### --answer--
 
-Placeholder answer
+It sends form data to the server specified in the form's action
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which event should you listen for to handle form data when the form is submitted in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+`"input"`
 
 ---
 
-Placeholder distractor 2
+`"change"`
 
 ---
 
-Placeholder distractor 3
+`"focus"`
 
 #### --answer--
 
-Placeholder answer
+`"submit"`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What must be done to prevent the default form submission behavior in the submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+Call `submit.preventDefault()`
 
 ---
 
-Placeholder distractor 2
+Stop the form from being displayed
 
 ---
 
-Placeholder distractor 3
+Set the form's `method` to `"GET"`
 
 #### --answer--
 
-Placeholder answer
+Call `e.preventDefault()`
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md b/curriculum/challenges/japanese/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
index 022a3aef8b..07bda7d052 100644
--- a/curriculum/challenges/japanese/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
+++ b/curriculum/challenges/japanese/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+The Fibonacci sequence is a series where each number is the sum of the two preceding ones, starting with `0` and `1`. The sequence goes: `0, 1, 1, 2, 3, 5, 8, 13, 21...` and so on. What is the best approach to calculate `nth` number in the sequence?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use the formula `fib(n) = fib(n-1) * fib(n-2)`.
 
 ---
 
-Placeholder distractor 2
+Use recursion with memoization to avoid recalculating subproblems where `fib(n) = (n-1) + (n-2)`.
 
 ---
 
-Placeholder distractor 3
+Use a for loop to calculate iteratively where `fib(n) = fib(n-1) + (n-2)`.
 
 #### --answer--
 
-Placeholder answer
+Use recursion with memoization to avoid recalculating subproblems where `fib(n) = fib(n-1) + fib(n-2)`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+A binary string, such as `"1011"`, represents a number in base-2, where each digit corresponds to a power of `2`. What process can be used to convert this binary string into its decimal equivalent?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use the `parseInt()` function with base `10`.
 
 ---
 
-Placeholder distractor 2
+Convert the string to an array, then sum the digits using bitwise operations.
 
 ---
 
-Placeholder distractor 3
+Use the `Number()` function directly with a binary string.
 
 #### --answer--
 
-Placeholder answer
+Multiply each character by powers of `2` and sum them up.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following algorithm will move all zeroes in an array to the end while keeping the order of other elements unchanged? For example, given `[0, 1, 0, 3, 12]`, return `[1, 3, 12, 0, 0]`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Sort the array in decreasing order and place zeros at the start.
 
 ---
 
-Placeholder distractor 2
+Sort the array in ascending order.
 
 ---
 
-Placeholder distractor 3
+Use recursion to remove all zeros and add them to the front.
 
 #### --answer--
 
-Placeholder answer
+Use a two-pointer technique to swap non-zero elements with zero elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a sentence, such as `"I am a frontend engineer"`, what approach can be taken to reverse the order of the words, producing the output `"engineer frontend a am I"`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Split the string into words using `split(" ")`, reverse the array, and join it back into a string using `join("_")`.
 
 ---
 
-Placeholder distractor 2
+Sort the words alphabetically and return the result.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to reverse each word.
 
 #### --answer--
 
-Placeholder answer
+Split the string into words using `split(" ")`, reverse the array, and join it back into a string using `join(" ")`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a string, what approach would be used to find the first non-repeating character? For example, in the string `"codecamp"`, it would be `'o'`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Sort the string and check for consecutive duplicates.
 
 ---
 
-Placeholder distractor 2
+Convert the string to an array, then filter for unique elements.
 
 ---
 
-Placeholder distractor 3
+Use a regular expression to find the first non-repeat.
 
 #### --answer--
 
-Placeholder answer
+Iterate over the string twice, once to count number of occurrences and once to find the first unique character.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach can be used to encode a string by counting consecutive repeated characters? For example, given the input`"mississippi"`, the output should be `"m1i1s2i1s2i1p2i1"`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Use regular expressions to match repeated characters.
 
 ---
 
-Placeholder distractor 2
+Use `map()` to map consecutive characters to the output.
 
 ---
 
-Placeholder distractor 3
+Sort the string and count occurrences.
 
 #### --answer--
 
-Placeholder answer
+Iterate through the string, counting consecutive occurrences of each character while building the answer.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach can be used to reverse the digits of an integer? For example, given the input `1234`, the output should be `4321`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Use bitwise operations to reverse the digits.
 
 ---
 
-Placeholder distractor 2
+Convert the integer to a binary number and reverse it.
 
 ---
 
-Placeholder distractor 3
+Use the `reverse()` method directly on the integer.
 
 #### --answer--
 
-Placeholder answer
+Use a loop to extract digits from the integer and reconstruct the reversed integer.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach would be used to generate Pascal's Triangle up to `n` rows? For example, for `n = 3`, the result would be `[[1], [1, 1], [1, 2, 1]]`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Generate rows by using a function that outputs prime numbers and maps them to each row.
 
 ---
 
-Placeholder distractor 2
+Use a loop to generate each row by multiplying adjacent elements from the previous row.
 
 ---
 
-Placeholder distractor 3
+Use `Math.random()` to generate the rows.
 
 #### --answer--
 
-Placeholder answer
+Use a loop to generate each row by adding adjacent elements from the previous row.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which algorithm is most efficient for sorting an array of size `n` containing numbers from `1` to `n`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bubble Sort
 
 ---
 
-Placeholder distractor 2
+Merge Sort
 
 ---
 
-Placeholder distractor 3
+Quick Sort
 
 #### --answer--
 
-Placeholder answer
+Cyclic Sort
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which algorithmic approach is best for solving the problem of finding the minimum number of coins for a given amount when only one type of coin is provided?
 
 #### --distractors--
 
-Placeholder distractor 1
+Dynamic Programming
 
 ---
 
-Placeholder distractor 2
+Divide and Conquer
 
 ---
 
-Placeholder distractor 3
+Backtracking
 
 #### --answer--
 
-Placeholder answer
+Greedy Algorithm
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following problems can be solved efficiently using the two-pointer technique?
 
 #### --distractors--
 
-Placeholder distractor 1
+Sorting an array.
 
 ---
 
-Placeholder distractor 2
+Traversing a tree level by level.
 
 ---
 
-Placeholder distractor 3
+Finding the middle element of a linked list.
 
 #### --answer--
 
-Placeholder answer
+Finding two numbers in a sorted array that sum up to a target value.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a Roman numeral string, convert it to its corresponding integer value. For example, `"IX"` should return `9`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Parse the string from left to right and add the values of individual numerals.
 
 ---
 
-Placeholder distractor 2
+Parse each character and multiply by its index.
 
 ---
 
-Placeholder distractor 3
+Use the `parseInt()` function on the Roman numeral string.
 
 #### --answer--
 
-Placeholder answer
+Parse the string from right to left, adding the values of individual numerals and subtracting when a smaller numeral comes before a larger numeral.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can one check if a given string is a palindrome (the same forwards and backwards), for example `"madam"`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use Slow and Fast Pointer.
 
 ---
 
-Placeholder distractor 2
+Compare it to its reverse after sorting the string.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to remove all non-alphabetic characters and check equality.
 
 #### --answer--
 
-Placeholder answer
+Compare the string to its reverse.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a number `n`, write a function that prints numbers from `1` to `n`. For multiples of `3`, print `"Fizz"` for multiples of `5`, print `"Buzz"` and for multiples of both `3` and `5`, print `"FizzBuzz"`. What is the simplest approach to this?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `Math.random()` to generate numbers between `1` and `n` and check the result.
 
 ---
 
-Placeholder distractor 2
+Use a for loop and check divisibility in-order of `3`, `5` and `15` with if conditions or switch.
 
 ---
 
-Placeholder distractor 3
+Create a recursive function that checks divisibility by `3` and `5`.
 
 #### --answer--
 
-Placeholder answer
+Use a for loop and check divisibility in-order of `15`, `5` and `3` with if conditions or switch.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+The Caesar cipher is a simple encryption technique where each letter in a string is shifted forward by a fixed number of positions in the alphabet. How would you shift all letters in a string by `3` positions?
 
 #### --distractors--
 
-Placeholder distractor 1
+Subtract `3` from the ASCII value of each character.
 
 ---
 
-Placeholder distractor 2
+Replace each vowel with the next consonant.
 
 ---
 
-Placeholder distractor 3
+Add `3` to the ASCII value of each character, but only for uppercase letters.
 
 #### --answer--
 
-Placeholder answer
+Add `3` to the ASCII value of each character, wrapping around for `'z'` and `'Z'`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Anagrams are words formed by rearranging letters of another word. How can one determine if two strings are anagrams?
 
 #### --distractors--
 
-Placeholder distractor 1
+Compare total number of letters in both strings.
 
 ---
 
-Placeholder distractor 2
+Reverse one string and compare with the other.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to remove duplicate letters and check equality.
 
 #### --answer--
 
-Placeholder answer
+Sort both strings and check if they are equal.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is the correct approach to check if a given number is prime?
 
 #### --distractors--
 
-Placeholder distractor 1
+Check if the number is divisible by `2` and `3`. If not, it's prime.
 
 ---
 
-Placeholder distractor 2
+Check if the number is divisible by any odd number between `3` and the square root of the number.
 
 ---
 
-Placeholder distractor 3
+Convert the number to binary and check if it has exactly two 1s.
 
 #### --answer--
 
-Placeholder answer
+Loop from `2` to up to the square root of the prime candidate, and make sure none of the number divides it evenly.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following describes the correct approach to find the greatest common divisor (GCD) of two numbers?
 
 #### --distractors--
 
-Placeholder distractor 1
+Find the average of the two numbers and round to the nearest integer.
 
 ---
 
-Placeholder distractor 2
+Multiply the two numbers together and then divide by their least common divisor.
 
 ---
 
-Placeholder distractor 3
+Add the two numbers together and divide by `2`.
 
 #### --answer--
 
-Placeholder answer
+Use recursion where `gcd(a, b) = gcd(b, a % b)` where the base case would be to return first parameter when second parameter is zero.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+The factorial of a non-negative integer `n` (denoted `n!`) is the product of all positive integers from `1` to `n`, with `0! = 1`. Which of the following approaches can be used to calculate the factorial of a given number `n`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Add the numbers from `1` to `n`.
 
 ---
 
-Placeholder distractor 2
+Raise `n` to the power of `n-1`.
 
 ---
 
-Placeholder distractor 3
+Find the prime factorization of n and then multiply the prime factors together.
 
 #### --answer--
 
-Placeholder answer
+Multiplying numbers from `1` to `n` in a loop.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is the most efficient approach to search for a given integer within a distinct, sorted array of integers?
 
 #### --distractors--
 
-Placeholder distractor 1
+Linear Search.
 
 ---
 
-Placeholder distractor 2
+Sort the array and search using Linear Search.
 
 ---
 
-Placeholder distractor 3
+Create a hash table with the array elements and check for the given integer.
 
 #### --answer--
 
-Placeholder answer
+Binary Search.
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md b/curriculum/challenges/japanese/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
index bf02c6d126..30b6619cac 100644
--- a/curriculum/challenges/japanese/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
+++ b/curriculum/challenges/japanese/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
@@ -83,7 +83,7 @@ Type `nano [FILE]`, then press the **Enter** key
 
 #### --text--
 
-What type of files is nano capable of creating and modifiying?
+What type of files is nano capable of creating and modifying?
 
 #### --distractors--
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md b/curriculum/challenges/japanese/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
index fb4f4e6437..f73b3b9e1d 100644
--- a/curriculum/challenges/japanese/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
+++ b/curriculum/challenges/japanese/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
@@ -17,439 +17,440 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+How do you handle a click event in a React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<button onClick='handleClick()'>Click me</button>`
 
 ---
 
-Placeholder distractor 2
+`<button onClick={() => handleClick}>Click me</button>`
 
 ---
 
-Placeholder distractor 3
+`<button click={handleClick}>Click me</button>`
 
 #### --answer--
 
-Placeholder answer
+`<button onClick={handleClick}>Click me</button>`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is NOT a method for conditional rendering in React?
 
 #### --distractors--
 
-Placeholder distractor 1
+Ternary operators
 
 ---
 
-Placeholder distractor 2
+Logical `&&` operator
 
 ---
 
-Placeholder distractor 3
+`switch` statements
 
 #### --answer--
 
-Placeholder answer
+`setTimeout`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does `<React.Fragment>` do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Wraps components with adding extra DOM nodes.
 
 ---
 
-Placeholder distractor 2
+Creates a new HTML element.
 
 ---
 
-Placeholder distractor 3
+Deletes an existing element.
 
 #### --answer--
 
-Placeholder answer
+Wraps components without adding extra DOM nodes.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of React Context?
 
 #### --distractors--
 
-Placeholder distractor 1
+Managing component styles.
 
 ---
 
-Placeholder distractor 2
+Passing data through the component.
 
 ---
 
-Placeholder distractor 3
+Controlling component re-renders.
 
 #### --answer--
 
-Placeholder answer
+Passing data through the component tree without props.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is TRUE about JSX?
 
 #### --distractors--
 
-Placeholder distractor 1
+JSX must always be written in separate files from JavaScript.
 
 ---
 
-Placeholder distractor 2
+JSX cannot use JavaScript expressions.
 
 ---
 
-Placeholder distractor 3
+JSX is not recommended for React applications.
 
 #### --answer--
 
-Placeholder answer
+JSX allows writing HTML within JavaScript code.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a con of using Vanilla JS instead of a framework?
 
 #### --distractors--
 
-Placeholder distractor 1
+Automatic state management.
 
 ---
 
-Placeholder distractor 2
+Built-in routing capabilities.
 
 ---
 
-Placeholder distractor 3
+Declarative UI rendering.
 
 #### --answer--
 
-Placeholder answer
+Increased verbosity and manual DOM manipulation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a single-page application typically update the view?
 
 #### --distractors--
 
-Placeholder distractor 1
+By making a full server reload.
 
 ---
 
-Placeholder distractor 2
+By reloading the entire HTML document.
 
 ---
 
-Placeholder distractor 3
+By using server-side rendering only.
 
 #### --answer--
 
-Placeholder answer
+By updating only the necessary parts of the page.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to create a functional React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+Using classes only.
 
 ---
 
-Placeholder distractor 2
+Using the `React.Component` only.
 
 ---
 
-Placeholder distractor 3
+Using JavaScript constructors.
 
 #### --answer--
 
-Placeholder answer
+Using the `function` keyword or arrow functions.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is not a valid JSX element?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<div className='class'></div>`
 
 ---
 
-Placeholder distractor 2
+`<span>Hello World</span>`
 
 ---
 
-Placeholder distractor 3
+`<button>Click Me</button>`
 
 #### --answer--
 
-Placeholder answer
+`<img class='img'>`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is an example of a meta framework for React?
 
 #### --distractors--
 
-Placeholder distractor 1
+Vue.js
 
 ---
 
-Placeholder distractor 2
+Angular
 
 ---
 
-Placeholder distractor 3
+Svelte
 
 #### --answer--
 
-Placeholder answer
+Next.js
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What tool would you use to bootstrap a new React project?
 
 #### --distractors--
 
-Placeholder distractor 1
+Webpack
 
 ---
 
-Placeholder distractor 2
+npm
 
 ---
 
-Placeholder distractor 3
+Babel
 
 #### --answer--
 
-Placeholder answer
+Vite
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command installs dependencies listed in `package.json`?
 
 #### --distractors--
 
-Placeholder distractor 1
+`npm run`
 
 ---
 
-Placeholder distractor 2
+`npm update`
 
 ---
 
-Placeholder distractor 3
+`npm build`
 
 #### --answer--
 
-Placeholder answer
+`npm install`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How would you pass a `name` prop to a child component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<ChildComponent props="name" />`
 
 ---
 
-Placeholder distractor 2
+`<ChildComponent {props} />`
 
 ---
 
-Placeholder distractor 3
+`<ChildComponent {'John'} />`
 
 #### --answer--
 
-Placeholder answer
+`<ChildComponent name="Vignesh" />`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to conditionally render a component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<Home/>`
 
 ---
 
-Placeholder distractor 2
+`<Home>isLoggedIn</Home>`
 
 ---
 
-Placeholder distractor 3
+`<Home showIf={isLoggedIn} />`
 
 #### --answer--
 
-Placeholder answer
+`{isLoggedIn ? <Home /> : <Login />}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a child component, how do you access the `name` prop passed from a parent component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`this.props.name`
 
 ---
 
-Placeholder distractor 2
+`this.name`
 
 ---
 
-Placeholder distractor 3
+`{props}.name`
 
 #### --answer--
 
-Placeholder answer
+`props.name`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to add an inline style in React?
 
 #### --distractors--
 
-Placeholder distractor 1
+`style={{ color: blue }}`
 
 ---
 
-Placeholder distractor 2
+`style="color: blue"`
 
 ---
 
-Placeholder distractor 3
+`style: { color: 'blue' }`
 
 #### --answer--
 
-Placeholder answer
+`style={{ color: 'blue' }}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to conditionally render a React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+Using `if` statements inside JSX.
 
 ---
 
-Placeholder distractor 2
+Declaring a new component inside a `render()` method.
 
 ---
 
-Placeholder distractor 3
+Using `while` loops inside JSX.
 
 #### --answer--
 
-Placeholder answer
+Using ternary operators or logical `&&` operators within JSX.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What causes a React component to re-render?
 
 #### --distractors--
 
-Placeholder distractor 1
+Directly modifying the state variable.
 
 ---
 
-Placeholder distractor 2
+Calling the `render()` method.
 
 ---
 
-Placeholder distractor 3
+Recompiling the project.
 
 #### --answer--
 
-Placeholder answer
+Changing the state using `setState`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How would you specify a required `name` prop using `PropTypes`?
 
 #### --distractors--
 
-Placeholder distractor 1
+`name: PropTypes.bool`
 
 ---
 
-Placeholder distractor 2
+`name: PropTypes.array.isRequired`
 
 ---
 
-Placeholder distractor 3
+`name: PropTypes.string`
 
 #### --answer--
 
-Placeholder answer
+`name: PropTypes.string.isRequired`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What file is used to define project dependencies in a React/Node.js project?
 
 #### --distractors--
 
-Placeholder distractor 1
+`package.lock.json`
 
 ---
 
-Placeholder distractor 2
+`index.html`
 
 ---
 
-Placeholder distractor 3
+`webpack.config.js`
 
 #### --answer--
 
-Placeholder answer
+`package.json`
+
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/japanese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
index 79e4cb7a88..6855b5dea7 100644
--- a/curriculum/challenges/japanese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
+++ b/curriculum/challenges/japanese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A database structured to recognize non-relation between stored items.
 
 ---
 
-Placeholder distractor 2
+A database that stores unstructured data.
 
 ---
 
-Placeholder distractor 3
+A flat file-based system.
 
 #### --answer--
 
-Placeholder answer
+A database structured to recognize relations between stored items.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a non-relational database differ from a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Non-relational databases use tables, while relational databases do not.
 
 ---
 
-Placeholder distractor 2
+Relational databases can store unstructured data.
 
 ---
 
-Placeholder distractor 3
+Non-relational databases are slower than relational databases.
 
 #### --answer--
 
-Placeholder answer
+Non-relational databases can store unstructured data.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `\l` command do when executed in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all schemas
 
 ---
 
-Placeholder distractor 2
+Lists all tables
 
 ---
 
-Placeholder distractor 3
+Connects to a database
 
 #### --answer--
 
-Placeholder answer
+Lists all databases
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following commands creates a new table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD TABLE`
 
 ---
 
-Placeholder distractor 2
+`NEW TABLE`
 
 ---
 
-Placeholder distractor 3
+`ALTER TABLE`
 
 #### --answer--
 
-Placeholder answer
+`CREATE TABLE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of a foreign key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To allow duplication of data.
 
 ---
 
-Placeholder distractor 2
+To uniquely identify a row in the table.
 
 ---
 
-Placeholder distractor 3
+To store large amounts of text data.
 
 #### --answer--
 
-Placeholder answer
+To create a relationship between two tables.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command will add a new column to an existing table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD COLUMN column_name TO table_name data_type;`
 
 ---
 
-Placeholder distractor 2
+`INSERT COLUMN column_name INTO table_name data_type;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name ADD COLUMN column_name data_type;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name ADD COLUMN column_name data_type;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What type of relationship exists when one record in Table A corresponds to one or more records in Table B?
 
 #### --distractors--
 
-Placeholder distractor 1
+One-to-One (1-1)
 
 ---
 
-Placeholder distractor 2
+Many-to-Many (m-m)
 
 ---
 
-Placeholder distractor 3
+Many-to-one(m-1)
 
 #### --answer--
 
-Placeholder answer
+One-to-Many (1-m)
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary purpose of normalization in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To increase the speed of data retrieval.
 
 ---
 
-Placeholder distractor 2
+To enforce security measures.
 
 ---
 
-Placeholder distractor 3
+To simplify the database schema.
 
 #### --answer--
 
-Placeholder answer
+To eliminate data redundancy and ensure data integrity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you delete a column from a table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 2
+`DELETE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name DELETE column_name;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name DROP COLUMN column_name;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the function of the `PRIMARY KEY` constraint in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+To link two tables together.
 
 ---
 
-Placeholder distractor 2
+To define the default value for a column.
 
 ---
 
-Placeholder distractor 3
+To allow null values in the column.
 
 #### --answer--
 
-Placeholder answer
+To ensure that the column contains unique values.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the command `\c` do in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all tables in the current database.
 
 ---
 
-Placeholder distractor 2
+Displays the current database connection details.
 
 ---
 
-Placeholder distractor 3
+Exits the `psql` shell.
 
 #### --answer--
 
-Placeholder answer
+Connects to the specified database.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command inserts data into a table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`PUT VALUES`
 
 ---
 
-Placeholder distractor 2
+`UPDATE INTO`
 
 ---
 
-Placeholder distractor 3
+`ADD DATA`
 
 #### --answer--
 
-Placeholder answer
+`INSERT INTO`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you rename a column in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`MODIFY COLUMN`
 
 ---
 
-Placeholder distractor 2
+`CHANGE COLUMN`
 
 ---
 
-Placeholder distractor 3
+`ALTER COLUMN`
 
 #### --answer--
 
-Placeholder answer
+`RENAME COLUMN`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which query will delete all records from the employees table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE ALL`
 
 ---
 
-Placeholder distractor 2
+`TRUNCATE employees`
 
 ---
 
-Placeholder distractor 3
+`DROP RECORDS`
 
 #### --answer--
 
-Placeholder answer
+`DELETE FROM employees`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which SQL constraint specifically ensures that a column can contain only unique values, allowing nulls?
 
 #### --distractors--
 
-Placeholder distractor 1
+`NOT NULL`
 
 ---
 
-Placeholder distractor 2
+`FOREIGN KEY`
 
 ---
 
-Placeholder distractor 3
+`PRIMARY KEY`
 
 #### --answer--
 
-Placeholder answer
+`UNIQUE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a relational database, what is an index used for?
 
 #### --distractors--
 
-Placeholder distractor 1
+To store additional metadata about tables.
 
 ---
 
-Placeholder distractor 2
+To ensure unique values in a column.
 
 ---
 
-Placeholder distractor 3
+To enforce data integrity.
 
 #### --answer--
 
-Placeholder answer
+To speed up data retrieval.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does a one-to-one (1-1) relationship represent in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Each record in Table A corresponds to one or more records in Table B.
 
 ---
 
-Placeholder distractor 2
+Each record in Table A corresponds to no records in Table B.
 
 ---
 
-Placeholder distractor 3
+Each record in Table A corresponds to multiple records in Table B and vice versa.
 
 #### --answer--
 
-Placeholder answer
+Each record in Table A corresponds to exactly one record in Table B.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command will list all tables in the current PostgreSQL database?
 
 #### --distractors--
 
-Placeholder distractor 1
+`\l`
 
 ---
 
-Placeholder distractor 2
+`SHOW TABLES`
 
 ---
 
-Placeholder distractor 3
+`\t`
 
 #### --answer--
 
-Placeholder answer
+`\d`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md b/curriculum/challenges/japanese/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
index 6a4965d122..af439d1aab 100644
--- a/curriculum/challenges/japanese/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
+++ b/curriculum/challenges/japanese/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What CSS property is commonly used to create a flexible layout in a container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`display: block;`
 
 ---
 
-Placeholder distractor 2
+`display: inline;`
 
 ---
 
-Placeholder distractor 3
+`display: table;`
 
 #### --answer--
 
-Placeholder answer
+`display: flex;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the main purpose of media queries in responsive web design?
 
 #### --distractors--
 
-Placeholder distractor 1
+To change the color scheme of the page.
 
 ---
 
-Placeholder distractor 2
+To create animations.
 
 ---
 
-Placeholder distractor 3
+To adjust margins for print pages.
 
 #### --answer--
 
-Placeholder answer
+To apply different styles based on the screen size or device type.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which media feature in a media query checks the width of the browser window?
 
 #### --distractors--
 
-Placeholder distractor 1
+`min-height`
 
 ---
 
-Placeholder distractor 2
+`max-aspect-ratio`
 
 ---
 
-Placeholder distractor 3
+`resolution`
 
 #### --answer--
 
-Placeholder answer
+`min-width`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which CSS unit is relative to the width of the viewport?
 
 #### --distractors--
 
-Placeholder distractor 1
+`em`
 
 ---
 
-Placeholder distractor 2
+`px`
 
 ---
 
-Placeholder distractor 3
+`rem`
 
 #### --answer--
 
-Placeholder answer
+`vw`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does mobile-first design emphasize?
 
 #### --distractors--
 
-Placeholder distractor 1
+Designing for desktops and scaling down for smaller devices.
 
 ---
 
-Placeholder distractor 2
+Using only desktop breakpoints.
 
 ---
 
-Placeholder distractor 3
+Focusing on the highest resolution devices first.
 
 #### --answer--
 
-Placeholder answer
+Designing for smaller screens first and scaling up for larger devices.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which media query will apply styles when the device's width is between 600px and 1200px?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 1200px)`
 
 ---
 
-Placeholder distractor 2
+`@media screen and (min-width: 600px)`
 
 ---
 
-Placeholder distractor 3
+`@media screen and (width: 800px)`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 600px) and (max-width: 1200px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default flex-direction value in Flexbox?
 
 #### --distractors--
 
-Placeholder distractor 1
+`column`
 
 ---
 
-Placeholder distractor 2
+`row-reverse`
 
 ---
 
-Placeholder distractor 3
+`column-reverse`
 
 #### --answer--
 
-Placeholder answer
+`row`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In Flexbox, how do you distribute space between items in a container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`align-items`
 
 ---
 
-Placeholder distractor 2
+`flex-grow`
 
 ---
 
-Placeholder distractor 3
+`flex-wrap`
 
 #### --answer--
 
-Placeholder answer
+`justify-content`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you apply a grid layout to a container in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`display: flexbox;`
 
 ---
 
-Placeholder distractor 2
+`display: block;`
 
 ---
 
-Placeholder distractor 3
+`display: table;`
 
 #### --answer--
 
-Placeholder answer
+`display: grid;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `fr` unit represent in CSS Grid?
 
 #### --distractors--
 
-Placeholder distractor 1
+Flexible ratio
 
 ---
 
-Placeholder distractor 2
+Frame ratio
 
 ---
 
-Placeholder distractor 3
+Fixed region
 
 #### --answer--
 
-Placeholder answer
+Fraction of available space
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is a valid media query for targeting devices with a resolution of 2x or higher?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media (resolution: 2x)`
 
 ---
 
-Placeholder distractor 2
+`@media (max-resolution: 2x)`
 
 ---
 
-Placeholder distractor 3
+`@media screen and (min-width: 1200px)`
 
 #### --answer--
 
-Placeholder answer
+`@media (min-resolution: 2px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which property controls the number of columns in a grid container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`grid-template-rows`
 
 ---
 
-Placeholder distractor 2
+`grid-auto-rows`
 
 ---
 
-Placeholder distractor 3
+`grid-template`
 
 #### --answer--
 
-Placeholder answer
+`grid-template-columns`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you set up a media query for screens larger than 768px?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 768px)`
 
 ---
 
-Placeholder distractor 2
+`@media only screen and (width > 768px)`
 
 ---
 
-Placeholder distractor 3
+`@media (screen-width: 768px)`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 768px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `flex-wrap` property in Flexbox?
 
 #### --distractors--
 
-Placeholder distractor 1
+To align items along the cross axis.
 
 ---
 
-Placeholder distractor 2
+To reverse the order of flex items.
 
 ---
 
-Placeholder distractor 3
+To distribute space evenly between items.
 
 #### --answer--
 
-Placeholder answer
+To allow flex items to wrap onto multiple lines.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following breakpoints is commonly used for tablets in responsive web design?
 
 #### --distractors--
 
-Placeholder distractor 1
+`480px`
 
 ---
 
-Placeholder distractor 2
+`1920px`
 
 ---
 
-Placeholder distractor 3
+`2560px`
 
 #### --answer--
 
-Placeholder answer
+`768px`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you center an item horizontally in a flex container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`align-items: center;`
 
 ---
 
-Placeholder distractor 2
+`flex-direction: row;`
 
 ---
 
-Placeholder distractor 3
+`flex-grow: 1;`
 
 #### --answer--
 
-Placeholder answer
+`justify-content: center;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In mobile-first design, which media query should be used to target larger screens?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 600px)`
 
 ---
 
-Placeholder distractor 2
+`@media screen and (height: 600px)`
 
 ---
 
-Placeholder distractor 3
+`@media only screen`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 600px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which CSS property is used to create a layout that adjusts based on screen size without media queries?
 
 #### --distractors--
 
-Placeholder distractor 1
+`float`
 
 ---
 
-Placeholder distractor 2
+`display: block`
 
 ---
 
-Placeholder distractor 3
+`width: 100%`
 
 #### --answer--
 
-Placeholder answer
+`flex`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you prevent a flex container from shrinking smaller than its content?
 
 #### --distractors--
 
-Placeholder distractor 1
+`flex-shrink: 1;`
 
 ---
 
-Placeholder distractor 2
+`flex-direction: column;`
 
 ---
 
-Placeholder distractor 3
+`align-items: flex-start;`
 
 #### --answer--
 
-Placeholder answer
+`flex-shrink: 0;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you create a responsive image that scales with the width of its container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`max-height: 100%;`
 
 ---
 
-Placeholder distractor 2
+`object-fit: contain;`
 
 ---
 
-Placeholder distractor 3
+`min-width: 100%;`
 
 #### --answer--
 
-Placeholder answer
+`max-width: 100%;`
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md b/curriculum/challenges/japanese/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
index 47b4ceeba0..4d67427ccc 100644
--- a/curriculum/challenges/japanese/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
+++ b/curriculum/challenges/japanese/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+Which of the following is a common issue with the `datetime-local` input type?
 
 #### --distractors--
 
-Placeholder distractor 1
+It cannot be used with CSS variables.
 
 ---
 
-Placeholder distractor 2
+It automatically submits the form upon value selection.
 
 ---
 
-Placeholder distractor 3
+It does not support real-time updates.
 
 #### --answer--
 
-Placeholder answer
+The input format is different across browsers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why is it important to use `box-sizing: border-box;` when styling text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the text input focusable with a keyboard.
 
 ---
 
-Placeholder distractor 2
+It hides the input’s placeholder text.
 
 ---
 
-Placeholder distractor 3
+It removes the default browser styling for inputs.
 
 #### --answer--
 
-Placeholder answer
+It ensures padding and borders are included in the element’s width and height.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a benefit of setting a max-width for text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It prevents users from entering long text.
 
 ---
 
-Placeholder distractor 2
+It makes the input unresponsive on larger screens.
 
 ---
 
-Placeholder distractor 3
+It automatically adjusts the font size.
 
 #### --answer--
 
-Placeholder answer
+It ensures the input doesn’t stretch too wide on larger screens.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should you add `:focus` styles to text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It hides the input’s border.
 
 ---
 
-Placeholder distractor 2
+It disables user input.
 
 ---
 
-Placeholder distractor 3
+It forces the browser to ignore default styles.
 
 #### --answer--
 
-Placeholder answer
+It improves accessibility by making the input easier to identify when focused.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you prevent text inputs from being cut off when resized?
 
 #### --distractors--
 
-Placeholder distractor 1
+By adding `overflow: hidden;`.
 
 ---
 
-Placeholder distractor 2
+By setting a fixed height and width.
 
 ---
 
-Placeholder distractor 3
+By removing padding from the input.
 
 #### --answer--
 
-Placeholder answer
+By using padding and line-height with flexible units like `em` or `rem`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why is it important to use descriptive placeholder text in form inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It helps to pre-fill the form for the user.
 
 ---
 
-Placeholder distractor 2
+It automatically validates the input as the user types.
 
 ---
 
-Placeholder distractor 3
+It hides the input label, reducing visual clutter.
 
 #### --answer--
 
-Placeholder answer
+It provides users with guidance on the expected input format without cluttering the interface.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should you avoid using `outline: none;` without adding a custom focus style?
 
 #### --distractors--
 
-Placeholder distractor 1
+It reduces the size of the text input.
 
 ---
 
-Placeholder distractor 2
+It hides the input from assistive technology users.
 
 ---
 
-Placeholder distractor 3
+It makes the input read-only.
 
 #### --answer--
 
-Placeholder answer
+It removes the focus outline, which may confuse users about which field is selected.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of using Flexbox or Grid for form layout?
 
 #### --distractors--
 
-Placeholder distractor 1
+To make form controls appear in random positions.
 
 ---
 
-Placeholder distractor 2
+To make the form smaller on mobile devices.
 
 ---
 
-Placeholder distractor 3
+To hide form controls on large screens.
 
 #### --answer--
 
-Placeholder answer
+To create a well-structured and responsive form layout.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should input elements be styled with a solid border?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the form look more colorful.
 
 ---
 
-Placeholder distractor 2
+It automatically increases form field size.
 
 ---
 
-Placeholder distractor 3
+It forces users to zoom in on mobile devices.
 
 #### --answer--
 
-Placeholder answer
+To ensure input fields are clearly visible and easily recognizable as form controls.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does increasing the margin between form elements affect form usability?
 
 #### --distractors--
 
-Placeholder distractor 1
+It decreases accessibility on mobile devices.
 
 ---
 
-Placeholder distractor 2
+It prevents users from submitting the form.
 
 ---
 
-Placeholder distractor 3
+It hides form labels.
 
 #### --answer--
 
-Placeholder answer
+It improves readability by helping users see the grouping of related form elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary reason for using `appearance: none` in form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+To add new default styles to form elements.
 
 ---
 
-Placeholder distractor 2
+To enable form elements to appear larger on mobile devices.
 
 ---
 
-Placeholder distractor 3
+To disable form validation for specific elements.
 
 #### --answer--
 
-Placeholder answer
+To remove the default browser styling from form elements and apply custom styles.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which type of form elements is commonly styled using `appearance: none` to remove their default look?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<label>` elements
 
 ---
 
-Placeholder distractor 2
+`<div>` elements
 
 ---
 
-Placeholder distractor 3
+`<span>` elements
 
 #### --answer--
 
-Placeholder answer
+`<input>` and `<select>` elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When should you avoid using `appearance: none` on form controls?
 
 #### --distractors--
 
-Placeholder distractor 1
+When you want to fully customize the form control's style.
 
 ---
 
-Placeholder distractor 2
+When the browser’s default styles are hard to override.
 
 ---
 
-Placeholder distractor 3
+When you are building a mobile-first responsive form.
 
 #### --answer--
 
-Placeholder answer
+When relying on the accessibility and familiarity of native form control appearances.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can using `appearance: none` improve the design of radio buttons and checkboxes?
 
 #### --distractors--
 
-Placeholder distractor 1
+It increases the size of radio buttons and checkboxes.
 
 ---
 
-Placeholder distractor 2
+It automatically creates animation effects for radio buttons and checkboxes.
 
 ---
 
-Placeholder distractor 3
+It prevents users from interacting with radio buttons and checkboxes.
 
 #### --answer--
 
-Placeholder answer
+It removes the browser's default appearance, allowing you to fully customize the design.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a common issue that arises when using `appearance: none` on a select element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the `select` element invisible.
 
 ---
 
-Placeholder distractor 2
+It disables the dropdown functionality.
 
 ---
 
-Placeholder distractor 3
+It breaks form validation.
 
 #### --answer--
 
-Placeholder answer
+It removes the dropdown arrow, requiring you to add a custom arrow or indicator.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can occur when using HTML5 validation attributes like `required` without custom messaging?
 
 #### --distractors--
 
-Placeholder distractor 1
+It automatically validates all inputs without user interaction.
 
 ---
 
-Placeholder distractor 2
+It prevents the form from being submitted if all fields are filled.
 
 ---
 
-Placeholder distractor 3
+It allows users to see detailed error messages for each input.
 
 #### --answer--
 
-Placeholder answer
+Users may not understand why their submission fails, leading to frustration if no helpful feedback is provided.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can arise when no margin is added between the header and the content?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the content load faster.
 
 ---
 
-Placeholder distractor 2
+It improves the overall readability of the content.
 
 ---
 
-Placeholder distractor 3
+It automatically centers the content under the header.
 
 #### --answer--
 
-Placeholder answer
+The content may appear cramped or overlap with the header, making it difficult to read and reducing visual clarity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue may arise with custom fonts when used in form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+They may not display correctly on all browsers.
 
 ---
 
-Placeholder distractor 2
+They always load faster than system fonts.
 
 ---
 
-Placeholder distractor 3
+They prevent the use of responsive design.
 
 #### --answer--
 
-Placeholder answer
+Custom fonts may not be accessible to users if they are not properly loaded or fallback fonts are not specified.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can arise when using `overflow: hidden;` on form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+It improves the form’s overall accessibility.
 
 ---
 
-Placeholder distractor 2
+It automatically adjusts the form to fit within smaller screens.
 
 ---
 
-Placeholder distractor 3
+It ensures that all text content is always visible.
 
 #### --answer--
 
-Placeholder answer
+It can cause content, such as text or labels, to be cut off if the element is resized or if padding is used incorrectly.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What common problem arises when submitting form data that includes `color` input?
 
 #### --distractors--
 
-Placeholder distractor 1
+The `color` value gets automatically converted to grayscale.
 
 ---
 
-Placeholder distractor 2
+The browser displays an alert before submitting the form.
 
 ---
 
-Placeholder distractor 3
+It replaces the `color` value with a default value.
 
 #### --answer--
 
-Placeholder answer
+The `color` input value is submitted as a hexadecimal string, which may require formatting on the server.
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
new file mode 100644
index 0000000000..8931930aa3
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
@@ -0,0 +1,61 @@
+---
+id: 61fd5a93fd62bb35968adeab
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Begin your project by giving your `head` element a `link` element for your stylesheet.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert(/<link/.test(code))
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i))
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
new file mode 100644
index 0000000000..ae59503cca
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
@@ -0,0 +1,48 @@
+---
+id: 61fd6343fb42013d99bcd7f3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Within your `body` element, nest a `section` element within a `main` element.
+
+# --hints--
+
+The first element inside the `body` element should be your `main` element.
+
+```js
+assert(document.querySelector('body')?.children?.[0]?.localName === 'main');
+```
+
+You should have a `section` element within your `main` element.
+
+```js
+assert(document.querySelector('main')?.children?.[0]?.localName === 'section');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
new file mode 100644
index 0000000000..345621fb1d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
@@ -0,0 +1,52 @@
+---
+id: 61fd66c687e610436494c6f1
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `section` element, add an `h1` element with a nested `span` element.
+
+# --hints--
+
+Your `section` element should have an `h1` element.
+
+```js
+assert(document.querySelector('section')?.children?.[0]?.localName === 'h1');
+```
+
+Your `h1` element should have a `span` element.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.localName === 'span');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+--fcc-editable-region--
+      <section>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
new file mode 100644
index 0000000000..0be766dccc
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
@@ -0,0 +1,78 @@
+---
+id: 61fd67a656743144844941cb
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Screen readers announce HTML elements based on the document flow. We will eventually want the balance sheet to have a heading of "Balance Sheet" and a subheading of "AcmeWidgetCorp". However, this order does not make sense if announced by a screen reader.
+
+Give your existing `span` the `class` attribute set to `flex`, and add two `span` elements within it. Give the first the text `AcmeWidgetCorp`. Give the second the text `Balance Sheet`. You will use CSS to reverse the order of the text on the page, but the HTML order will make more sense for a screen reader.
+
+# --hints--
+
+Your existing `span` element should have the `class` attribute set to `flex`.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
+```
+
+Your existing `span` element should have two new `span` elements within it.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
+assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
+```
+
+Your new `span` elements should not have a `class` attribute.
+
+```js
+assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
+assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
+```
+
+Your first new `span` element should have the text `AcmeWidgetCorp`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
+```
+
+Your second new `span` element should have the text `Balance Sheet`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+--fcc-editable-region--
+          <span>
+          </span>
+--fcc-editable-region--
+        </h1>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
new file mode 100644
index 0000000000..2d5052298f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
@@ -0,0 +1,65 @@
+---
+id: 61fd6ab779390f49148773bb
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Below your `h1` element, create a `div` element. Give it an `id` attribute set to `years`. You want this particular element to be hidden from screen readers, so give it the `aria-hidden` attribute set to `true`.
+
+# --hints--
+
+You should create a new `div` element after your `h1` element.
+
+```js
+assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div');
+```
+
+Your new `div` element should have an `id` attribute set to `years`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('id') === 'years');
+```
+
+Your new `div` element should have the `aria-hidden` attribute set to `true`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
new file mode 100644
index 0000000000..f01ff5c2b6
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
@@ -0,0 +1,79 @@
+---
+id: 61fd6b7c83dbf54a08cf0498
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within your `div` element, add three `span` elements. Give each of them a `class` attribute set to `year`, and add the following text (in order): `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Your `div` element should have three `span` elements.
+
+```js
+assert(document.querySelector('div')?.children?.length === 3);
+```
+
+Each `span` element should have a `class` attribute set to `year`.
+
+```js
+const spans = [...document.querySelector('div')?.children];
+spans.forEach(span => assert(span?.classList?.contains('year')));
+```
+
+Your first `span` should have the text `2019`.
+
+```js
+assert(document.querySelector('div')?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` should have the text `2020`.
+
+```js
+assert(document.querySelector('div')?.children?.[1]?.textContent === '2020');
+```
+
+Your third `span` should have the text `2021`.
+
+```js
+assert(document.querySelector('div')?.children?.[2]?.textContent === '2021');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+        <div id="years" aria-hidden="true">
+        </div>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
new file mode 100644
index 0000000000..b8ccec8b81
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
@@ -0,0 +1,80 @@
+---
+id: 61fd6cc9475a784b7776233e
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Below your existing `div` element, add a new `div` element with a `class` set to `table-wrap`. This will be the container for your tables.
+
+Within that, add three `table` elements. You will be using CSS to style these into a single table, but using separate tables will help screen readers understand the document flow.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+Your new `div` element should have the `class` set to `table-wrap`.
+
+```js
+assert(document.querySelector('.table-wrap')?.localName === 'div');
+```
+
+Your `.table-wrap` element should come after your existing `div`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap'));
+```
+
+Your `.table-wrap` element should have three `table` elements.
+
+```js
+const children = [...(document.querySelector('.table-wrap')?.children ?? [])];
+assert(children?.length === 3);
+children.forEach(child => assert(child?.localName === 'table'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
new file mode 100644
index 0000000000..630d13d656
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
@@ -0,0 +1,73 @@
+---
+id: 61fd70336ebb3e4f62ee81ba
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+HTML tables use the `caption` element to describe what the table is about. The `caption` element should always be the first child of a `table`, but can be positioned with the `caption-side` CSS property.
+
+Add a `caption` element to your first `table`, and give it the text `Assets`.
+
+# --hints--
+
+Your first `table` element should have a `caption` element.
+
+```js
+assert(document.querySelector('table')?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Assets`.
+
+```js
+assert(document.querySelector('caption')?.textContent === 'Assets');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
new file mode 100644
index 0000000000..2e0c363fd1
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
@@ -0,0 +1,86 @@
+---
+id: 61fd719788899952e67692b9
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+The `thead` and `tbody` elements are used to indicate which portion of your table is the header, and which portion contains the primary data or content.
+
+Add a `thead` and `tbody` to your first `table`, below the `caption` element.
+
+# --hints--
+
+Your first `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('thead'));
+```
+
+Your first `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+            <caption>Assets</caption>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
new file mode 100644
index 0000000000..083e60b9e9
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
@@ -0,0 +1,86 @@
+---
+id: 61fd71d596e8f253b9408b39
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+The `tr` element is used to indicate a table row. Add a `tr` element within your `thead` element. In your new `tr` element, add a `td` element, followed by three `th` elements.
+
+The `td` element indicates a data cell, while the `th` element indicates a header cell.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
new file mode 100644
index 0000000000..2bb7733877
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
@@ -0,0 +1,125 @@
+---
+id: 61fd75ea7f663457612dba02
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Within each of your new `th` elements, nest a `span` element with the `class` set to `sr-only year`. Give them the following text (in order): `2019`, `2020`, and `2021`.
+
+Give your third `th` element the `class` attribute set to `current`.
+
+Leave the `td` element empty. This element exists only to ensure your table has a four-column layout and associate the headers with the correct columns.
+
+# --hints--
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only year`.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+  assert(th?.children?.[0]?.classList?.contains('year'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your third `th` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current'));
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
new file mode 100644
index 0000000000..e45bc92ba6
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
@@ -0,0 +1,96 @@
+---
+id: 61fd7648a7ba2e5882436831
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Within your `tbody` element, add four `tr` elements. Give the first three a `class` attribute set to `data`, and the fourth a `class` attribute set to `total`.
+
+# --hints--
+
+Your `tbody` element should have four `tr` elements.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+Your first three `tr` elements should have the `class` attribute set to `data`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+Your fourth `tr` element should have the `class` attribute set to `total`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+--fcc-editable-region--
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
new file mode 100644
index 0000000000..413771781f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
@@ -0,0 +1,134 @@
+---
+id: 61fd778081276b59d59abad6
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+In your first `tr`, add a `th` element with the text `Cash This is the cash we currently have on hand.`. Wrap all of that text except `Cash` in a `span` element with the `class` set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$25`, `$30`, `$28`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your first `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Cash This is the cash we currently have on hand.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.');
+```
+
+You should wrap the text `This is the cash we currently have on hand.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$25`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$25');
+```
+
+Your second `td` element should have the text `$30`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$30');
+```
+
+Your third `td` element should have the text `$28`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$28');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
new file mode 100644
index 0000000000..65782d0b1e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
@@ -0,0 +1,138 @@
+---
+id: 61fd77f7ad2aeb5ae34d07d6
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In your second `tr` element, add a `th` element with the text `Checking Our primary transactional account.`. Wrap that text, except for `Checking`, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$54`, `$56`, `$53`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your second `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Checking Our primary transactional account.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.');
+```
+
+You should wrap the text `Our primary transactional account.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$54`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$54');
+```
+
+Your second `td` element should have the text `$56`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$56');
+```
+
+Your third `td` element should have the text `$53`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$53');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
new file mode 100644
index 0000000000..e0aef0b407
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
@@ -0,0 +1,142 @@
+---
+id: 61fd78621573aa5e8b512f5e
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In your third `tr` element, add a `th` element with the text `Savings Funds set aside for emergencies.`. Wrap that text, except for `Savings`, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$500`, `$650`, `$728`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your third `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Savings Funds set aside for emergencies.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.');
+```
+
+You should wrap the text `Funds set aside for emergencies.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$500`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+Your second `td` element should have the text `$650`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650');
+```
+
+Your third `td` element should have the text `$728`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
new file mode 100644
index 0000000000..2f7c60f29f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
@@ -0,0 +1,146 @@
+---
+id: 61fd7a160ed17960e971f28b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+In your fourth `tr` element, add a `th` element with the text `Total Assets`. Wrap the text `Assets` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$579`, `$736`, `$809`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your fourth `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Assets`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets');
+```
+
+You should wrap the text `Assets` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Assets');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$579`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579');
+```
+
+Your second `td` element should have the text `$736`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736');
+```
+
+Your third `td` element should have the text `$809`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
+```
+
+Your third `td` element should have the `class` attribute set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
new file mode 100644
index 0000000000..184f5dee82
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
@@ -0,0 +1,130 @@
+---
+id: 61fd7b3fcaa5406257abc5d1
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Time to move on to your second table. Start by giving it a `caption` element set to `Liabilities`. Then add your `thead` and `tbody`.
+
+# --hints--
+
+Your second `table` element should have a `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities');
+```
+
+Your second `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead'));
+```
+
+Your second `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
new file mode 100644
index 0000000000..40f7da84cd
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
@@ -0,0 +1,119 @@
+---
+id: 61fd8e491324ce717da97ffe
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Within your `thead`, add a `tr`. Inside that, add a `td` and three `th` elements.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
new file mode 100644
index 0000000000..55c85fb133
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
@@ -0,0 +1,149 @@
+---
+id: 61fd8fd08af43372f02952d0
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Give each `th` element a `span` element with the class set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
new file mode 100644
index 0000000000..abec451e89
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
@@ -0,0 +1,131 @@
+---
+id: 61fd9126aa72a474301fc49f
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Within the `tbody` element, add four `tr` elements. Give the first three the `class` attribute set to `data`, and the fourth the `class` attribute set to `total`.
+
+# --hints--
+
+Your `tbody` element should have four `tr` elements.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+Your first three `tr` elements should have the `class` attribute set to `data`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+Your fourth `tr` element should have the `class` attribute set to `total`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
new file mode 100644
index 0000000000..58a2b1e9bc
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
@@ -0,0 +1,169 @@
+---
+id: 61fd933ba685de776a94997e
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Within the first `tr`, add a `th` element with the text `Loans The outstanding balance on our startup loan.`. Wrap that text, except for `Loans`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$500`, `$250`, and `$0`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your first `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Loans The outstanding balance on our startup loan.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.');
+```
+
+You should wrap the text `The outstanding balance on our startup loan.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$500`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+Your second `td` element should have the text `$250`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$250');
+```
+
+Your third `td` element should have the text `$0`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$0');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
new file mode 100644
index 0000000000..1f8839c68a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
@@ -0,0 +1,173 @@
+---
+id: 61fd94056e0355785fbba4d3
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Within the second `tr`, add a `th` element with the text `Expenses Annual anticipated expenses, such as payroll.`. Wrap that text, except for `Expenses`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$200`, `$300`, and `$400`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your second `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Expenses Annual anticipated expenses, such as payroll.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.');
+```
+
+You should wrap the text `Annual anticipated expenses, such as payroll.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$200`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$200');
+```
+
+Your second `td` element should have the text `$300`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$300');
+```
+
+Your third `td` element should have the text `$400`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$400');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
new file mode 100644
index 0000000000..a7289e5738
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
@@ -0,0 +1,177 @@
+---
+id: 61fd986ddbcbd47ba8fbc5ec
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Within the third `tr`, add a `th` element with the text `Credit The outstanding balance on our credit card.`. Wrap that text, except for `Credit`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$50`, `$50`, and `$75`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your third `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Credit The outstanding balance on our credit card.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.');
+```
+
+You should wrap the text `The outstanding balance on our credit card.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$50');
+```
+
+Your second `td` element should have the text `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$50');
+```
+
+Your third `td` element should have the text `$75`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$75');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
new file mode 100644
index 0000000000..630afca73e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -0,0 +1,181 @@
+---
+id: 61fd990577d8227dd93fbeeb
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In your fourth `tr` element, add a `th` element with the text `Total Liabilities`. Wrap the text `Liabilities` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$750`, `$600`, `$475`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your fourth `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities');
+```
+
+You should wrap the text `Liabilities` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$750`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750');
+```
+
+Your second `td` element should have the text `$600`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600');
+```
+
+Your third `td` element should have the text `$475`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
new file mode 100644
index 0000000000..e2d2e4f80e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
@@ -0,0 +1,165 @@
+---
+id: 61fd9a4ff2fc4481b9157bd7
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+For your third table, add a `caption` with the text `Net Worth`, and set up a table header and table body.
+
+# --hints--
+
+Your third `table` element should have a `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth');
+```
+
+Your third `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead'));
+```
+
+Your third `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
new file mode 100644
index 0000000000..a6d495c907
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
@@ -0,0 +1,198 @@
+---
+id: 61fd9ad665a4a282c8106be3
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Within your `thead`, create a `tr` element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
new file mode 100644
index 0000000000..d0c5452488
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
@@ -0,0 +1,208 @@
+---
+id: 61fd9b7285bde783ad5b8aac
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Within the `tbody`, add a `tr` with the `class` set to `total`. In that, add a `th` with the text `Total Net Worth`, and wrap `Net Worth` in a `span` with the `class` set to `sr-only`.
+
+Then add three `td` elements, giving the third a `class` set to `current`, and giving each the following text: `$-171`, `$136`, `$334`.
+
+# --hints--
+
+Your `tbody` element should have one `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
+```
+
+Your `tr` element should have the `class` set to `total`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total'));
+```
+
+Your `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth');
+```
+
+You should wrap the text `Net Worth` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$-171`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171');
+```
+
+Your second `td` element should have the text `$136`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136');
+```
+
+Your third `td` element should have the text `$334`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
new file mode 100644
index 0000000000..a48fc24190
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
@@ -0,0 +1,158 @@
+---
+id: 61fd9d9fbdfe078800317055
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Time to style your table. Start by resetting the box model. Create an `html` selector and give it a `box-sizing` property set to `border-box`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have a `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
new file mode 100644
index 0000000000..2830b424ad
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
@@ -0,0 +1,168 @@
+---
+id: 61fda307bde0b091cf7d884a
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Create a `body` selector and give it a `font-family` property set to `sans-serif` and a `color` set to `#0a0a23`.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `font-family` property set to `sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family') === 'sans-serif');
+```
+
+Your `body` selector should have a `color` property set to `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
new file mode 100644
index 0000000000..fb2d7e6f93
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
@@ -0,0 +1,171 @@
+---
+id: 61fda339eadcfd92a6812bed
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Before you get too far into your styling, you should make use of the `sr-only` class. You can use CSS to make elements with this class completely hidden from the visual page, but still be announced by screen readers.
+
+The CSS you are about to write is a common set of properties used to ensure elements are completely hidden visually.
+
+The `span[class~="sr-only"]` selector will select any `span` element whose `class` *includes* `sr-only`. Create that selector, and give it a `border` property set to `0`.
+
+# --hints--
+
+You should have an `span[class~="sr-only"]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]'));
+```
+
+Your `span[class~="sr-only"]` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
new file mode 100644
index 0000000000..546bcc8998
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
@@ -0,0 +1,172 @@
+---
+id: 61fdac1e31692f9a9ad97295
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The CSS `clip` property is used to define the visible portions of an element. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
+
+The `clip-path` property determines the shape the `clip` property should take. Set the `clip-path` property to the value of `inset(50%)`, forming the clip-path into a rectangle within the element.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `clip` property set to `rect(1px, 1px, 1px, 1px)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)');
+```
+
+Your `span[class~="sr-only"]` selector should have a `clip-path` property set to `inset(50%)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
new file mode 100644
index 0000000000..e964962f3f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
@@ -0,0 +1,172 @@
+---
+id: 61fdaea3999cb19d76ce717b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Now you need to size these elements down. Give your `span[class~="sr-only"]` selector a `width` and `height` property set to `1px`.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `width` property set to `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px');
+```
+
+Your `span[class~="sr-only"]` selector should have a `height` property set to `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
new file mode 100644
index 0000000000..2865fbb968
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
@@ -0,0 +1,174 @@
+---
+id: 61fdaf9ff894b6a084ecdc1b
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+To prevent the text content from overflowing, give your `span[class~="sr-only"]` selector an `overflow` property set to `hidden` and a `white-space` property set to `nowrap`.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have an `overflow` property set to `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden');
+```
+
+Your `span[class~="sr-only"]` selector should have a `white-space` property set to `nowrap`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
new file mode 100644
index 0000000000..5a05cb1e81
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
@@ -0,0 +1,182 @@
+---
+id: 61fdafe6f07fd7a1c6785bc2
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Finally, you need to take these hidden elements out of the document flow. Give the `span[class~="sr-only"]` selector a `position` property set to `absolute`, a `padding` property set to `0`, and a `margin` property set to `-1px`. This will ensure that not only are they no longer visible, but they are not even within the page view.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute');
+```
+
+Your `span[class~="sr-only"]` selector should have a `padding` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px');
+```
+
+Your `span[class~="sr-only"]` selector should have a `margin` property set to `-1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
new file mode 100644
index 0000000000..f23a9e5e35
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
@@ -0,0 +1,192 @@
+---
+id: 61fdb04d9939f0a26ca51c2b
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Time to style your table heading. Create an `h1` selector. Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`.
+
+# --hints--
+
+You should have an `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+Your `h1` selector should have a `max-width` property set to `37.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width') === '37.25rem');
+```
+
+Your `h1` selector should have a `margin` property set to `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin') === '0px auto');
+```
+
+Your `h1` selector should have a `padding` property set to `1.5rem 1.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding') === '1.5rem 1.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
new file mode 100644
index 0000000000..04dd430379
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
@@ -0,0 +1,198 @@
+---
+id: 620159cd5431aa34bc6a4c9c
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Target your flex container with an `h1 .flex` selector. Give it a `display` property set to `flex` to enable the flexbox layout. Then set the `flex-direction` property to `column-reverse` - this will display the nested elements from bottom to top. Finally, set the `gap` property to `1rem` to create some space between the elements.
+
+# --hints--
+
+You should have an `h1 .flex` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex'));
+```
+
+Your `h1 .flex` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('display') === 'flex');
+```
+
+Your `h1 .flex` selector should have a `flex-direction` property set to `column-reverse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('flex-direction') === 'column-reverse');
+```
+
+Your `h1 .flex` selector should have a `gap` property set to `1rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
new file mode 100644
index 0000000000..c376c6a27a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
@@ -0,0 +1,194 @@
+---
+id: 62015a5da1c95c358f079ebb
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+The `:first-of-type` pseudo-selector is used to target the first element that matches the selector. Create an `h1 .flex span:first-of-type` selector to target the first `span` element in your `.flex` container. Remember that your `span` elements are reversed, visually, so this will appear to be the second element on the page.
+
+Give your new selector a `font-size` property of `0.7em` to make it look like a sub-heading.
+
+# --hints--
+
+You should have an `h1 .flex span:first-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type'));
+```
+
+Your `h1 .flex span:first-of-type` selector should have a `font-size` property set to `0.7em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.getPropertyValue('font-size') === '0.7em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
new file mode 100644
index 0000000000..988875664f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
@@ -0,0 +1,196 @@
+---
+id: 62015cd2654a1139321a89d2
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+The `:last-of-type` pseudo-selector does the exact opposite - it targets the last element that matches the selector. Create an `h1 .flex span:last-of-type` selector to target the last `span` in your flex container, and give it a `font-size` property set to `1.2em` to make it look like a header.
+
+# --hints--
+
+You should have an `h1 .flex span:last-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type'));
+```
+
+Your `h1 .flex span:last-of-type` selector should have a `font-size` property set to `1.2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.getPropertyValue('font-size') === '1.2em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
new file mode 100644
index 0000000000..bea49bb7f9
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
@@ -0,0 +1,212 @@
+---
+id: 62015d8942384c3aed48329e
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+You wrapped your table in a section element - now you can style that to give your table a border. Create a `section` selector, and give it a `max-width` property set to `40rem` for responsive design. Set the `margin` property to `0 auto` to center it, and set the `border` property to `2px solid #d0d0d5`.
+
+# --hints--
+
+You should have a `section` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section'));
+```
+
+Your `section` selector should have a `max-width` property set to `40rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('max-width') === '40rem');
+```
+
+Your `section` selector should have a `margin` property set to `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('margin') === '0px auto');
+```
+
+Your `section` selector should have a `border` property set to `2px solid #d0d0d5`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('border') === '2px solid rgb(208, 208, 213)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
new file mode 100644
index 0000000000..ec97094732
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
@@ -0,0 +1,224 @@
+---
+id: 620167374bb8b4455cd11125
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+The last part of your table heading is your years. Create a `#years` selector, and enable flexbox. Justify the content to the end of the flex direction, and make the element sticky. Fix it to the top of its container with `top: 0`.
+
+# --hints--
+
+You should have a `#years` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years'));
+```
+
+Your `#years` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex');
+```
+
+Your `#years` selector should have a `justify-content` property set to `flex-end`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('justify-content') === 'flex-end');
+```
+
+Your `#years` selector should have a `position` property set to `sticky`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('position') === 'sticky');
+```
+
+Your `#years` selector should have a `top` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
new file mode 100644
index 0000000000..be6eec61b2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
@@ -0,0 +1,212 @@
+---
+id: 620174ed519dd7506c1a4b61
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Now apply some color to your `#years`. Make the text `#fff` and the background `#0a0a23`.
+
+# --hints--
+
+Your `#years` should have a `color` property set to `#fff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)');
+```
+
+Your `#years` should have a `background-color` property set to `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
new file mode 100644
index 0000000000..9067889bef
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
@@ -0,0 +1,223 @@
+---
+id: 620175b3710a0951cfa86edf
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+The `calc()` function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:
+
+```css
+.example {
+  margin: 10px;
+  width: calc(100% - 20px);
+}
+```
+
+Give `#years` a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+# --hints--
+
+Your `#years` selector should have a `margin` property set to `0 -2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
+```
+
+Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+```js
+const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding');
+assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5rem 0px'].includes(padding));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
new file mode 100644
index 0000000000..bf3e0d8e19
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
@@ -0,0 +1,232 @@
+---
+id: 6201782cc420715562f36271
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Style the text within your `#years` element by creating a `#years span[class]` selector. The `span[class]` syntax will target any `span` element that has a `class` attribute set, regardless of the attribute's value.
+
+Give your new selector a `bold` font, a width of `4.5rem`, and text aligned to the right.
+
+# --hints--
+
+You should have a `#years span[class]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]'));
+```
+
+Your `#years span[class]` selector should have a `font-weight` property set to `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+Your `#years span[class]` selector should have a `width` property set to `4.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('width') === '4.5rem');
+```
+
+Your `#years span[class]` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('text-align') === 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
new file mode 100644
index 0000000000..4c0ab4ab20
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
@@ -0,0 +1,224 @@
+---
+id: 620179bc0a6a2358c72b90ad
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+You wrapped your tables in a container with the `table-wrap` class. Create a selector for that class, and give it a `padding` set to `0 0.75rem 1.5rem 0.75rem`.
+
+# --hints--
+
+You should have a `.table-wrap` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap'));
+```
+
+Your `.table-wrap` selector should have a `padding` property set to `0 0.75rem 1.5rem 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
new file mode 100644
index 0000000000..df7a3d561d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
@@ -0,0 +1,230 @@
+---
+id: 62017b6f47454059bf2d3bd1
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Before you start diving in to the table itself, your `span` elements are currently bolded. Create a `span:not(.sr-only)` selector and give it a `font-weight` property set to `normal`.
+
+The `:not()` pseudo-selector is used to target all elements that do not match the selector - in this case, any of your `span` elements that do not have the `sr-only` class. This ensures that your earlier rules for the `span[class~="sr-only"]` selector are not overwritten.
+
+# --hints--
+
+You should have a `span:not(.sr-only)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
+```
+
+Your `span:not(.sr-only)` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
new file mode 100644
index 0000000000..6563d6a1d2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
@@ -0,0 +1,291 @@
+---
+id: 62017f47c87be96457c49f46
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Rather than having to constantly double-check you are not overwriting your earlier properties, you can use the `!important` keyword to ensure these properties are always applied, regardless of order or specificity.
+
+Give each property in your `span[class~="sr-only"]` selector an `!important` keyword. Do not change any of the values.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have the `border` property set to `0 !important`.
+
+```js
+// log it
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `clip` property set to `rect(1px, 1px, 1px, 1px) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `clip-path` property set to `inset(50%) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip-path: inset(50%) !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `height` property set to `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('height: 1px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `width` property set to `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('width: 1px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `position` property set to `absolute !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('position: absolute !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `overflow` property set to `hidden !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('overflow: hidden !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `white-space` property set to `nowrap !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('white-space: nowrap !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `padding` property set to `0 !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('padding: 0px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `margin` property set to `-1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('margin: -1px !important;'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span:not(.sr-only) {
+  font-weight: normal;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
new file mode 100644
index 0000000000..131df23ce9
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
@@ -0,0 +1,236 @@
+---
+id: 62017fa5bbef406580ceb44f
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Now that you have added the `!important` keyword, you can remove the `:not(.sr-only)` from your `span` selector.
+
+# --hints--
+
+You should not have a `span:not(.sr-only)` selector.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')));
+```
+
+You should have a `span` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span'));
+```
+
+You should not change the `font-weight`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span:not(.sr-only) {
+  font-weight: normal;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
new file mode 100644
index 0000000000..68b9ddf74a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
@@ -0,0 +1,238 @@
+---
+id: 62018243f046a368fab8ffb6
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Create a `table` selector to target your tables. Set the `border-collapse` property to `collapse`, which will allow cell borders to collapse into a single border, instead of a border around each cell. Also set the `border` property to `0` to hide the borders themselves.
+
+# --hints--
+
+You should have a `table` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table'));
+```
+
+Your `table` selector should have a `border-collapse` property set to `collapse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-collapse') === 'collapse');
+```
+
+Your `table` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
new file mode 100644
index 0000000000..37746c9d7e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
@@ -0,0 +1,242 @@
+---
+id: 6201830cb0c74b69f1b41635
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Ensure your table fills its container with a `width` property set to `100%`, then position it relatively and give it a top margin of `3rem`.
+
+# --hints--
+
+Your `table` selector should have a `width` property set to `100%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%');
+```
+
+Your `table` selector should have a `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('position') === 'relative');
+```
+
+Your `table` selector should have a `margin-top` property set to `3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('margin-top') === '3rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+table {
+  border-collapse: collapse;
+  border: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
new file mode 100644
index 0000000000..a59b2617ab
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
@@ -0,0 +1,252 @@
+---
+id: 620186f4b6b8356d2def576b
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Next you need to style your `caption` elements to look more like headers. Create a `table caption` selector. Set the text to have a color of `#356eaf`, a size of `1.3em`, and a normal weight.
+
+# --hints--
+
+You should have a `table caption` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption'));
+```
+
+Your `table caption` selector should have a `color` property set to `#356eaf`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('color') === 'rgb(53, 110, 175)');
+```
+
+Your `table caption` selector should have a `font-size` property set to `1.3em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-size') === '1.3em');
+```
+
+Your `table caption` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
new file mode 100644
index 0000000000..c3938b04ac
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
@@ -0,0 +1,251 @@
+---
+id: 62018ba1aa263770c953be66
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Now give the captions an absolute position, and shift them `-2.25rem` from the top and `0.5rem` from the left.
+
+# --hints--
+
+Your `table caption` selector should have the `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute');
+```
+
+Your `table caption` selector should have the `top` property set to `-2.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('top') === '-2.25rem');
+```
+
+Your `table caption` selector should have the `left` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
new file mode 100644
index 0000000000..5d92ebdef9
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
@@ -0,0 +1,261 @@
+---
+id: 62018c3e94434a71af1d5eaa
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Create a selector to target your `td` elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container.
+
+# --hints--
+
+You should have a `tbody td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td'));
+```
+
+Your `tbody td` selector should have a `width` property set to `100vw`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('width') === '100vw');
+```
+
+Your `tbody td` selector should have a `min-width` property set to `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('min-width') === '4rem');
+```
+
+Your `tbody td` selector should have a `max-width` property set to `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('max-width') === '4rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
new file mode 100644
index 0000000000..842e7f51b6
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
@@ -0,0 +1,255 @@
+---
+id: 62018ec29b3ae674f40bef31
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Now target the `th` elements within your table body, and give them a width of the entire container, less `12rem`.
+
+# --hints--
+
+You should have a `tbody th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th'));
+```
+
+Your `tbody th` selector should have a `width` property set to `calc(100% - 12rem)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('width') === 'calc(100% - 12rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
new file mode 100644
index 0000000000..f20111ca92
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
@@ -0,0 +1,265 @@
+---
+id: 62019093fe30e278e797d2f6
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+The `[attribute="value"]` selector targets any element that has an attribute with a specific value. Create a `tr[class="total"]` selector to target specifically your `tr` elements with the `total` class. Give it a bottom border of `4px double #0a0a23` and make the font bold.
+
+# --hints--
+
+You should have a `tr[class="total"]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]'));
+```
+
+Your `tr[class="total"]` selector should have a `border-bottom` property set to `4px double #0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('border-bottom') === '4px double rgb(10, 10, 35)');
+```
+
+Your `tr[class="total"]` selector should have a `font-weight` property set to `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
new file mode 100644
index 0000000000..da1b2b6db3
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
@@ -0,0 +1,270 @@
+---
+id: 620191707bc65579ddd3ce15
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Using the same selector syntax, target the `th` elements within your table rows where the `class` is `total`. Align the text to the left, and give them a padding of `0.5rem 0 0.25rem 0.5rem`.
+
+# --hints--
+
+You should have a `tr[class="total"] th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th'));
+```
+
+Your `tr[class="total"] th` selector should have a `text-align` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left');
+```
+
+Your `tr[class="total"] th` selector should have a `padding` property set to `0.5rem 0 0.25rem 0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
new file mode 100644
index 0000000000..7b947bb3ee
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
@@ -0,0 +1,277 @@
+---
+id: 620192a767533a7ad19d96d7
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+The key difference between `tr[class="total"]` and `tr.total` is that the first will select `tr` elements where the *only* class is `total`. The second will select `tr` elements where the class *includes* `total`.
+
+In your case, `tr.total` will work. You can use this selector to target all `td` elements within your `.total` rows. Align the text to the right, and give them a padding of `0 0.25rem`.
+
+# --hints--
+
+You should have a `tr.total td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td'));
+```
+
+Your `tr.total td` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('text-align') === 'right');
+```
+
+Your `tr.total td` selector should have a `padding` property set to `0 0.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('padding') === '0px 0.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
new file mode 100644
index 0000000000..40864c9312
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
@@ -0,0 +1,274 @@
+---
+id: 6201995d9ab88e80f1989dce
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+The `:nth-of-type()` pseudo-selector is used to target specific elements based on their order among siblings of the same type. Use this pseudo-selector to target the third `td` element within your `total` table rows. Give it a right padding of `0.5rem`.
+
+# --hints--
+
+You should have a `tr.total td:nth-of-type(3)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)'));
+```
+
+Your `tr.total td:nth-of-type(3)` selector should have a `padding-right` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
new file mode 100644
index 0000000000..d0ec48a16c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
@@ -0,0 +1,278 @@
+---
+id: 620199c7a7a32c81d4db3410
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Give your `tr.total` elements a hover effect that changes the background to `#99c9ff`.
+
+# --hints--
+
+You should have a `tr.total:hover` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover'));
+```
+
+Your `tr.total:hover` selector should have the `background-color` property set to `#99c9ff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyValue('background-color') === 'rgb(153, 201, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
new file mode 100644
index 0000000000..8446e4d528
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
@@ -0,0 +1,284 @@
+---
+id: 6201a1a7af32c287bd6b8183
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Select your `td` elements with the `class` value of `current`, and make the font italic.
+
+# --hints--
+
+You should have a `td.current` selector.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('td.current') || def('td[class="current"]'));
+```
+
+Your `td.current` selector should have the `font-style` property set to `italic`.
+
+```js
+const font = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style');
+assert((font('td.current') || font('td[class="current"]')) === 'italic');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
new file mode 100644
index 0000000000..a1ea3f0dcd
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
@@ -0,0 +1,288 @@
+---
+id: 6201a1cc668a34888f5b2f52
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Select the `tr` elements with the `class` set to `data`. Give them a background image of `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+# --hints--
+
+You should have a `tr.data` selector.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('tr.data') || def('tr[class="data"]'));
+```
+
+Your `tr.data` selector should have the `background-image` property set to `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+```js
+const bg = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('background-image');
+assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
new file mode 100644
index 0000000000..0853021d6c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
@@ -0,0 +1,302 @@
+---
+id: 6201a20d742f5c89736c8cfb
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Select the `th` elements within your `tr.data` elements. Align the text to the left, and give them a top padding of `0.3rem` and a left padding of `0.5rem`.
+
+# --hints--
+
+You should have a `tr.data th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th'));
+```
+
+Your `tr.data th` selector should have a `text-align` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('text-align') === 'left');
+```
+
+Your `tr.data th` selector should have a `padding-top` property set to `0.3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-top') === '0.3rem');
+```
+
+Your `tr.data th` selector should have a `padding-left` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
new file mode 100644
index 0000000000..66cc4c45f6
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
@@ -0,0 +1,320 @@
+---
+id: 6201a42e39bf3b95b6a33bf3
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Create a `tr.data th .description` selector to target the elements with the `class` set to `description` that are within your `th` elements in your `.data` table rows. Give them a block display, make the text italic with a normal weight, and position them with a `padding` set to `1rem 0 0.75rem` and a right margin of `-13.5rem`.
+
+# --hints--
+
+You should have a `tr.data th .description` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description'));
+```
+
+Your `tr.data th .description` selector should have a `display` property set to `block`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('display') === 'block');
+```
+
+Your `tr.data th .description` selector should have a `font-style` property set to `italic`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-style') === 'italic');
+```
+
+Your `tr.data th .description` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-weight') === 'normal');
+```
+
+Your `tr.data th .description` selector should have a `padding` property set to `1rem 0 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('padding') === '1rem 0px 0.75rem');
+```
+
+Your `tr.data th .description` selector should have a `margin-right` property set to `-13.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('margin-right') === '-13.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
new file mode 100644
index 0000000000..55d65268a3
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
@@ -0,0 +1,296 @@
+---
+id: 6201a4adcc6414968b391592
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Your `span` elements now all have more specific styling, which means you can remove your `span` rule.
+
+# --hints--
+
+You should not have a `span` selector.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span {
+  font-weight: normal;
+}
+--fcc-editable-region--
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
new file mode 100644
index 0000000000..74ca4c192b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
@@ -0,0 +1,312 @@
+---
+id: 6201a5258af7b398b030bfaf
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Your dollar amounts are currently misaligned. Create a selector to target the `td` elements within your `tr.data` elements. Vertically align the text to the top, horizontally align the text to the right, and set the padding to `0.3rem 0.25rem 0`.
+
+# --hints--
+
+You should have a `tr.data td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td'));
+```
+
+Your `tr.data td` selector should have a `vertical-align` property set to `top`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('vertical-align') === 'top');
+```
+
+Your `tr.data td` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('text-align') === 'right');
+```
+
+Your `tr.data td` selector should have a `padding` property set to `0.3rem 0.25rem 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('padding') === '0.3rem 0.25rem 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
new file mode 100644
index 0000000000..672e43ac9c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
@@ -0,0 +1,589 @@
+---
+id: 6201a59be346d399c21d10b1
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Create another selector for the `td` elements within your `tr.data` element, but specifically select the last one. Give this a right padding of `0.5rem`.
+
+With this, your balance sheet is complete!
+
+# --hints--
+
+You should have a `tr.data td:last-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type'));
+```
+
+Your `tr.data td:last-of-type` selector should have a `padding-right` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+tr.data td:last-of-type {
+  padding-right: 0.5rem;
+}
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
new file mode 100644
index 0000000000..71388718e0
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
@@ -0,0 +1,209 @@
+---
+id: 64076bbeba941114b0027b6a
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Adding position `sticky` moved the element into its own stack. To ensure your `#years` element does not get hidden by different stacks, add a `z-index` property set to `999` in the `#years` rule.
+
+# --hints--
+
+Your `#years` selector should have a `z-index` property set to `999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index'), '999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
new file mode 100644
index 0000000000..6295eb77a1
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
@@ -0,0 +1,76 @@
+---
+id: 5d822fd413a79914d39e98cc
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Welcome to the CSS Variables Skyline project! Start by adding a `link` element that links your `styles.css` file within the `head` element.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.isNotNull(document.querySelector('link'));
+```
+
+You should not change your existing `head` tags. Make sure you did not delete the closing tag.
+
+```js
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
+```
+
+You should have one void `link` element.
+
+```js
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>    
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
new file mode 100644
index 0000000000..866b58f80c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
@@ -0,0 +1,56 @@
+---
+id: 5d822fd413a79914d39e98cd
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick that helps visualize where elements are and their size. You will remove this later.
+
+# --hints--
+
+You should use the `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+You should use the `border` property to style all the elements.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('border'));
+```
+
+All elements should have a `1px solid black` border.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles?.border, '1px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
new file mode 100644
index 0000000000..1ea4cc4156
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
@@ -0,0 +1,61 @@
+---
+id: 5d822fd413a79914d39e98ce
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements.
+
+# --hints--
+
+You should use the `box-sizing` property.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing'));
+```
+
+You should make use of the existing `*` selector.
+
+```js
+// Two selectors create two CSSStyleRule objects
+assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1);
+```
+
+All elements should have a `box-sizing` of `border-box`.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles.boxSizing, 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+}
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
new file mode 100644
index 0000000000..90efe5f935
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
@@ -0,0 +1,69 @@
+---
+id: 5d822fd413a79914d39e98cf
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport.
+
+# --hints--
+
+You should use the `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` should have a `height` of `100vh`.
+
+```js
+const bodyStyles = new __helpers.CSSHelp(document).getStyle('body');
+assert.equal(bodyStyles?.height, '100vh');
+```
+
+Your `body` should have a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+Your `body` should have the `overflow` property set to `hidden`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
new file mode 100644
index 0000000000..a49b3f5dff
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
@@ -0,0 +1,65 @@
+---
+id: 5d822fd413a79914d39e98d0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+Your `div` element should be within the `body`.
+
+```js
+assert(document.querySelector('div')?.parentElement?.localName === 'body');
+```
+
+Your `div` element should have a class of `background-buildings`
+
+```js
+assert([...document.querySelector('div')?.classList]?.includes('background-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
new file mode 100644
index 0000000000..56eebc0924
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
@@ -0,0 +1,68 @@
+---
+id: 5d822fd413a79914d39e98d1
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Give your `.background-buildings` element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`.
+
+# --hints--
+
+You should use the `background-buildings` class to select the correct element.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings'));
+```
+
+Your `.background-buildings` element should have a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%');
+```
+
+Your `.background-buildings` element should have a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
new file mode 100644
index 0000000000..fe650ce0a4
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
@@ -0,0 +1,83 @@
+---
+id: 5d822fd413a79914d39e98d2
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Nest a `div` with a class of `bb1` in the background buildings container. Open your `styles.css` file, and give `.bb1` a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div').length, 2);
+```
+
+You should give the new `div` a class of `bb1`.
+
+```js
+assert.exists(document.querySelector('div.bb1'));
+```
+
+You should use a `.bb1` class selector to style the element.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1'));
+```
+
+You should give the `.bb1` element a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%');
+```
+
+You should give the `.bb1` element a `height` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
new file mode 100644
index 0000000000..34ef10accb
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
@@ -0,0 +1,105 @@
+---
+id: 5d822fd413a79914d39e98d3
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections.
+
+# --hints--
+
+You should create four new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 6);
+```
+
+You should give one of the new `div` elements a class of `bb1a`.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+You should give one of the new `div` elements a class of `bb1b`.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+You should give one of the new `div` elements a class of `bb1c`.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+You should give one of the new `div` elements a class of `bb1d`.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+```
+
+You should place the new `div` elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d'));
+```
+
+You should place the new `div` elements within the `.bb1` element.
+
+```js
+assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+--fcc-editable-region--
+      <div class="bb1"></div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
new file mode 100644
index 0000000000..cae117f39b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
@@ -0,0 +1,138 @@
+---
+id: 5d822fd413a79914d39e98d4
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container.
+
+# --hints--
+
+You should use a class selector to style `.bb1a`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a'));
+```
+
+You should give `.bb1a` a `width` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%');
+```
+
+You should give `.bb1a` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1b`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b'));
+```
+
+You should give `.bb1b` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%');
+```
+
+You should give `.bb1b` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1c`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c'));
+```
+
+You should give `.bb1c` a `width` of `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%');
+```
+
+You should give `.bb1c` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1d`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d'));
+```
+
+You should give `.bb1d` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%');
+```
+
+You should give `.bb1d` a `height` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
new file mode 100644
index 0000000000..8f84d629f0
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
@@ -0,0 +1,112 @@
+---
+id: 5d822fd413a79914d39e98d5
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Center the parts of your building by turning the `.bb1` element into a flexbox parent. Use the `flex-direction` and `align-items` properties to center the children.
+
+# --hints--
+
+You should not change the `.bb1` `width` or `height` properties.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.width, '10%');
+assert.equal(bb1Style?.height, '70%');
+```
+
+You should give the `.bb1` element a `display` of `flex`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.display, 'flex');
+```
+
+You should give the `.bb1` element a `flex-direction` of `column`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.flexDirection, 'column');
+```
+
+You should give the `.bb1` element a `align-items` of `center`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.alignItems, 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
new file mode 100644
index 0000000000..f08fd7a1d9
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
@@ -0,0 +1,103 @@
+---
+id: 5d822fd413a79914d39e98d6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Now you have something that is resembling a building. You are ready to create your first variable. In the previous lecture videos you learned that variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the rule for the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`.
+
+# --hints--
+
+You should create a new variable named `--building-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1'));
+```
+
+You should define the `--building-color1` variable within `.bb1`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+```
+
+You should give `--building-color1` a value of `#999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
new file mode 100644
index 0000000000..7f714196cb
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
@@ -0,0 +1,100 @@
+---
+id: 5d822fd413a79914d39e98d7
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Whatever value you gave the variable will be applied to whatever property you use it on.
+
+Add the variable `--building-color1` you created in the previous step as the value of the `background-color` property of the `.bb1a` class.
+
+# --hints--
+
+The `background-color` of the `.bb1a` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
new file mode 100644
index 0000000000..01335d8d2d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98d8
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building.
+
+# --hints--
+
+The `background-color` of the `.bb1b` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+The `background-color` of the `.bb1c` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+The `background-color` of the `.bb1d` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
new file mode 100644
index 0000000000..3690866c53
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
@@ -0,0 +1,99 @@
+---
+id: 5d822fd413a79914d39e98d9
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable.
+
+# --hints--
+
+You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+--fcc-editable-region--
+  --building-color1: #999;
+--fcc-editable-region--
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
new file mode 100644
index 0000000000..a614918d18
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98da
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Your first building looks pretty good now. Nest three new `div` elements in the `.background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background.
+
+# --hints--
+
+You should create a `div` with a class of `bb2`.
+
+```js
+assert.exists(document.querySelector('div.bb2'));
+```
+
+You should create a `div` with a class of `bb3`.
+
+```js
+assert.exists(document.querySelector('div.bb3'));
+```
+
+You should create a `div` with a class of `bb4`.
+
+```js
+assert.exists(document.querySelector('div.bb4'));
+```
+
+You should create 3 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 9);
+```
+
+You should place these `div` elements within the `.background-buildings` element.
+
+```js
+assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4);
+```
+
+You should place the elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
new file mode 100644
index 0000000000..b90a51c1f5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98db
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive.
+
+# --hints--
+
+You should give `.bb2` a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%');
+```
+
+You should give `.bb2` a `height` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%');
+```
+
+You should give `.bb3` a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%');
+```
+
+You should give `.bb3` a `height` of `55%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%');
+```
+
+You should give `.bb4` a `width` of `11%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%');
+```
+
+You should give `.bb4` a `height` of `58%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
new file mode 100644
index 0000000000..43c97e479e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
@@ -0,0 +1,127 @@
+---
+id: 5d822fd413a79914d39e98dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+The buildings are currently stacked on top of each other. Align the buildings by turning the `.background-buildings` element into a flexbox parent. Use the `align-items` and `justify-content` properties to evenly space the buildings across the bottom of the element.
+
+# --hints--
+
+You should add a `display` of `flex` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex');
+```
+
+You should add an `align-items` of `flex-end` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end');
+```
+
+You should add a `justify-content` of `space-evenly` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
new file mode 100644
index 0000000000..45cde3a259
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98dd
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+The buildings are too spaced out. Squeeze them together by adding two empty `div` elements to the top of the `.background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center.
+
+# --hints--
+
+You should add two new `div` elements before the `.bb1` element.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('bb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('bb1'));
+```
+
+You should add one new `div` element between the `.bb3` and `.bb4` element.
+
+```js
+assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling);
+```
+
+You should add two new `div` elements after the `.bb4` element.
+
+```js
+const bb4 = document.querySelector('.bb4');
+assert.exists(bb4?.nextElementSibling);
+assert.exists(bb4?.nextElementSibling?.nextElementSibling);
+```
+
+You should add 5 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 14);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
new file mode 100644
index 0000000000..a7617deb09
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
@@ -0,0 +1,140 @@
+---
+id: 5d822fd413a79914d39e98de
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a new variable below your `--building-color1` variable. Name your new variable `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`.
+
+# --hints--
+
+You should define a new property variable called `--building-color2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2'));
+```
+
+You should give `--building-color2` a value of `#66cc99` within the `.bb1` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99');
+```
+
+You should set the `background-color` of `.bb2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor);
+```
+
+You should set the `background-color` using the `--building-color2` variable.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
new file mode 100644
index 0000000000..aa97fc4df8
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98df
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+That didn't work. You should add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`.
+
+# --hints--
+
+You should add a fallback value of `green` to the `background-color` property.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2,green)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
new file mode 100644
index 0000000000..cc38315c42
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98e0
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create a new variable below the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`.
+
+# --hints--
+
+You should define a new property variable called `--building-color3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3'));
+```
+
+You should give `--building-color3` a value of `#cc6699`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+You should set the `background-color` of `.bb3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor);
+```
+
+You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3,pink)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
new file mode 100644
index 0000000000..b146a3017d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
@@ -0,0 +1,155 @@
+---
+id: 5d822fd413a79914d39e98e1
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+That didn't work, because the variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there.
+
+# --hints--
+
+You should declare a `:root` selector at the top of the stylesheet.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root'));
+```
+
+You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff');
+```
+
+You should define `--building-color2` with a value of `#66cc99` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99');
+```
+
+You should define `--building-color3` with a value of `#cc6699` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+You should remove the custom property variables from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
new file mode 100644
index 0000000000..0d71f94d0c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
@@ -0,0 +1,135 @@
+---
+id: 5d822fd413a79914d39e98e2
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now.
+
+# --hints--
+
+You should remove the fallback in the `background-color` from `.bb2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+You should remove the fallback in the `background-color` from `.bb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
new file mode 100644
index 0000000000..9434a0ce33
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
@@ -0,0 +1,144 @@
+---
+id: 5d822fd413a79914d39e98e3
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building.
+
+# --hints--
+
+You should define a new property variable called `--building-color4`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4'));
+```
+
+You should give `--building-color4` a value of `#538cc6` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6');
+```
+
+You should add `background-color: var(--building-color4)` in the `.bb4` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.getPropVal('background-color', true), 'var(--building-color4)')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
new file mode 100644
index 0000000000..7aeec907b2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
@@ -0,0 +1,147 @@
+---
+id: 5d822fd413a79914d39e98e4
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+The background buildings are starting to look pretty good. Create a new `div` below the `.background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 15);
+```
+
+The new `div` should come after the `div.background-buildings` element.
+
+```js
+assert.exists(document.querySelector('div.background-buildings + div'));
+```
+
+Your new `div` should have a class of `foreground-buildings`.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
new file mode 100644
index 0000000000..d1b7b83393
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
@@ -0,0 +1,161 @@
+---
+id: 5d822fd413a79914d39e98e5
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+You want the `.foreground-buildings` container to sit directly on top of the `.background-buildings` element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner.
+
+# --hints--
+
+You should use a `.foreground-buildings` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+You should give the `.foreground-buildings` element a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%');
+```
+
+You should give the `.foreground-buildings` element a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%');
+```
+
+You should give the `.foreground-buildings` element a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute');
+```
+
+You should give the `.foreground-buildings` element a `top` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
new file mode 100644
index 0000000000..dc1a0644b0
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
@@ -0,0 +1,192 @@
+---
+id: 5d822fd413a79914d39e98e6
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground.
+
+# --hints--
+
+You should create a new `div` with a class of `fb1`.
+
+```js
+assert.exists(document.querySelector('div.fb1'));
+```
+
+You should create a new `div` with a class of `fb2`.
+
+```js
+assert.exists(document.querySelector('div.fb2'));
+```
+
+You should create a new `div` with a class of `fb3`.
+
+```js
+assert.exists(document.querySelector('div.fb3'));
+```
+
+You should create a new `div` with a class of `fb4`.
+
+```js
+assert.exists(document.querySelector('div.fb4'));
+```
+
+You should create a new `div` with a class of `fb5`.
+
+```js
+assert.exists(document.querySelector('div.fb5'));
+```
+
+You should create a new `div` with a class of `fb6`.
+
+```js
+assert.exists(document.querySelector('div.fb6'));
+```
+
+You should place these new `div` elements within the `.foreground-buildings` element.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings > div.fb1'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb2'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb3'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb4'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb5'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb6'));
+```
+
+You should place the new `div` elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
new file mode 100644
index 0000000000..215b44f2f3
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e98e7
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`.
+
+# --hints--
+
+You should create a `.fb1` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1'));
+```
+
+You should give the `.fb1` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%');
+```
+
+You should give the `.fb1` selector a `height` of `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%');
+```
+
+You should create a `.fb2` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2'));
+```
+
+You should give the `.fb2` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%');
+```
+
+You should give the `.fb2` selector a `height` of `40%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%');
+```
+
+You should create a `.fb3` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3'));
+```
+
+You should give the `.fb3` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%');
+```
+
+You should give the `.fb3` selector a `height` of `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%');
+```
+
+You should create a `.fb4` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4'));
+```
+
+You should give the `.fb4` selector a `width` of `8%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%');
+```
+
+You should give the `.fb4` selector a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%');
+```
+
+You should create a `.fb5` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5'));
+```
+
+You should give the `.fb5` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%');
+```
+
+You should give the `.fb5` selector a `height` of `33%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%');
+```
+
+You should create a `.fb6` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6'));
+```
+
+You should give the `.fb6` selector a `width` of `9%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%');
+```
+
+You should give the `.fb6` selector a `height` of `38%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
new file mode 100644
index 0000000000..dcfbd1726e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
@@ -0,0 +1,190 @@
+---
+id: 5d822fd413a79914d39e98e8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Add the same `display`, `align-items`, and `justify-content` properties and values to `.foreground-buildings` that you used on `.background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container.
+
+# --hints--
+
+You should give `.foreground-buildings` a `display` property of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex');
+```
+
+You should give `.foreground-buildings` an `align-items` property of `flex-end`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end');
+```
+
+You should give `.foreground-buildings` a `justify-content` property of `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
new file mode 100644
index 0000000000..2e1047c628
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98e9
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+You should optimize your code. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`.
+
+# --hints--
+
+You should not remove the `.foreground-buildings` declaration.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+You should remove the `position` property from `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position);
+```
+
+You should remove the `top` property from `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
+```
+
+You should add the `position` property of `absolute` to `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.position, 'absolute');
+```
+
+You should add the `top` property of `0` to `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.top, '0px');
+```
+
+You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.exists(eitherOr());
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
new file mode 100644
index 0000000000..1147503597
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
@@ -0,0 +1,181 @@
+---
+id: 5d822fd413a79914d39e98ea
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore.
+
+# --hints--
+
+You should delete the whole `.foreground-buildings` style declaration.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
new file mode 100644
index 0000000000..79fd7a2246
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98eb
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`.
+
+# --hints--
+
+You should give `.fb1` a `background-color` using `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.getPropVal('background-color', true), 'var(--building-color4)');
+```
+
+You should give `.fb2` a `background-color` using `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+You should give `.fb3` a `background-color` using `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+You should give `.fb4` a `background-color` using `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+You should give `.fb5` a `background-color` using `--building-color2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+You should give `.fb6` a `background-color` using `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
new file mode 100644
index 0000000000..bb4a29f503
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98ec
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`.
+
+# --hints--
+
+You should add two `div` elements as the first children of `.foreground-buildings`.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('fb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('fb1'));
+```
+
+You should add one `div` element between `.fb2` and `.fb3`.
+
+```js
+assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling);
+```
+
+
+You should add two `div` elements as the last children of `.foreground-buildings`.
+
+```js
+const fb6 = document.querySelector('.fb6');
+assert.exists(fb6?.nextElementSibling);
+assert.exists(fb6?.nextElementSibling?.nextElementSibling);
+```
+
+You should have added 5 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 26);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
new file mode 100644
index 0000000000..288de384a8
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
@@ -0,0 +1,202 @@
+---
+id: 5d822fd413a79914d39e98ed
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings.
+
+# --hints--
+
+You should give `.fb4` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative');
+```
+
+You should give `.fb4` a `left` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%');
+```
+
+You should give `.fb5` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative');
+```
+
+You should give `.fb5` a `right` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
new file mode 100644
index 0000000000..1b950d244f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
@@ -0,0 +1,196 @@
+---
+id: 5d822fd413a79914d39e98ee
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`.
+
+# --hints--
+
+You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector.
+
+```js
+assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code));
+```
+
+You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector.
+
+```js
+assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
new file mode 100644
index 0000000000..022722b6a3
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
@@ -0,0 +1,197 @@
+---
+id: 5d822fd413a79914d39e98ef
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings.
+
+# --hints--
+
+You should create a new variable in `:root` called `--window-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1'));
+```
+
+You should give the property variable `--window-color1` a value of `black`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
new file mode 100644
index 0000000000..d4e4ca6565
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
@@ -0,0 +1,218 @@
+---
+id: 5d822fd413a79914d39e98f0
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+In a previous module you learned that gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this:
+
+```css
+gradient-type(
+  color1,
+  color2
+);
+```
+
+In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a `background` property below the `background-color` property. Set it as a gradient of type `linear-gradient` that uses `--building-color1` as the first color and `--window-color1` as the second.
+
+# --hints--
+
+You should apply a `background` to `.bb1a` right after the `background-color`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+```
+
+You should give the `background` a `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
+```
+
+You should give the `background` a `linear-gradient` starting from `var(--building-color1)`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
+```
+
+You should give the `background` a `linear-gradient` ending at `var(--window-color1)`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
new file mode 100644
index 0000000000..13c9235203
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98f1
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+You want to add the same gradient to the next two sections. Instead of doing that, create a new class selector called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class selector.
+
+# --hints--
+
+You should create a new class selector called `bb1-window`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window'));
+```
+
+You should move the `height` property and value from `.bb1a` to `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%');
+```
+
+You should move the `background` property and value from `.bb1a` to `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+You should not move the `background-color` property from `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+You should not move the `width` property from `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
new file mode 100644
index 0000000000..d2c82337a1
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
@@ -0,0 +1,237 @@
+---
+id: 5d822fd413a79914d39e98f2
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them.
+
+# --hints--
+
+You should not remove the `bb1a` class.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+You should add the `bb1-window` class to the `.bb1a` element.
+
+```js
+assert.exists(document.querySelector('div.bb1a.bb1-window'));
+```
+
+You should not remove the `bb1b` class.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+You should add the `bb1-window` class to the `.bb1b` element.
+
+```js
+assert.exists(document.querySelector('div.bb1b.bb1-window'));
+```
+
+You should not remove the `bb1c` class.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+You should add the `bb1-window` class to the `.bb1c` element.
+
+```js
+assert.exists(document.querySelector('div.bb1c.bb1-window'));
+```
+
+You should not change the `.bb1d` element.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+assert.notExists(document.querySelector('div.bb1d.bb1-window'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
new file mode 100644
index 0000000000..5f4c0d8e10
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
@@ -0,0 +1,222 @@
+---
+id: 5d822fd413a79914d39e98f3
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them.
+
+# --hints--
+
+You should remove the `background-color` from `.bb1a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+You should remove the `height` property from `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height);
+```
+
+You should remove the `background-color` property from `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor);
+```
+
+You should remove the `height` property from `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height);
+```
+
+You should remove the `background-color` property from `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
new file mode 100644
index 0000000000..523c35e8e6
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e98f4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Gradients can use as many colors as you want like this:
+
+```css
+gradient-type(
+  color1,
+  color2,
+  color3
+);
+```
+
+Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property.
+
+# --hints--
+
+You should use the `background` on `.bb1d`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background);
+```
+
+You should give the `background` property a `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient');
+```
+
+You should use `orange` as the first color in the `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange');
+```
+
+You should use `--building-color1` as the second color in the `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)');
+```
+
+You should use `--window-color1` as the third color in the `linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
new file mode 100644
index 0000000000..457fe4acaf
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
@@ -0,0 +1,198 @@
+---
+id: 5d822fd413a79914d39e98f5
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`.
+
+# --hints--
+
+You should remove the `background-color` property and value from `.bb1d`
+
+```js
+assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
new file mode 100644
index 0000000000..d1f3fdc799
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f6
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+You can specify where you want a gradient transition to complete by adding it to the color like this:
+
+```css
+gradient-type(
+  color1,
+  color2 20%,
+  color3
+);
+```
+
+Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action.
+
+# --hints--
+
+You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
new file mode 100644
index 0000000000..0533f06214
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98f7
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half.
+
+# --hints--
+
+You should remove `orange` from the `linear-gradient`.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange');
+```
+
+You should change the now first `linear-gradient` color to transition at `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1) 80%,
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
new file mode 100644
index 0000000000..6bf8b3fe84
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
@@ -0,0 +1,210 @@
+---
+id: 5d822fd413a79914d39e98f8
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building.
+
+# --hints--
+
+You should add two `div` elements to `.bb2`.
+
+```js
+assert.equal(document.querySelector('div.bb2')?.children?.length, 2);
+```
+
+You should give the first `div` a class of `bb2a`.
+
+```js
+assert.exists(document.querySelector('div.bb2a'));
+```
+
+You should give the second `div` a class of `bb2b`.
+
+```js
+assert.exists(document.querySelector('div.bb2b'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+--fcc-editable-region--
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
new file mode 100644
index 0000000000..6fb4f46152
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f9
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later.
+
+# --hints--
+
+You should give `.bb2b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%');
+```
+
+You should give `.bb2b` a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
new file mode 100644
index 0000000000..3a67baddad
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fa
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building.
+
+# --hints--
+
+You should create a new property variable called `window-color2` within `:root`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2'));
+```
+
+You should give `window-color2` a value of `#8cd9b3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
new file mode 100644
index 0000000000..d1924b7bd4
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
@@ -0,0 +1,240 @@
+---
+id: 5d822fd413a79914d39e98fb
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Gradient transitions often gradually change from one color to another. When a more abrupt change is required, the transition can be made with a hard stop like this:
+
+```css
+linear-gradient(
+  var(--first-color) 0%,
+  var(--first-color) 40%,
+  var(--second-color) 40%,
+  var(--second-color) 80%
+);
+```
+
+Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`.
+
+# --hints--
+
+You should give `.bb2b` a `background` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background);
+```
+
+You should use a `linear-gradient` on the `background`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient");
+```
+
+You should use `--building-color2` from `0%` to `6%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/);
+```
+
+You should use `--window-color2` from `6%` to `9%`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%");
+```
+
+`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
new file mode 100644
index 0000000000..d11cd08f03
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fc
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them.
+
+# --hints--
+
+You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
new file mode 100644
index 0000000000..ff29e839ca
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
@@ -0,0 +1,209 @@
+---
+id: 5d822fd413a79914d39e98fd
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore.
+
+# --hints--
+
+You should remove the `background-color` from `.bb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
new file mode 100644
index 0000000000..b11ad202cd
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
@@ -0,0 +1,260 @@
+---
+id: 5d822fd413a79914d39e98fe
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Create and add the following properties to `.bb2a`:
+
+```css
+margin: auto;
+width: 5vw;
+height: 5vw;
+border-top: 1vw solid #000;
+border-bottom: 1vw solid #000;
+border-left: 1vw solid #999;
+border-right: 1vw solid #999;
+```
+
+After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building.
+
+# --hints--
+
+You should give `.bb2a` a `margin` of `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto");
+```
+
+You should give `.bb2a` a `width` of `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw");
+```
+
+You should give `.bb2a` a `height` of `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw");
+```
+
+You should give `.bb2a` a `border-top` of `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)");
+```
+
+You should give `.bb2a` a `border-bottom` of `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)");
+```
+
+You should give `.bb2a` a `border-left` of `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)");
+```
+
+You should give `.bb2a` a `border-right` of `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
new file mode 100644
index 0000000000..162a47660b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
@@ -0,0 +1,238 @@
+---
+id: 5d822fd413a79914d39e98ff
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle.
+
+# --hints--
+
+You should remove the `width` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width);
+```
+
+You should remove the `height` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height);
+```
+
+You should change the `border-left` to use `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)");
+```
+
+You should change the `border-right` to use `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  width: 5vw;
+  height: 5vw;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 1vw solid #999;
+  border-right: 1vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
new file mode 100644
index 0000000000..c5fec5174a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9900
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible.
+
+# --hints--
+
+You should change the `border-left` to use `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent");
+```
+
+You should change the `border-right` to use `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid #999;
+  border-right: 5vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
new file mode 100644
index 0000000000..6bbdfc4dd9
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9901
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building.
+
+# --hints--
+
+You should remove the `margin` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin);
+```
+
+You should remove the `border-top` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
new file mode 100644
index 0000000000..b4ade49d2f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e9902
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end.
+
+# --hints--
+
+You should change `border-bottom` to use `5vh`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh");
+```
+
+You should change `border-bottom` to use `--building-color2`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)");
+```
+
+`border-bottom` should be `5vh solid var(--building-color2)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
new file mode 100644
index 0000000000..860d5af5d1
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9903
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings.
+
+# --hints--
+
+You should define a new property variable `--window-color3`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3"));
+```
+
+You should give `--window-color3` a value of `#d98cb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
new file mode 100644
index 0000000000..7898c0a157
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9904
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this:
+
+```css
+gradient-type(
+  direction,
+  color1,
+  color2
+);
+```
+
+Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`.
+
+# --hints--
+
+You should give `.bb3` a `background` using `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
+```
+
+You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should use `--building-color3` for the first two colors.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)");
+```
+
+You should use `--window-color3` at `15%` for the third color.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
new file mode 100644
index 0000000000..e54093892a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9905
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now.
+
+# --hints--
+
+You should remove the `background-color` from `.bb3`.
+
+```js
+assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
new file mode 100644
index 0000000000..ecd54aa637
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
@@ -0,0 +1,249 @@
+---
+id: 5d822fd413a79914d39e9906
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order.
+
+# --hints--
+
+You should add three `div` elements within `.bb4`.
+
+```js
+assert.equal(document.querySelector("div.bb4")?.children?.length, 3);
+```
+
+You should give the first new `div` a class of `bb4a`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should give the second new `div` a class of `bb4b`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should give the third new `div` a class of `bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4a + div.bb4b"));
+assert.exists(document.querySelector("div.bb4b + div.bb4c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb4"></div>
+--fcc-editable-region--
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
new file mode 100644
index 0000000000..230af5f23f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9907
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`.
+
+# --hints--
+
+You should give `.bb4a` a `width` of `3%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%");
+```
+
+You should give `.bb4a` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%");
+```
+
+You should give `.bb4b` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%");
+```
+
+You should give `.bb4b` a `height` of `5%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%");
+```
+
+You should give `.bb4c` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%");
+```
+
+You should give `.bb4c` a `height` of `85%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
new file mode 100644
index 0000000000..b4bce92acb
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9908
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled.
+
+# --hints--
+
+You should remove the `background-color` from `.bb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor);
+```
+
+You should give `.bb4a` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+You should give `.bb4b` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+You should give `.bb4c` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+}
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
new file mode 100644
index 0000000000..80590e7dcf
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9909
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding.
+
+# --hints--
+
+You should create a new class declaration called `building-wrap`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
new file mode 100644
index 0000000000..9649bd40b5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
@@ -0,0 +1,277 @@
+---
+id: 5d822fd413a79914d39e990a
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class.
+
+# --hints--
+
+You should remove `display` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display);
+```
+
+You should move `display` with a value of `flex` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex");
+```
+
+You should remove `flex-direction` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection);
+```
+
+You should move `flex-direction` with a value of `column` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column");
+```
+
+You should remove `align-items` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems);
+```
+
+You should move `align-items` with a value of `center` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.building-wrap {
+
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
new file mode 100644
index 0000000000..6df3d6c40c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
@@ -0,0 +1,254 @@
+---
+id: 5d822fd413a79914d39e990b
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it.
+
+# --hints--
+
+You should add `building-wrap` to the `.bb1` element.
+
+```js
+assert.exists(document.querySelector("div.bb1.building-wrap"));
+```
+
+You should add `building-wrap` to the `.bb4` element.
+
+```js
+assert.exists(document.querySelector("div.bb4.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+--fcc-editable-region--
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
new file mode 100644
index 0000000000..ccaa99d42b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e990c
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building.
+
+# --hints--
+
+You should define a new property variable `--window-color4`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4"));
+```
+
+You should give `--window-color4` a value of `#8cb3d9`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
new file mode 100644
index 0000000000..a4de0a094a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
@@ -0,0 +1,255 @@
+---
+id: 5d822fd413a79914d39e990d
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building.
+
+# --hints--
+
+You should add four `div` elements to `.bb4c`.
+
+```js
+assert.equal(document.querySelector(".bb4c")?.children?.length, 4);
+```
+
+You should give each new `div` a class of `bb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
new file mode 100644
index 0000000000..f9c206b5ae
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
@@ -0,0 +1,265 @@
+---
+id: 5d822fd413a79914d39e990e
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`.
+
+# --hints--
+
+You should give `.bb4-window` a `width` of `18%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%");
+```
+
+You should give `.bb4-window` a `height` of `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%");
+```
+
+You should give `.bb4-window` a `background-color` of `--window-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
new file mode 100644
index 0000000000..26d3ed042d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
@@ -0,0 +1,279 @@
+---
+id: 5d822fd413a79914d39e990f
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+
+The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `window-wrap`. Make `.window-wrap` a flexbox container, and use the `align-items` and `justify-content` properties to center its child elements vertically and evenly space them in their parent, respectively.
+
+# --hints--
+
+You should create a `.window-wrap` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap"));
+```
+
+You should give `.window-wrap` a `display` of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex");
+```
+
+You should give `.window-wrap` an `align-items` of `center`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center");
+```
+
+You should give `.window-wrap` a `justify-content` of `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
new file mode 100644
index 0000000000..07de740896
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
@@ -0,0 +1,266 @@
+---
+id: 5d822fd413a79914d39e9910
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Add the new `window-wrap` class to the `.bb4c` element.
+
+# --hints--
+
+You should add a class of `window-wrap` to `.bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4c.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
new file mode 100644
index 0000000000..f229fafb01
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
@@ -0,0 +1,291 @@
+---
+id: 5d822fd413a79914d39e9911
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order.
+
+# --hints--
+
+You should add three `div` elements within `.fb1`.
+
+```js
+assert.equal(document.querySelector("div.fb1")?.children?.length, 3);
+```
+
+You should give the first new `div` a class of `fb1a`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1a"));
+```
+
+You should give the second new `div` a class of `fb1b`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1b"));
+```
+
+You should give the third new `div` a class of `fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1c"));
+```
+
+You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1a + div.fb1b"));
+assert.exists(document.querySelector("div.fb1b + div.fb1c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1"></div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
new file mode 100644
index 0000000000..6ad5fc43f3
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
@@ -0,0 +1,287 @@
+---
+id: 5d822fd413a79914d39e9912
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`.
+
+# --hints--
+
+You should give `.fb1b` a `width` of `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%");
+```
+
+You should give `.fb1b` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%");
+```
+
+You should give `.fb1c` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%");
+```
+
+You should give `.fb1c` a `height` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
new file mode 100644
index 0000000000..ea0469fd67
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
@@ -0,0 +1,280 @@
+---
+id: 5d822fd413a79914d39e9913
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Add the `building-wrap` class to the `.fb1` element to center the sections.
+
+# --hints--
+
+You should add the class `building-wrap` to `.fb1`.
+
+```js
+assert.exists(document.querySelector("div.fb1.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
new file mode 100644
index 0000000000..5b271b0f99
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
@@ -0,0 +1,284 @@
+---
+id: 5d822fd413a79914d39e9914
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Move the `background-color` property and value from `.fb1` to `.fb1b`.
+
+# --hints--
+
+You should remove `background-color` from `.fb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor);
+```
+
+You should add a `background-color` of `--building-color4` to `.fb1b`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
new file mode 100644
index 0000000000..e914af1b32
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
@@ -0,0 +1,391 @@
+---
+id: 5d822fd413a79914d39e9915
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+You don't need the `background-color` for this building anymore so you can remove that property.
+
+# --hints--
+
+You should remove the `background-color` of `.fb5`.
+
+```js
+assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
new file mode 100644
index 0000000000..4f6ab3e002
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
@@ -0,0 +1,297 @@
+---
+id: 5d822fd413a79914d39e9916
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building.
+
+Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`.
+
+# --hints--
+
+You should give `.fb1c` a `background` with a `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient");
+```
+
+You should use a direction of `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should use a first color of `--building-color4` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+You should use a second color of `transparent` from `10%` to `15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(transparent10%,transparent15%\)|transparent10%15%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
new file mode 100644
index 0000000000..aea76037d0
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
@@ -0,0 +1,307 @@
+---
+id: 5d822fd413a79914d39e9917
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+You can add multiple gradients to an element by separating them with a comma (`,`) like this:
+
+```css
+gradient1(
+  colors
+),
+gradient2(
+  colors
+);
+```
+
+Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last.
+
+# --hints--
+
+You should not alter the first `repeating-linear-gradient`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/);
+```
+
+You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+You should use a second color of `--window-color4` from `10%` to `90%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(var\(--window-color4\)10%,var\(--window-color4\)90%\)|var\(--window-color4\)10%90%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    )
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
new file mode 100644
index 0000000000..849d448b9a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
@@ -0,0 +1,298 @@
+---
+id: 5d822fd413a79914d39e9918
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements.
+
+# --hints--
+
+You should give `.fb1a` a `border-bottom`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom);
+```
+
+You should use a `border-bottom` of `7vh solid var(--building-color4)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
new file mode 100644
index 0000000000..089b59b3cf
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
@@ -0,0 +1,301 @@
+---
+id: 5d822fd413a79914d39e9919
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide.
+
+# --hints--
+
+You should give `.fb1a` a `border-left` of `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent");
+```
+
+You should give `.fb1a` a `border-right` of `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+}
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
new file mode 100644
index 0000000000..99fb0d6368
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
@@ -0,0 +1,312 @@
+---
+id: 5d822fd413a79914d39e991a
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order.
+
+# --hints--
+
+You should add two `div` elements within `.fb2`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2);
+```
+
+You should give the first new `div` a class of `fb2a`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2a"));
+assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild);
+```
+
+You should give the second new `div` a class of `fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+--fcc-editable-region--
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
new file mode 100644
index 0000000000..a021e0bafe
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
@@ -0,0 +1,314 @@
+---
+id: 5d822fd413a79914d39e991b
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`.
+
+# --hints--
+
+You should give `.fb2a` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%");
+```
+
+You should give `.fb2b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%");
+```
+
+You should give `.fb2b` a `height` of `75%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b"></div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
new file mode 100644
index 0000000000..f050e5dec8
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
@@ -0,0 +1,317 @@
+---
+id: 5d822fd413a79914d39e991c
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building.
+
+# --hints--
+
+You should add three `div` elements within `.fb2b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3);
+```
+
+You should give the three new `div` elements each a class of `fb2-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
new file mode 100644
index 0000000000..fdeac5d1d1
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
@@ -0,0 +1,315 @@
+---
+id: 5d822fd413a79914d39e991d
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Add your `window-wrap` class to `.fb2b` to position the new window elements.
+
+# --hints--
+
+You should add the class `window-wrap` to `.fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2b.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
new file mode 100644
index 0000000000..32508c44ee
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
@@ -0,0 +1,326 @@
+---
+id: 5d822fd413a79914d39e991e
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable.
+
+# --hints--
+
+You should give the `.fb2-window` elements a `width` of `22%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%");
+```
+
+You should give the `.fb2-window` elements a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%");
+```
+
+You should give the `.fb2-window` elements a `background-color` of `--window-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
new file mode 100644
index 0000000000..51ec85b766
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
@@ -0,0 +1,324 @@
+---
+id: 5d822fd413a79914d39e991f
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container.
+
+# --hints--
+
+You should remove the `background-color` property from `.fb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor);
+```
+
+You should give `.fb2b` a `background-color` of `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
new file mode 100644
index 0000000000..309d57ea7c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
@@ -0,0 +1,330 @@
+---
+id: 5d822fd413a79914d39e9920
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape.
+
+# --hints--
+
+You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)");
+```
+
+You should give `.fb2a` a `border-left` of `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent");
+```
+
+You should give `.fb2a` a `border-right` of `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+--fcc-editable-region--
+.fb2a {
+  width: 100%;
+}
+--fcc-editable-region--
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
new file mode 100644
index 0000000000..0347b2e840
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9921
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two.
+
+# --hints--
+
+You should add four `div` elements within `.fb3`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4);
+```
+
+You should give the first new `div` a class of `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a"));
+```
+
+You should give the second new `div` a class of `fb3b`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b"));
+```
+
+You should give the third new `div` a class of `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a"));
+```
+
+You should give the fourth new `div` a class of `fb3b`.
+
+```js
+assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3"></div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
new file mode 100644
index 0000000000..6d78586a55
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
@@ -0,0 +1,347 @@
+---
+id: 5d822fd413a79914d39e9922
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`.
+
+# --hints--
+
+You should give `.fb3a` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%");
+```
+
+You should give `.fb3a` a `height` of `15%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%");
+```
+
+You should give `.fb3b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%");
+```
+
+You should give `.fb3b` a `height` of `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--  
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
new file mode 100644
index 0000000000..9d484855c3
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9923
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`.
+
+# --hints--
+
+You should remove the `background-color` from `.fb3`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor);
+```
+
+You should give `.fb3a` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+You should give `.fb3b` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
new file mode 100644
index 0000000000..9849c03bbc
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
@@ -0,0 +1,340 @@
+---
+id: 5d822fd413a79914d39e9924
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Add your `building-wrap` class to the `.fb3` element to center the sections.
+
+# --hints--
+
+You should add the class `building-wrap` to `.fb3`.
+
+```js
+assert.exists(document.querySelector("div.fb3.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
new file mode 100644
index 0000000000..777990a363
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
@@ -0,0 +1,346 @@
+---
+id: 5d822fd413a79914d39e9925
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section.
+
+# --hints--
+
+You should add three `div` elements within the first `.fb3a` element.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3);
+```
+
+You should give each new `div` a class of `fb3-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a"></div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
new file mode 100644
index 0000000000..2bdf0e99db
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
@@ -0,0 +1,355 @@
+---
+id: 5d822fd413a79914d39e9926
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value.
+
+# --hints--
+
+You should give `.fb3-window` a `width` of `25%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%");
+```
+
+You should give `.fb3-window` a `height` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%");
+```
+
+You should give `.fb3-window` a `background-color` of `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
new file mode 100644
index 0000000000..98bb84bfe6
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
@@ -0,0 +1,350 @@
+---
+id: 5d822fd413a79914d39e9927
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+Add your `window-wrap` class to the `.fb3a` element to center and space the windows.
+
+# --hints--
+
+You should give `.fb3a` a class of `window-wrap`.
+
+```js
+assert.exists(document.querySelector("div.fb3a.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
new file mode 100644
index 0000000000..ed19c0331b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
@@ -0,0 +1,349 @@
+---
+id: 5d822fd413a79914d39e9928
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+With CSS variables you can change values without searching everywhere in the stylesheet. Change the `--window-color1` value to `#bb99ff`.
+
+# --hints--
+
+You should change the value of `--window-color1` to `#bb99ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
new file mode 100644
index 0000000000..cc5626304a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
@@ -0,0 +1,362 @@
+---
+id: 5d822fd413a79914d39e9929
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Only three more buildings to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now.
+
+# --hints--
+
+You should add two `div` elements within `.fb4`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2);
+```
+
+You should give the first new `div` a class of `fb4a`.
+
+```js
+assert.exists(document.querySelector("div.fb4a"));
+```
+
+You should give the second new `div` a class of `fb4b`.
+
+```js
+assert.exists(document.querySelector("div.fb4b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+--fcc-editable-region--
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
new file mode 100644
index 0000000000..e5fef28c8c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
@@ -0,0 +1,359 @@
+---
+id: 5d822fd413a79914d39e992a
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Give `.fb4b` a `width` of `100%` and `height` of `89%`.
+
+# --hints--
+
+You should give `.fb4b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%");
+```
+
+You should give `.fb4b` a `height` of `89%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
new file mode 100644
index 0000000000..544a93886a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
@@ -0,0 +1,361 @@
+---
+id: 5d822fd413a79914d39e992b
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`.
+
+# --hints--
+
+You should remove the `background-color` from `.fb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor);
+```
+
+You should give `.fb4b` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
new file mode 100644
index 0000000000..ce604acaff
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
@@ -0,0 +1,364 @@
+---
+id: 5d822fd413a79914d39e992c
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`.
+
+# --hints--
+
+You should add six `div` elements within `.fb4b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6);
+```
+
+You should give each new `div` a class of `fb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+--fcc-editable-region--
+        <div class="fb4b"></div>
+--fcc-editable-region--
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
new file mode 100644
index 0000000000..3f062a2400
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992d
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building.
+
+# --hints--
+
+You should give `.fb4-window` a `width` of `30%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%");
+```
+
+You should give `.fb4-window` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%");
+```
+
+You should give `.fb4-window` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
new file mode 100644
index 0000000000..d39b2877ef
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
@@ -0,0 +1,374 @@
+---
+id: 5d822fd413a79914d39e992e
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space.
+
+# --hints--
+
+You should give `.fb4-window` a `background-color` of `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+You should give `.fb4-window` a `margin` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
new file mode 100644
index 0000000000..c006f27898
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992f
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+The windows are stacked on top of each other on the rightmost purple building. Turn the building into a flexbox parent, and use the `flex-wrap` property to put the windows side by side, and push them down to a new row when they don't fit.
+
+# --hints--
+
+You should give `.fb4b` a `display` of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex");
+```
+
+You should give `.fb4b` a `flex-wrap` of `wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
new file mode 100644
index 0000000000..6a95d78f33
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
@@ -0,0 +1,381 @@
+---
+id: 5d822fd413a79914d39e9930
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color.
+
+# --hints--
+
+You should give `.fb4a` a `border-top` of `5vh solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent")
+```
+
+You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
new file mode 100644
index 0000000000..cf534fc4d5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
@@ -0,0 +1,404 @@
+---
+id: 5d822fd413a79914d39e9931
+title: Step 106
+challengeType: 0
+dashedName: step-106
+---
+
+# --description--
+
+You can remove the `background-color` for this building now, since it isn't needed.
+
+# --hints--
+
+You should remove the `background-color` of `.fb6`.
+
+```js
+assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
new file mode 100644
index 0000000000..659058a647
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
@@ -0,0 +1,396 @@
+---
+id: 5d822fd413a79914d39e9932
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`.
+
+# --hints--
+
+You should give `.fb5` a `background` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background);
+```
+
+You should give the `background` a `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient");
+```
+
+You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/);
+```
+
+You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
new file mode 100644
index 0000000000..25ba879145
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9933
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows.
+
+# --hints--
+
+You should give `.fb5` a second `repeating-linear-gradient` in the `background` property.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/);
+```
+
+You should give the second `repeating-linear-gradient` a direction of `90deg`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/);
+```
+
+You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/);
+```
+
+You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    )
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
new file mode 100644
index 0000000000..9d6a5a5b02
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9934
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`.
+
+# --hints--
+
+You should add a `repeating-linear-gradient` to `.fb6` in the `background` property.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient");
+```
+
+You should give the `repeating-linear-gradient` a direction of `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
new file mode 100644
index 0000000000..4f27e41fc9
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9935
+title: Step 105
+challengeType: 0
+dashedName: step-105
+---
+
+# --description--
+
+Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors.
+
+# --hints--
+
+You should give `.fb6` a second `repeating-linear-gradient` in the `background` property.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/);
+```
+
+You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+    90deg,
+    var(--building-color3),
+    var(--building-color3) 10%,
+    transparent 10%,
+    transparent 30%
+  )
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
new file mode 100644
index 0000000000..7bd61afd38
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9936
+title: Step 107
+challengeType: 0
+dashedName: step-107
+---
+
+# --description--
+
+Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together.
+
+# --hints--
+
+You should remove the `border` from the `*` selector.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
new file mode 100644
index 0000000000..029d1e069c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
@@ -0,0 +1,403 @@
+---
+id: 5d822fd413a79914d39e9937
+title: Step 108
+challengeType: 0
+dashedName: step-108
+---
+
+# --description--
+
+Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline.
+
+# --hints--
+
+You should add a class of `sky` to `.background-buildings`.
+
+```js
+assert.exists(document.querySelector("div.background-buildings.sky"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
new file mode 100644
index 0000000000..56759e1359
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
@@ -0,0 +1,421 @@
+---
+id: 5d822fd413a79914d39e9938
+title: Step 109
+challengeType: 0
+dashedName: step-109
+---
+
+# --description--
+
+Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun.
+
+# --hints--
+
+You should give `.sky` a `radial-gradient` in the `background` property.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient");
+```
+
+You should give the `radial-gradient` a first color of `#ffcf33`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/);
+```
+
+You should give the `radial-gradient` a second color of `#ffff66` at `21%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/);
+```
+
+You should give the `radial-gradient` a third color of `#bbeeff` at `100%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
new file mode 100644
index 0000000000..80e000e8b6
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
@@ -0,0 +1,410 @@
+---
+id: 5d822fd413a79914d39e9939
+title: Step 110
+challengeType: 0
+dashedName: step-110
+---
+
+# --description--
+
+At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves.
+
+# --hints--
+
+You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.sky {
+  background: radial-gradient(
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
new file mode 100644
index 0000000000..d2ce95a6e6
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
@@ -0,0 +1,422 @@
+---
+id: 5d822fd413a79914d39e993a
+title: Step 111
+challengeType: 0
+dashedName: step-111
+---
+
+# --description--
+
+In the previous module you learned that media queries can be used to change styles based on certain conditions, and they look like this:
+
+```css
+@media (condition) {
+
+}  
+```
+
+Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less.
+
+# --hints--
+
+You should add an empty media query with `max-width: 1000px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
new file mode 100644
index 0000000000..3d0bf68b6e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
@@ -0,0 +1,424 @@
+---
+id: 5d822fd413a79914d39e993b
+title: Step 112
+challengeType: 0
+dashedName: step-112
+---
+
+# --description--
+
+Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night.
+
+Note: You are going to need to scroll past the editable region to copy the class.
+
+# --hints--
+
+You should not delete the existing `.sky` declaration.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/);
+```
+
+You should copy the existing `.sky` declaration into the media query.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+@media (max-width: 1000px) {
+
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
new file mode 100644
index 0000000000..ce748ba40e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
@@ -0,0 +1,437 @@
+---
+id: 5d822fd413a79914d39e993c
+title: Step 113
+challengeType: 0
+dashedName: step-113
+---
+
+# --description--
+
+In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors.
+
+# --hints--
+
+You should change the first color values from `#ffcf33` to `#ccc`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/);
+```
+
+You should change the second color value from `#ffff66` to `#445`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/);
+```
+
+You should change the third color value from `#bbeeff` to `#223`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+closest-corner circle at 15% 15%,
+#ffcf33,
+#ffcf33 20%,
+#ffff66 21%,
+#bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3),
+var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color4),
+var(--building-color4) 10%,
+transparent 10%,
+transparent 15%
+    ),
+    repeating-linear-gradient(
+var(--building-color4),
+var(--building-color4) 10%,
+var(--window-color4) 10%,
+var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 5%,
+transparent 5%,
+transparent 10%
+    ),
+    repeating-linear-gradient(
+90deg,
+var(--building-color2),
+var(--building-color2) 12%,
+var(--window-color2) 12%,
+var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3) 10%,
+transparent 10%,
+transparent 30%
+    ),
+    repeating-linear-gradient(
+var(--building-color3),
+var(--building-color3) 10%,
+var(--window-color3) 10%,
+var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+  closest-corner circle at 15% 15%,
+  #ffcf33,
+  #ffcf33 20%,
+  #ffff66 21%,
+  #bbeeff 100%
+);
+  }
+--fcc-editable-region--
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
new file mode 100644
index 0000000000..57b5bb2de1
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
@@ -0,0 +1,450 @@
+---
+id: 5d822fd413a79914d39e993d
+title: Step 114
+challengeType: 0
+dashedName: step-114
+---
+
+# --description--
+
+Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there.
+
+# --hints--
+
+You should add a `:root` selector to the media query.
+
+```js
+assert.notDeepEqual(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root"), undefined);
+```
+
+You should add `--building-color1` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000");
+```
+
+You should add `--building-color2` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000");
+```
+
+You should add `--building-color3` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000");
+```
+
+You should add `--building-color4` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
new file mode 100644
index 0000000000..2b670dee03
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
@@ -0,0 +1,862 @@
+---
+id: 5d822fd413a79914d39e993e
+title: Step 115
+challengeType: 0
+dashedName: step-115
+---
+
+# --description--
+
+Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night.
+
+Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great!
+
+# --hints--
+
+You should add `--window-color1` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777");
+```
+
+You should add `--window-color2` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777");
+```
+
+You should add `--window-color3` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777");
+```
+
+You should add `--window-color4` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+  }
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+    --window-color1: #777;
+    --window-color2: #777;
+    --window-color3: #777;
+    --window-color4: #777;
+  }
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
new file mode 100644
index 0000000000..6a1bfc5b2b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
@@ -0,0 +1,65 @@
+---
+id: 619665c9abd72906f3ad30f9
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You will be building a happy Flappy Penguin, and further practicing CSS transforms and animations in the process.
+
+Begin with linking your stylesheet to the page.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.exists(document.querySelector('link'));
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
new file mode 100644
index 0000000000..2572b413a4
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
@@ -0,0 +1,56 @@
+---
+id: 61967e74a8e3690ab6292daa
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`.
+
+# --hints--
+
+You should use the `body` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+You should use the `background` property in the `body` selector.
+
+```js
+assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background'));
+```
+
+You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
new file mode 100644
index 0000000000..67e0a51de0
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
@@ -0,0 +1,53 @@
+---
+id: 61968df2acd5550bf1616c34
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Normalize your page's sizing, by removing the `body` element's `margin` and `padding`.
+
+# --hints--
+
+You should give `body` a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+You should give `body` a `padding` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
new file mode 100644
index 0000000000..ec42f16803
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
@@ -0,0 +1,51 @@
+---
+id: 61968e9243a4090cc805531c
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Remove both the horizontal and vertical scrollbars, using only one property.
+
+# --hints--
+
+You should give `body` an `overflow` of `--fcc-expected--`. But found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
new file mode 100644
index 0000000000..75b3097c34
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
@@ -0,0 +1,64 @@
+---
+id: 61968f8877c6720d6d61aaf5
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within the `body`, add a `div` with a `class` of `ground`.
+
+# --hints--
+
+You should add a new `div`.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+You should give the `div` a `class` of `ground`.
+
+```js
+assert.include(document.querySelector('div')?.className, 'ground');
+```
+
+You should place the `div` within the `body`.
+
+```js
+assert.exists(document.querySelector('body > div.ground'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
new file mode 100644
index 0000000000..2e20bd3589
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
@@ -0,0 +1,66 @@
+---
+id: 619691693bc14b0e528f5a20
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`.
+
+# --hints--
+
+You should use the `.ground` selector.
+
+```js
+assert.match(code, /\.ground\s*\{/);
+```
+
+You should give the `.ground` element a `width` of `100vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw');
+```
+
+You should give the `.ground` element a `height` of `400px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
new file mode 100644
index 0000000000..afa5d6f94b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
@@ -0,0 +1,58 @@
+---
+id: 6196928658b6010f28c39484
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`.
+
+# --hints--
+
+You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
new file mode 100644
index 0000000000..606e749c43
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
@@ -0,0 +1,73 @@
+---
+id: 619692ff79f5770fc6d8c0b4
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin.
+
+# --hints--
+
+You should add a new `div` within the `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 2);
+```
+
+You should give the `div` a `class` of `penguin`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin');
+```
+
+You should place `div.penguin` before `div.ground`.
+
+```js
+assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
new file mode 100644
index 0000000000..46ebd08c10
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
@@ -0,0 +1,75 @@
+---
+id: 6196990f966e8f10a40094f6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Target the `.penguin` element, and set its `width` and `height` to `300px`.
+
+# --hints--
+
+You should use the `.penguin` selector.
+
+```js
+assert.match(code, /\.penguin\s*\{/);
+```
+
+You should give `.penguin` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
+```
+
+You should give `.penguin` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
new file mode 100644
index 0000000000..860cde3323
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
@@ -0,0 +1,74 @@
+---
+id: 619699c10a0f6e11591d73c4
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`.
+
+# --hints--
+
+You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto');
+```
+
+You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
new file mode 100644
index 0000000000..3fa5992f53
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
@@ -0,0 +1,83 @@
+---
+id: 61969aa6acef5b12200f672e
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To create some scenery in the background, you will add two mountains.
+
+Above the `.penguin` element, add a `div` with a `class` of `left-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `left-mountain`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain');
+```
+
+You should place `.left-mountain` before `.penguin`.
+
+```js
+assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
new file mode 100644
index 0000000000..3568d09eeb
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
@@ -0,0 +1,89 @@
+---
+id: 61969c487ced6f12db8fef94
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`.
+
+# --hints--
+
+You should use the `.left-mountain` selector.
+
+```js
+assert.match(code, /\.left-mountain\s*\{/);
+```
+
+You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
+```
+
+You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
+```
+
+You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
new file mode 100644
index 0000000000..e8eba6e4ec
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
@@ -0,0 +1,76 @@
+---
+id: 61969d66cfcdba137d021558
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
new file mode 100644
index 0000000000..a182060c6c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
@@ -0,0 +1,91 @@
+---
+id: 61969e7451455614217e901b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by.
+
+Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis.
+
+# --hints--
+
+You should give `.left-mountain` a `transform` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
+```
+
+You should use the `skew` function on `transform`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
+```
+
+You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
new file mode 100644
index 0000000000..dc15f9983e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
@@ -0,0 +1,90 @@
+---
+id: 6196adc17f77a714d51485f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Set the stack level of the mountain element such that it remains directly behind the `.ground` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+You should not change the `z-index` of the `.ground` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
new file mode 100644
index 0000000000..870ce25dc1
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
@@ -0,0 +1,86 @@
+---
+id: 6196aead7ac7bf1584b17a7f
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`.
+
+# --hints--
+
+You should give `.left-mountain` a `margin-top` of `100px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px');
+```
+
+You should give `.ground` a `margin-top` of `-58px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
new file mode 100644
index 0000000000..b6ddd5cad7
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
@@ -0,0 +1,92 @@
+---
+id: 6196ce0415498d2463989e84
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 4);
+```
+
+You should give the `div` a `class` of `back-mountain`.
+
+```js
+assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain');
+```
+
+You should place `.back-mountain` after `.left-mountain`.
+
+```js
+assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
new file mode 100644
index 0000000000..bcbe4d3e9d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
@@ -0,0 +1,100 @@
+---
+id: 6196cee94c6da1253809dff9
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`.
+
+# --hints--
+
+You should use the `.back-mountain` selector.
+
+```js
+assert.match(code, /\.back-mountain\s*\{/);
+```
+
+You should give `.back-mountain` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px');
+```
+
+You should give `.back-mountain` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px');
+```
+
+You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
new file mode 100644
index 0000000000..4bb9ea8634
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
@@ -0,0 +1,87 @@
+---
+id: 6196d00a5d7292262bc02f4c
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.back-mountain` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
new file mode 100644
index 0000000000..d3fd004502
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
@@ -0,0 +1,100 @@
+---
+id: 6196d0cda039d026f7f78d1e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1');
+```
+
+You should not change the `z-index` of the `.left-mountain` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
new file mode 100644
index 0000000000..cdd348db03
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
@@ -0,0 +1,131 @@
+---
+id: 6196d1ac33c68d27dcda5796
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`.
+
+# --hints--
+
+You should use the `transform` property to rotate the element.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.notEmpty(backMountain?.transform);
+} else {
+  assert.notEmpty(backMountain?.rotate);
+}
+```
+
+You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.equal(backMountain?.transform, 'rotate(45deg)');
+} else {
+  assert.equal(backMountain?.rotate, '45deg');
+}
+```
+
+You should give `.back-mountain` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
+```
+
+You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
+```
+
+You should give `.back-mountain` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
+```
+
+You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
new file mode 100644
index 0000000000..151831dbd7
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
@@ -0,0 +1,104 @@
+---
+id: 6196d213d99f16287bff22ae
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`.
+
+# --hints--
+
+You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 5);
+```
+
+You should give the new `div` element a `class` of `sun`.
+
+```js
+assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun');
+```
+
+You should place the new `div` element immediately after the `.back-mountain` element.
+
+```js
+assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
new file mode 100644
index 0000000000..61cf99cfee
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
@@ -0,0 +1,112 @@
+---
+id: 6196d2c0f22ca0293107c048
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`.
+
+# --hints--
+
+You should use the `.sun` selector.
+
+```js
+assert.match(code, /\.sun\s*\{/);
+```
+
+You should give `.sun` a `width` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px');
+```
+
+You should give `.sun` a `height` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px');
+```
+
+You should give `.sun` a `background-color` of `yellow`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
new file mode 100644
index 0000000000..f924e1d525
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
@@ -0,0 +1,105 @@
+---
+id: 6196d32d1340d829f0f6f57d
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle.
+
+# --hints--
+
+You should give `.sun` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute');
+```
+
+You should give `.sun` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
new file mode 100644
index 0000000000..969618185d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
@@ -0,0 +1,107 @@
+---
+id: 6196d41d40bf9b2aaea5d520
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen.
+
+# --hints--
+
+You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px');
+```
+
+You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
new file mode 100644
index 0000000000..1253455f06
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
@@ -0,0 +1,118 @@
+---
+id: 6197cff995d03905b0cca8ad
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Your penguin will consist of two main sections: the head, and the body.
+
+Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`.
+
+# --hints--
+
+You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `penguin-head`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head');
+```
+
+You should give the second `div` a `class` of `penguin-body`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+--fcc-editable-region--
+    <div class="penguin">
+
+    </div>
+--fcc-editable-region--
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
new file mode 100644
index 0000000000..5256d40e7d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
@@ -0,0 +1,125 @@
+---
+id: 6197f40a16afea068c7e60c8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex);
+```
+
+You should give the `.penguin` element a `z-index` of `4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4');
+```
+
+You should give `.penguin` a `position` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position);
+```
+
+You should give `.penguin` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
new file mode 100644
index 0000000000..c34e5dc0b5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
@@ -0,0 +1,65 @@
+---
+id: 6197f667297bb30a552ce017
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`.
+
+# --hints--
+
+You should give `.ground` a `z-index` of `3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+You should give `.ground` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
new file mode 100644
index 0000000000..4f42960c10
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
@@ -0,0 +1,128 @@
+---
+id: 61993b72e874e709b8dfd666
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`.
+
+# --hints--
+
+You should use the `.penguin-head` selector.
+
+```js
+assert.match(code, /\.penguin-head\s*\{/);
+```
+
+You should give `.penguin-head` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%');
+```
+
+You should give `.penguin-head` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`.
+
+```js
+assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
new file mode 100644
index 0000000000..837b66e7b8
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
@@ -0,0 +1,122 @@
+---
+id: 61993cf26a8e0f0a553db223
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+_Most_ penguins do not have a square head.
+
+Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`.
+
+# --hints--
+
+You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`.
+
+```js
+// Maybe check for individual border-radius properties?
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
new file mode 100644
index 0000000000..42992c942d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
@@ -0,0 +1,139 @@
+---
+id: 61993dbb35adf30b10d49e38
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.
+
+# --hints--
+
+You should use the `.penguin-body` selector.
+
+```js
+assert.match(code, /\.penguin-body\s*\{/);
+```
+
+You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
+```
+
+You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
+```
+
+You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
new file mode 100644
index 0000000000..1304f820e2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
@@ -0,0 +1,133 @@
+---
+id: 61993e9adc9e9a0bb4d28fff
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Another interesting fact about penguins is that they do not have square bodies.
+
+Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body.
+
+# --hints--
+
+You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
new file mode 100644
index 0000000000..177fa37ed7
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
@@ -0,0 +1,139 @@
+---
+id: 6199409834ccaf0d10736596
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`.
+
+# --hints--
+
+You should use the `.penguin *` selector.
+
+```js
+assert.match(code, /\.penguin\s*\*\s*\{/);
+```
+
+You should give `.penguin *` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
new file mode 100644
index 0000000000..39d2becaa7
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
@@ -0,0 +1,154 @@
+---
+id: 6199429802b7c10dc79ff871
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-head` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
+```
+
+You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
+```
+
+You should give `.penguin-head` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
+```
+
+You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
new file mode 100644
index 0000000000..06adbcbaed
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
@@ -0,0 +1,156 @@
+---
+id: 619943285a41720e6370d985
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top);
+```
+
+You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%');
+```
+
+You should give `.penguin-body` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left);
+```
+
+You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
new file mode 100644
index 0000000000..841e0fac70
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
@@ -0,0 +1,146 @@
+---
+id: 619943876b706d0f35c01dbc
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex);
+```
+
+You should give the `.penguin-head` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
new file mode 100644
index 0000000000..71620d485d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
@@ -0,0 +1,148 @@
+---
+id: 6199442866286d0ff421a4fc
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string.
+
+# --hints--
+
+You should use the `.penguin-body::before` selector.
+
+```js
+assert.match(code, /\.penguin-body::before\s*\{/);
+```
+
+You should give `.penguin-body::before` a `content` of `""`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
new file mode 100644
index 0000000000..95939a0a79
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
@@ -0,0 +1,145 @@
+---
+id: 619bcf239fc15905ecd66fce
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Position the pseudo-element relative to its closest positioned ancestor.
+
+# --hints--
+
+You should give `.penguin-body::before` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
new file mode 100644
index 0000000000..144a263043
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
@@ -0,0 +1,158 @@
+---
+id: 619be73b3c806006ccc00bb0
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`.
+
+# --hints--
+
+You should give `.penguin-body::before` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
+```
+
+You should give `.penguin-body::before` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%');
+```
+
+You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
new file mode 100644
index 0000000000..32e8d7967e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Position the pseudo-element `10%` from the top and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
new file mode 100644
index 0000000000..f22f0e3944
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
@@ -0,0 +1,160 @@
+---
+id: 619be80062551a080e32c821
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`.
+
+# --hints--
+
+You should use the `border-radius` property to round off the crest.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
+```
+
+You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
new file mode 100644
index 0000000000..1c9a12db86
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
@@ -0,0 +1,152 @@
+---
+id: 619be8ce4ea49008c5bfbc30
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Increase the pseudo-element's transparency by `30%`.
+
+# --hints--
+
+You should give `.penguin-body::before` an `opacity` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
new file mode 100644
index 0000000000..088e47ba55
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
@@ -0,0 +1,166 @@
+---
+id: 619be946958c6009844f1dee
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`.
+
+# --hints--
+
+You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
+```
+
+You should give the second `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
new file mode 100644
index 0000000000..e25cfd80ce
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
@@ -0,0 +1,193 @@
+---
+id: 619c155df0063a0a3fec0e32
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`.
+
+# --hints--
+
+You should use the `.face` selector.
+
+```js
+assert.match(code, /\.face\s*\{/);
+```
+
+You should give `.face` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
+```
+
+You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
+```
+
+You should give `.face` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
+```
+
+You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
+```
+
+You should give `.face` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
+```
+
+You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
new file mode 100644
index 0000000000..999faf2cd7
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
@@ -0,0 +1,165 @@
+---
+id: 619c16debd0c270b01c5ce38
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`.
+
+# --hints--
+
+You should give `.face` a `border-radius` of `70% 70% 60% 60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
new file mode 100644
index 0000000000..1204286781
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
@@ -0,0 +1,169 @@
+---
+id: 619cfdf2e63ddf05feab86ad
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Position the `.face` elements so that they are `15%` from the top.
+
+# --hints--
+
+You should give `.face` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top);
+```
+
+You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
new file mode 100644
index 0000000000..3529e08289
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
@@ -0,0 +1,171 @@
+---
+id: 619d019488f98c06acbbb71a
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Currently, the two `.face` elements are on top of each other.
+
+Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element.
+
+# --hints--
+
+You should give a `class` of `left` to the first `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left');
+```
+
+You should give a `class` of `right` to the second `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
new file mode 100644
index 0000000000..cdb0268e02
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
@@ -0,0 +1,177 @@
+---
+id: 619d022dc8400c0763829a17
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Target the `.face` element with the `left` class, and position it `5%` left of its parent.
+
+# --hints--
+
+You should use the `.face.left` selector.
+
+```js
+assert.match(code, /\.face\.left\s*\{/);
+```
+
+You should give `.face.left` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left);
+```
+
+You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
new file mode 100644
index 0000000000..c81e359b35
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
@@ -0,0 +1,181 @@
+---
+id: 619d02c7bc95bf0827a5d296
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Target the `.face` element with the `right` class, and position it `5%` right of its parent.
+
+# --hints--
+
+You should use the `.face.right` selector.
+
+```js
+assert.match(code, /\.face\.right\s*\{/);
+```
+
+You should give `.face.right` a `right` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
+```
+
+You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+.face.left {
+  left: 5%;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
new file mode 100644
index 0000000000..7101cc6218
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
@@ -0,0 +1,184 @@
+---
+id: 619d033915012509031f309a
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Below the `.face.right` element, add a `div` element with a `class` of `chin`.
+
+# --hints--
+
+You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `chin`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.chin'));
+```
+
+You should place the `div` element below the `.face.right` element.
+
+```js
+assert.exists(document.querySelector('.face.right + .chin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
new file mode 100644
index 0000000000..8ff7447615
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
@@ -0,0 +1,210 @@
+---
+id: 619d03dadadb6509a16f4f5f
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`.
+
+# --hints--
+
+You should use the `.chin` selector.
+
+```js
+assert.match(code, /\.chin\s*\{/);
+```
+
+You should give `.chin` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width);
+```
+
+You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%');
+```
+
+You should give `.chin` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height);
+```
+
+You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%');
+```
+
+You should give `.chin` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor);
+```
+
+You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
new file mode 100644
index 0000000000..9177d13254
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
@@ -0,0 +1,206 @@
+---
+id: 619d0503e03a790a4179d463
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`.
+
+# --hints--
+
+You should give `.chin` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top);
+```
+
+You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%');
+```
+
+You should give `.chin` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left);
+```
+
+You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%');
+```
+
+You should give `.chin` a `border-radius` of `70% 70% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
new file mode 100644
index 0000000000..ca096090f1
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
@@ -0,0 +1,197 @@
+---
+id: 619d05c54dabca0b10058235
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+So far, the `.face` and `.chin` elements have the same `background-color`.
+
+Create a custom CSS property called `--penguin-face`, and set it to `white`.
+
+# --hints--
+
+You should use the `:root` selector.
+
+```js
+assert.match(code, /:root\s*\{/);
+```
+
+You should give `:root` a `--penguin-face` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face'));
+```
+
+You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
new file mode 100644
index 0000000000..207c0664d1
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
@@ -0,0 +1,197 @@
+---
+id: 619d0882f54bf40bdc4671ed
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Where relevant, replace property values with your `--penguin-face` variable.
+
+# --hints--
+
+You should give `.face` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should give `.chin` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should not use `var(--penguin-face)` in the `.penguin-body` selector.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
new file mode 100644
index 0000000000..a7caac10b5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
@@ -0,0 +1,222 @@
+---
+id: 619d090cd8d6db0c93dc5087
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5);
+```
+
+You should give the first new `div` a `class` of `eye`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye'));
+```
+
+You should give the second new `div` a `class` of `eye`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.right'));
+```
+
+You should place `div.eye.left` after `div.chin`.
+
+```js
+assert.exists(document.querySelector('.chin + .eye.left'));
+```
+
+You should place `div.eye.right` after `div.eye.left`.
+
+```js
+assert.exists(document.querySelector('.eye.left + .eye.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
new file mode 100644
index 0000000000..e2f3ce9e93
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
@@ -0,0 +1,207 @@
+---
+id: 619d0b51ca42ed0d74582186
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`.
+
+# --hints--
+
+You should use the `.eye` selector.
+
+```js
+assert.match(code, /\.eye\s*\{/);
+```
+
+You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%');
+```
+
+You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%');
+```
+
+You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
new file mode 100644
index 0000000000..a4e7d18c12
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
@@ -0,0 +1,200 @@
+---
+id: 619d0bc9cb05360e1bf549c3
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%');
+```
+
+You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
new file mode 100644
index 0000000000..b567a24805
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
@@ -0,0 +1,215 @@
+---
+id: 619d0c1594c38c0ebae75878
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent.
+
+# --hints--
+
+You should use the `.eye.left` selector.
+
+```js
+assert.match(code, /\.eye\.left\s*\{/);
+```
+
+You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%');
+```
+
+You should use the `.eye.right` selector.
+
+```js
+assert.match(code, /\.eye\.right\s*\{/);
+```
+
+You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
new file mode 100644
index 0000000000..2d324e7251
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
@@ -0,0 +1,225 @@
+---
+id: 619d0d18ca99870f884a7bff
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Within each `.eye` element, add a `div` with a `class` of `eye-lid`.
+
+# --hints--
+
+You should add one `div` element within `.eye.left`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
+```
+
+You should add one `div` element within `.eye.right`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
+```
+
+You should give the first new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.left > div.eye-lid'));
+```
+
+You should give the second new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.right > div.eye-lid'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+
+        </div>
+        <div class="eye right">
+
+        </div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
new file mode 100644
index 0000000000..224cfce88b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
@@ -0,0 +1,227 @@
+---
+id: 619d0daf214542102739b0da
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`.
+
+# --hints--
+
+You should use the `.eye-lid` selector.
+
+```js
+assert.match(code, /\.eye-lid\s*\{/);
+```
+
+You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%');
+```
+
+You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%');
+```
+
+You should give `.eye-lid` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
new file mode 100644
index 0000000000..e779df5c2d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
@@ -0,0 +1,226 @@
+---
+id: 619d0e56f9ca9710fcb974e3
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%');
+```
+
+You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%');
+```
+
+You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
new file mode 100644
index 0000000000..ed405abe92
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
@@ -0,0 +1,247 @@
+---
+id: 619d0eec0ac40611b41e2ccc
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7);
+```
+
+You should give the first new `div` a `class` of `blush`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush'));
+```
+
+You should give the second new `div` a `class` of `blush`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.right'));
+```
+
+You should place `.blush.right` after `.blush.left`.
+
+```js
+assert.exists(document.querySelector('.blush.left + .blush.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
new file mode 100644
index 0000000000..a346767374
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
@@ -0,0 +1,238 @@
+---
+id: 619d0fc9825c271253df28d4
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`.
+
+# --hints--
+
+You should use the `.blush` selector.
+
+```js
+assert.match(code, /\.blush\s*\{/);
+```
+
+You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%');
+```
+
+You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%');
+```
+
+You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
new file mode 100644
index 0000000000..78310b8e23
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
@@ -0,0 +1,231 @@
+---
+id: 619d102d786c3d13124c37c6
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%');
+```
+
+You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
new file mode 100644
index 0000000000..9431c4764e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
@@ -0,0 +1,246 @@
+---
+id: 619d107edf7ddf13cc77106a
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent.
+
+# --hints--
+
+You should use the `.blush.left` selector.
+
+```js
+assert.match(code, /\.blush\.left\s*\{/);
+```
+
+You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%');
+```
+
+You should use the `.blush.right` selector.
+
+```js
+assert.match(code, /\.blush\.right\s*\{/);
+```
+
+You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
new file mode 100644
index 0000000000..39348186b5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
@@ -0,0 +1,271 @@
+---
+id: 619d10cc98145f14820399c5
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9);
+```
+
+You should give the first new `div` a `class` of `beak`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak'));
+```
+
+You should give the second new `div` a `class` of `beak`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `top`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.top'));
+```
+
+You should give the second new `div` a `class` of `bottom`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.bottom'));
+```
+
+You should place `div.beak.top` after `div.blush.right`.
+
+```js
+assert.exists(document.querySelector('.blush.right + .beak.top'));
+```
+
+You should place `div.beak.bottom` after `div.beak.top`.
+
+```js
+assert.exists(document.querySelector('.beak.top + .beak.bottom'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
new file mode 100644
index 0000000000..ea381856af
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
@@ -0,0 +1,256 @@
+---
+id: 619d115e2adcd71538e82ebb
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should use the `.beak` selector.
+
+```js
+assert.match(code, /\.beak\s*\{/);
+```
+
+You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%');
+```
+
+You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange');
+```
+
+You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
new file mode 100644
index 0000000000..d1617d8dce
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
@@ -0,0 +1,262 @@
+---
+id: 619d11e6d5ef9515d2a16033
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent.
+
+# --hints--
+
+You should use the `.beak.top` selector.
+
+```js
+assert.match(code, /\.beak\.top\s*\{/);
+```
+
+You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%');
+```
+
+You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%');
+```
+
+You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
new file mode 100644
index 0000000000..e580633578
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
@@ -0,0 +1,267 @@
+---
+id: 619d129a417d0716a94de913
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`.
+
+# --hints--
+
+You should use the `.beak.bottom` selector.
+
+```js
+assert.match(code, /\.beak\.bottom\s*\{/);
+```
+
+You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%');
+```
+
+You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%');
+```
+
+You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
new file mode 100644
index 0000000000..4773a10cef
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
@@ -0,0 +1,267 @@
+---
+id: 619d1340361095175f4b5115
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element.
+
+# --hints--
+
+You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
+```
+
+You should give the new `div` a `class` of `shirt`.
+
+```js
+assert.exists(document.querySelector('.penguin > div.shirt'));
+```
+
+You should place the new `div` before `.penguin-body`.
+
+```js
+assert.exists(document.querySelector('.shirt + .penguin-body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
new file mode 100644
index 0000000000..ff117fcdd8
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
@@ -0,0 +1,263 @@
+---
+id: 619d15797b580c1828b05426
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Within the `.shirt` element, add a `div` with the following emoji as content: 💜
+
+# --hints--
+
+You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
+```
+
+You should give the new `div` a content of `💜`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > div')?.textContent, '💜');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
new file mode 100644
index 0000000000..b0330c317b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
@@ -0,0 +1,264 @@
+---
+id: 619d15d955d9d418c4487bbc
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS`
+
+# --hints--
+
+You should add one `p` element within `.shirt`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > p')?.length, 1);
+```
+
+You should give the `p` element the content `I CSS`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+        <div>💜</div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
new file mode 100644
index 0000000000..2ca7d6a5d8
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
@@ -0,0 +1,278 @@
+---
+id: 619d1629a8adc61960ca8b40
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`.
+
+# --hints--
+
+You should use the `.shirt` selector.
+
+```js
+assert.match(code, /\.shirt\s*\{/);
+```
+
+You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px');
+```
+
+You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif');
+```
+
+You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
new file mode 100644
index 0000000000..c21bb0f24d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
@@ -0,0 +1,272 @@
+---
+id: 619d1c5fc9f8941a400955da
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+In some browsers, the _heart_ emoji may look slightly different from the previous step. This is because some of the character's properties were overridden by the `font-weight` style of `bold`.
+
+Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value.
+
+# --hints--
+
+You should use the `.shirt div` selector to target the `div` with the heart emoji.
+
+```js
+assert.match(code, /\.shirt div\s*\{/);
+```
+
+You should give the `.shirt div` a `font-weight` of `initial` or `normal`.
+
+```js
+assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
new file mode 100644
index 0000000000..79b1e394fb
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
@@ -0,0 +1,273 @@
+---
+id: 619d1dab9ff3421ae1976991
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent.
+
+# --hints--
+
+You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px');
+```
+
+You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+.shirt div {
+  font-weight: initial;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
new file mode 100644
index 0000000000..0c23ce14f1
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
@@ -0,0 +1,281 @@
+---
+id: 619d1deb8b04811b8839ffe4
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element.
+
+# --hints--
+
+You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px');
+```
+
+You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px');
+```
+
+You should give the `.shirt` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
new file mode 100644
index 0000000000..e650139f7e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
@@ -0,0 +1,272 @@
+---
+id: 619d1e7a8e81a61c5a819dc4
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+For the shirt's final touch, set the `color` to `#6a6969`.
+
+# --hints--
+
+You should give `.shirt` a `color` of `#6a6969`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
new file mode 100644
index 0000000000..a3dc1fdbf5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
@@ -0,0 +1,306 @@
+---
+id: 619d1ed33c9a071cf657a0d6
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Fun fact: Penguins cannot stand without at least two feet.
+
+Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `foot`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot'));
+```
+
+You should give the second new `div` a `class` of `foot`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.right'));
+```
+
+You should place `.foot.right` after `.foot.left`.
+
+```js
+assert.exists(document.querySelector('.foot.left + .foot.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
new file mode 100644
index 0000000000..f685b84cb6
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
@@ -0,0 +1,295 @@
+---
+id: 619d1fb5d244c31db8a7fdb7
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`.
+
+# --hints--
+
+You should use the `.foot` selector.
+
+```js
+assert.match(code, /\.foot\s*\{/);
+```
+
+You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%');
+```
+
+You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%');
+```
+
+You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
new file mode 100644
index 0000000000..e26cf4e13a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
@@ -0,0 +1,288 @@
+---
+id: 619d204bd73ae51e743b8e94
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%');
+```
+
+You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
new file mode 100644
index 0000000000..b4d5cd859d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
@@ -0,0 +1,304 @@
+---
+id: 619d20b12996101f430920fb
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+The penguin's beak and feet share the same `color`.
+
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-picorna` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna'));
+```
+
+You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange');
+```
+
+You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+  top: 85%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
new file mode 100644
index 0000000000..d2083801b8
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
@@ -0,0 +1,304 @@
+---
+id: 619d21fe6a3f9b2016be9d9d
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent.
+
+# --hints--
+
+You should use the `.foot.left` selector.
+
+```js
+assert.match(code, /\.foot\.left\s*\{/);
+```
+
+You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%');
+```
+
+You should use the `.foot.right` selector.
+
+```js
+assert.match(code, /\.foot\.right\s*\{/);
+```
+
+You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
new file mode 100644
index 0000000000..003b9709c0
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
@@ -0,0 +1,312 @@
+---
+id: 619d229b0e542520cd91c685
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`.
+
+# --hints--
+
+You should give `.foot.left` a `transform` of `rotate(80deg)`.
+
+```js
+const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left');
+
+if (leftFoot?.transform) {
+  assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)');
+} else {
+  assert.equal(leftFoot.getPropVal('rotate', true), '80deg');
+}
+```
+
+You should give `.foot.right` a `transform` of `rotate(-80deg)`.
+
+```js
+const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right');
+
+if (rightFoot?.transform) {
+  assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)');
+} else {
+  assert.equal(rightFoot.getPropVal('rotate', true), '-80deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.foot.left {
+  left: 25%;
+
+}
+
+.foot.right {
+  right: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
new file mode 100644
index 0000000000..ef45038dbc
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
@@ -0,0 +1,295 @@
+---
+id: 619d23089e787e216a7043d6
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element.
+
+# --hints--
+
+You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
new file mode 100644
index 0000000000..906076ce8b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
@@ -0,0 +1,328 @@
+---
+id: 619d237a107c10221ed743fa
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Fun fact: Penguins cannot fly without wings.
+
+Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4);
+```
+
+You should give the first new `div` a `class` of `arm`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm'));
+```
+
+You should give the second new `div` a `class` of `arm`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.right'));
+```
+
+You should place `.arm.right` after `.arm.left`.
+
+```js
+assert.exists(document.querySelector('.arm.left + .arm.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
new file mode 100644
index 0000000000..94dcb78521
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
@@ -0,0 +1,317 @@
+---
+id: 619d26b12e651022d80cd017
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`.
+
+# --hints--
+
+You should use the `.arm` selector.
+
+```js
+assert.match(code, /\.arm\s*\{/);
+```
+
+You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%');
+```
+
+You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
+
+```js
+assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
new file mode 100644
index 0000000000..a3333bcfba
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
@@ -0,0 +1,332 @@
+---
+id: 619d2712853306238f41828e
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-skin` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin'));
+```
+
+You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))');
+```
+
+You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    gray,
+    rgb(209, 210, 199)
+  );
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
new file mode 100644
index 0000000000..b897e4cc61
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
@@ -0,0 +1,340 @@
+---
+id: 619d2b7a84e78b246f2d17a2
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent.
+
+# --hints--
+
+You should use the `.arm.left` selector.
+
+```js
+assert.match(code, /\.arm\.left\s*\{/);
+```
+
+You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%');
+```
+
+You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%');
+```
+
+You should use the `.arm.right` selector.
+
+```js
+assert.match(code, /\.arm\.right\s*\{/);
+```
+
+You should give `.arm.right` a `top` of `0%`.
+
+```js
+assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top);
+```
+
+You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
new file mode 100644
index 0000000000..a677c9a443
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
@@ -0,0 +1,325 @@
+---
+id: 619d2bd9c1d43c2526e96f1f
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent.
+
+# --hints--
+
+You should use the `transform-origin` property to do this.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`.
+
+```js
+assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
new file mode 100644
index 0000000000..ce148c7f62
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
@@ -0,0 +1,326 @@
+---
+id: 619d2d4e80400325ff89664a
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis.
+
+# --hints--
+
+You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left');
+
+if (leftArm?.rotate && leftArm?.transform) {
+  assert.equal(leftArm.getPropVal('rotate', true), '130deg');
+  assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)');
+} else {
+  assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
new file mode 100644
index 0000000000..7b8d308ed3
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
@@ -0,0 +1,326 @@
+---
+id: 619d2ebc81ba81271460850d
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+Rotate the right arm by `45deg` counterclockwise.
+
+# --hints--
+
+You should give `.arm.right` a `transform` of `rotate(-45deg)`.
+
+```js
+const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right');
+
+if (rightArm?.transform) {
+  assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)');
+} else {
+  assert.equal(rightArm?.getPropVal('rotate', true), '-45deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+--fcc-editable-region--
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
new file mode 100644
index 0000000000..cb6dc37d62
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
@@ -0,0 +1,327 @@
+---
+id: 619d2f0e9440bc27caee1cec
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Fun fact: Most, if not all, flippers are not naturally rectangles.
+
+Give the `.arm` elements' top-left, top-right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`.
+
+# --hints--
+
+You should give `.arm` a `border-radius` of `30% 30% 30% 120%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
new file mode 100644
index 0000000000..81854db2b7
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
@@ -0,0 +1,323 @@
+---
+id: 619d2fd3ff4f772882e3d998
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element.
+
+# --hints--
+
+You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
new file mode 100644
index 0000000000..f11d2a97f4
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
@@ -0,0 +1,333 @@
+---
+id: 619d30350883802921bfcccc
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Now, you are going to use CSS animations to make the penguin wave.
+
+Define a new `@keyframes` named `wave`.
+
+# --hints--
+
+You should define a new `@keyframes` rule.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes'));
+```
+
+You should give the `@keyframes` rule a name of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
new file mode 100644
index 0000000000..3294c31569
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
@@ -0,0 +1,351 @@
+---
+id: 619d324f5915c929f36ae91d
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Give `wave` four waypoints starting at `10%`, and incrementing by `10%`.
+
+# --hints--
+
+You should add a `10%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
+```
+
+You should add a `20%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
+```
+
+You should add a `30%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
+```
+
+You should add a `40%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
+```
+
+You should have 4 waypoints in your keyframe.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
new file mode 100644
index 0000000000..74235426b5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
@@ -0,0 +1,347 @@
+---
+id: 619d32c7fa21f32aaa91d499
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%');
+const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, '');
+const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
new file mode 100644
index 0000000000..ac97b33ea2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
@@ -0,0 +1,347 @@
+---
+id: 619d333b738e3c2b5d58b095
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%');
+const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
new file mode 100644
index 0000000000..fd1c9193d0
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
@@ -0,0 +1,362 @@
+---
+id: 619d337765b9f02c10e93722
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+For the third and fourth waypoints, repeat the `transform` pattern once more.
+
+# --hints--
+
+You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%');
+const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%');
+const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
new file mode 100644
index 0000000000..caa7a1fe0a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
@@ -0,0 +1,357 @@
+---
+id: 619d33c51140292cc5a21742
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function.
+
+# --hints--
+
+You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave');
+```
+
+You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s');
+```
+
+You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite');
+```
+
+You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
new file mode 100644
index 0000000000..e8ab0952d4
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
@@ -0,0 +1,347 @@
+---
+id: 619d3482f505452d861d0f62
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions.
+
+# --hints--
+
+You should use the `.penguin:active` selector.
+
+```js
+assert.match(code, /\.penguin:active\s*\{/);
+```
+
+You should give `.penguin:active` a `transform` of `scale(1.5)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
new file mode 100644
index 0000000000..3530454295
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
@@ -0,0 +1,346 @@
+---
+id: 619d3561a951bf2e41a24f10
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+When you activate the `.penguin` element, it might look as though you can drag it around. This is not true.
+
+Indicate this to users, by giving the active element a `cursor` property of `not-allowed`.
+
+# --hints--
+
+You should give `.penguin:active` a `cursor` property of `not-allowed`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin:active {
+  transform: scale(1.5);
+
+}
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
new file mode 100644
index 0000000000..b2fd620c1f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
@@ -0,0 +1,357 @@
+---
+id: 619d36103839c82efa95dd34
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`.
+
+# --hints--
+
+You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s');
+```
+
+You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out');
+```
+
+You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+
+}
+--fcc-editable-region--
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
new file mode 100644
index 0000000000..18d3c26b52
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
@@ -0,0 +1,670 @@
+---
+id: 619d3711d04d623000013e9e
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element.
+
+Congratulations! You have completed the Flappy Penguin Workshop.
+
+# --hints--
+
+You should give `.ground` a `height` of `calc(100vh - 300px)`.
+
+```js
+assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: calc(100vh - 300px);
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
new file mode 100644
index 0000000000..9d306c557a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Normalize your page, by setting the `width` to `100%`, and `height` to `100vh`.
+
+# --hints--
+
+You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
new file mode 100644
index 0000000000..2de5a239c2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
@@ -0,0 +1,43 @@
+---
+id: 61537bb9b1a29430ac15ad38
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Start this project by linking your `styles.css` file to the page.
+
+# --hints--
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
new file mode 100644
index 0000000000..ae7572fa05
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
@@ -0,0 +1,62 @@
+---
+id: 61537c5f81f0cf325b4a854c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Add a `header` element within the `body` element and assign a class of `header` to it.
+
+Inside the `header`, create an `h1` with `css flexbox photo gallery` as the text.
+
+# --hints--
+
+You should have a `header` element within your `body` element.
+
+```js
+assert.exists(document.querySelector('body')?.querySelector('header'));
+```
+
+Your `header` element should have a `class` with `header` as the value.
+
+```js
+assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
+```
+
+Your `header` element should have an `h1` element inside it.
+
+```js
+assert.exists(document.querySelector('.header')?.querySelector('h1'));
+```
+
+Your `h1` element should have the text `css flexbox photo gallery` inside it.
+
+```js
+assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html>
+  <head lang="en">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
new file mode 100644
index 0000000000..7461f43485
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
@@ -0,0 +1,65 @@
+---
+id: 61537c9eecea6a335db6da79
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Below your `.header` element, create a new `div` element and assign it a `class` of `gallery`. This `div` will act as a container for the gallery images.
+
+Inside that `.gallery` element, create nine `img` elements.
+
+# --hints--
+
+You should create a `div` element in your `body` element.
+
+```js
+assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1);
+```
+
+Your new `div` element should have a `class` with `gallery` set as the value.
+
+```js
+assert(document.querySelector('body')?.querySelector('.gallery'));
+```
+
+Your new `div` element should come after your `.header` element.
+
+```js
+assert(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery'));
+```
+
+Your `.gallery` element should have nine `img` elements.
+
+```js
+assert(document.querySelector('.gallery')?.querySelectorAll('img')?.length === 9);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
new file mode 100644
index 0000000000..6766539792
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
@@ -0,0 +1,111 @@
+---
+id: 61537d86bdc3dd343688fceb
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Next, give each `img` a `src` attribute according to its order in the document. The first `img` should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. The rest should be the same, except replace the `1` with the number the `img` is in the document.
+
+# --hints--
+
+All nine of your `img` elements should have a `src` attribute.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('src')));
+```
+
+Your first `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
+```
+
+Your second `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
+```
+
+Your third `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
+```
+
+Your fourth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
+```
+
+Your fifth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
+```
+
+Your sixth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
+```
+
+Your seventh `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
+```
+
+Your eighth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
+```
+
+Your ninth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+--fcc-editable-region--
+    <div class="gallery">
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
new file mode 100644
index 0000000000..c3de674b58
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
@@ -0,0 +1,83 @@
+---
+id: 615380dff67172357fcf0425
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Now your images are too big.
+
+Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`.
+
+Also set the `height` property to `300px` to keep your images a uniform size.
+
+# --hints--
+
+You should have a `.gallery img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
+```
+
+Your `.gallery img` selector should have a `width` property set to `100%` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
+```
+
+Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth, '350px');
+```
+
+Your `.gallery img` selector should have a `height` property set to `300px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height, '300px');
+```
+
+# --seed--
+
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
new file mode 100644
index 0000000000..e3bb0d435b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
@@ -0,0 +1,112 @@
+---
+id: 6153893900438b4643590367
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
+
+Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values.
+
+Add a `border-bottom` with `4px solid #fdb347` as the value.
+
+# --hints--
+
+You should have a `.header` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
+```
+
+Your `.header` selector should have a `text-align` property set to `center` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center');
+```
+
+Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase');
+```
+
+Your `.header` selector should have a `padding` property set to `32px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.padding, '32px');
+```
+
+Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor, 'rgb(10, 10, 35)');
+```
+
+Your `.header` selector should have a `color` property set to `#fff` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.color, 'rgb(255, 255, 255)');
+```
+
+Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom, '4px solid rgb(253, 179, 71)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+body  {
+  margin: 0;
+  font-family: sans-serif;
+  background-color: #f5f6f7;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
new file mode 100644
index 0000000000..3b04a4b69a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
@@ -0,0 +1,93 @@
+---
+id: 6153897c27f6334716ee5abe
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
+
+To use it, give an element a `display` property of `flex`. This will make the element a <em>flex container</em>. Any direct children of a flex container are called <em>flex items</em>.
+
+Create a `.gallery` selector and make it a flex container.
+
+
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `display` property set to `flex` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
new file mode 100644
index 0000000000..7f754c701b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
@@ -0,0 +1,94 @@
+---
+id: 6153908a366afb4d57185c8d
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Flexbox has a main and cross axis. The main axis is defined by the `flex-direction` property, which has four possible values:
+
+- `row` (default): horizontal axis with flex items from left to right
+- `row-reverse`: horizontal axis with flex items from right to left
+- `column`: vertical axis with flex items from top to bottom
+- `column-reverse`: vertical axis with flex items from bottom to top
+
+**Note**: The axes and directions will be different depending on the text direction. The values shown are for a left-to-right text direction.
+
+Try the different values to see how they affect the layout.
+
+When you are done, set an explicit `flex-direction` of `row` on the `.gallery` element.
+
+# --hints--
+
+Your `.gallery` selector should have a `flex-direction` property set to `row` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
new file mode 100644
index 0000000000..60f0140aab
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
@@ -0,0 +1,88 @@
+---
+id: 615392916d83fa4f02f7e2cf
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+
+The `flex-wrap` property determines how your flex items behave when the flex container is too small. Setting it to `wrap` will allow the items to wrap to the next row or column. `nowrap` (default) will prevent your items from wrapping and shrink them if needed.
+
+
+Make it so your flex items wrap to the next row when they run out of space.
+
+# --hints--
+
+Your `.gallery` selector should have a `flex-wrap` property set to `wrap` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap === 'wrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
new file mode 100644
index 0000000000..6f8a34d276
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
@@ -0,0 +1,87 @@
+---
+id: 6153938dce8b294ff8f5a4e9
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.
+
+Give your `.gallery` selector a `justify-content` property with `center` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have a `justify-content` property set to `center` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
new file mode 100644
index 0000000000..8803a6b2e2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
@@ -0,0 +1,88 @@
+---
+id: 6153947986535e5117e60615
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+The `align-items` property positions the flex content along the cross axis. In this case, with your `flex-direction` set to `row`, your cross axis would be vertical.
+
+To vertically center your images, give your `.gallery` selector an `align-items` property with `center` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have an `align-items` property set to `center` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
new file mode 100644
index 0000000000..1994f1565a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
@@ -0,0 +1,104 @@
+---
+id: 61539e07e7430b528fbffe21
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Give your `.gallery` selector a `padding` property set to `20px 10px` to create some space around the container.
+
+Then, give it a `max-width` of `1400px` and add a `margin` of `0 auto` to center it.
+
+# --hints--
+
+Your `.gallery` selector should have a `padding` property set to `20px 10px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingTop, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingBottom, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingLeft, '10px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingRight, '10px');
+```
+
+Your `.gallery` selector should have a `max-width` property set to `1400px` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth === '1400px');
+```
+
+Your `.gallery` element should be centered using a `margin` with `0 auto` as the value.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.gallery').cssText, 'margin: 0px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
new file mode 100644
index 0000000000..fa88f83ba5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
@@ -0,0 +1,92 @@
+---
+id: 61539f32a206bd53ec116465
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Notice how some of your images have become distorted. This is because the images have different aspect ratios. Rather than setting each aspect ratio individually, you can use the `object-fit` property to determine how images should behave.
+
+Give your `.gallery img` selector the `object-fit` property and set it to `cover`. This will tell the image to fill the `img` container while maintaining aspect ratio, resulting in cropping to fit.
+
+# --hints--
+
+Your `.gallery img` selector should have an `object-fit` property set to `cover` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
new file mode 100644
index 0000000000..23268a5f38
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
@@ -0,0 +1,95 @@
+---
+id: 6153a04847abee57a3a406ac
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Your images need some space between them.
+
+The `gap` CSS shorthand property sets the gaps, also known as gutters, between rows and columns. The `gap` property and its `row-gap` and `column-gap` sub-properties provide this functionality for flex, grid, and multi-column layout. You apply the property to the container element.
+
+Give your `.gallery` flex container a `gap` property with `16px` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have a `gap` property with `16px` set as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
new file mode 100644
index 0000000000..639e9b7cb6
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
@@ -0,0 +1,92 @@
+---
+id: 6153a3485f0b20591d26d2a1
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Smooth out your images a bit by giving the `.gallery img` selector a `border-radius` property with `10px` set as the value.
+
+# --hints--
+
+Your `.gallery img` selector should have a `border-radius` property with `10px` set as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
new file mode 100644
index 0000000000..44bec2cf27
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
@@ -0,0 +1,112 @@
+---
+id: 6153a3952facd25a83fe8083
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `::after` pseudo-element creates an element that is the last child of the selected element. You can use it to add an empty element after the last image. If you give it the same `width` as the images it will push the last image to the left when the gallery is in a two-column layout. Right now, it is in the center because you set `justify-content: center` on the flex container.
+
+Example:
+
+```CSS
+.container::after {
+  content: "";
+  width: 860px;
+}
+```
+
+Create a new selector using an `::after` pseudo-element on the `.gallery` element. Add a `content` property set to an empty string `""` and `350px` set for the `width` property.
+
+# --hints--
+
+Your `.gallery::after` selector should have an empty string `""` set for the `content` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\"");
+```
+
+Your `.gallery::after` selector should have `350px` set for the `width` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
new file mode 100644
index 0000000000..971b0ddd65
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
@@ -0,0 +1,181 @@
+---
+id: 6153a3ebb4f7f05b8401b716
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+
+The `alt` image attribute should describe the image content. Screen readers announce the alternative text in place of images. If the image can't be loaded, this text is presented in place of the image.
+
+To complete the project, add an `alt` attribute to all nine of your cat images to describe them. Use a value at least five characters long for each.
+
+
+# --hints--
+
+All nine of your `img` elements should have a `alt` attribute with text describing each image, with each description using at least `5` letters.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('alt')));
+assert(images.every(image => image.getAttribute('alt').length >= 5));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      --fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="Gallery">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
new file mode 100644
index 0000000000..9765d1e93b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
@@ -0,0 +1,92 @@
+---
+id: 615f171d05def3218035dc85
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Remove the margin from your body element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.
+
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `margin` property set to 0 as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
+```
+
+Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
+```
+
+Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
new file mode 100644
index 0000000000..4b6ce33d27
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
@@ -0,0 +1,75 @@
+---
+id: 6493bc0d99879635209565aa
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `border-box` sizing model does the opposite of `content-box`. The total width of the element, including padding and border, will be the explicit width set. The content of the element will shrink to make room for the padding and border.
+
+Change the `box-sizing` property to `border-box`. Notice how your blue image borders now fit within your red gallery border.
+
+# --hints--
+
+
+Your * selector should have a `box-sizing` property set to `border-box` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+--fcc-editable-region--
+ * {
+  box-sizing: content-box;
+}
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
new file mode 100644
index 0000000000..11895a275c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
@@ -0,0 +1,83 @@
+---
+id: 6494da0daf5df5197963671d
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
+
+The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
+
+Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
+
+# --hints--
+
+You should have a `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
+```
+
+Your `*` selector should have its `box-sizing` property set to `content-box`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+  ```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
new file mode 100644
index 0000000000..40a707dd74
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
@@ -0,0 +1,126 @@
+---
+id: 64dd076a1b33c86d84b4232f
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+In order to better visualize how your elements are sized, adding a border can be helpful.
+
+Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
+
+Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
+```
+
+Your `.gallery` selector should have a `width` property set to `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
+```
+
+Your `.gallery` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
+```
+
+Your `.gallery` selector should have a `border` property set to `5px solid red`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
+```
+
+You should have an `img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+Your `img` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
+```
+
+Your `img` selector should have a `width` property set to `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
+```
+
+Your `img` selector should have a `padding` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
+```
+
+Your `img` selector should have a `padding` property set to `5px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
+```
+
+Your `img` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
+```
+
+Your `img` selector should have a `border` property set to `5px solid blue`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
new file mode 100644
index 0000000000..92603787c3
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
@@ -0,0 +1,79 @@
+---
+id: 64dd136e4e8b0894f9c70d86
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.
+
+Remove your `.gallery` and `img` selectors, and all rules within.
+
+# --hints--
+
+You should not have a `.gallery` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+You should not have an `img` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+ * {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md b/curriculum/challenges/japanese/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
index 5c2af06d31..cf9f8efffd 100644
--- a/curriculum/challenges/japanese/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
@@ -7,7 +7,7 @@ dashedName: step-3
 
 # --description--
 
-To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropraite message in the block of each condition.
+To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropriate message in the block of each condition.
 
 Starting with the duplex loan, check if `annualIncome` is greater than or equal to `minIncomeForDuplex` AND if `creditScore` is greater than `minCreditScoreForDuplex`.
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
new file mode 100644
index 0000000000..10c2147f74
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
@@ -0,0 +1,58 @@
+---
+id: 615f2abbe7d18d49a1e0e1c8
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You've been provided with a basic HTML boilerplate.
+
+Create an `h1` element within your `body` element and give it the text `Nutrition Facts`.
+
+# --hints--
+
+You should add a new `h1` element.
+
+```js
+assert.exists(document.querySelector('h1'));
+```
+
+Your `h1` element should be within your `body` element.
+
+```js
+assert(document.querySelector('h1')?.parentElement?.localName === 'body');
+```
+
+Your `h1` element should have the text `Nutrition Facts`.
+
+```js
+assert(document.querySelector('h1')?.innerText === 'Nutrition Facts');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
new file mode 100644
index 0000000000..272ccd55ff
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
@@ -0,0 +1,62 @@
+---
+id: 615f2d4150fe0d4cbd0f2628
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Below your `h1` element, add a `p` element with the text `8 servings per container`.
+
+# --hints--
+
+You should add a new `p` element.
+
+```js
+assert.exists(document.querySelector('p'));
+```
+
+Your `p` element should be within your `body` element.
+
+```js
+assert(document.querySelector('p')?.parentElement?.localName === 'body');
+```
+
+Your `p` element should come after your `h1` element.
+
+```js
+assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1');
+```
+
+Your `p` element should have the text `8 servings per container`.
+
+```js
+assert(document.querySelector('p')?.innerText === '8 servings per container');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
new file mode 100644
index 0000000000..2ae877fe38
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
@@ -0,0 +1,63 @@
+---
+id: 615f34948891834dd77655a6
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Add a second `p` element with the text `Serving size 2/3 cup (55g)`.
+
+# --hints--
+
+You should have a second `p` element.
+
+```js
+assert(document.querySelectorAll('p')?.length === 2);
+```
+
+Your second `p` element should be within your `body` element.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.parentElement?.localName === 'body');
+```
+
+Your second `p` element should come after your existing `p` element.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p');
+```
+
+Your second `p` element should have the text `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
new file mode 100644
index 0000000000..986fa60763
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
@@ -0,0 +1,88 @@
+---
+id: 615f34ecc1091b4fd5a8a484
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Within your `head` element, add a `link` element with the `rel` attribute set to `stylesheet` and the `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+This will import the `Open Sans` font family, with the font weight values `400`, `700`, and `800`.
+
+Also add a `link` element to link your `styles.css` file.
+
+# --hints--
+
+Your code should have two `link` elements.
+
+```js
+assert.strictEqual(document.querySelectorAll('link').length, 2);
+```
+
+Your `link` elements should be void elements, they should not have a end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/);
+```
+
+Your two `link` elements should be inside the `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.strictEqual(headElement.querySelectorAll('link').length, 2);
+```
+
+Both of your `link` elements should have the `rel` attribute set to `stylesheet`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert.isTrue(links.every(link => link.getAttribute('rel') === 'stylesheet'));
+```
+
+One of your `link` elements should have an `href` attribute set to `styles.css`.
+
+```js
+const styleElement = document.querySelector('[data-href]');
+assert.isNotNull(styleElement);
+```
+
+One of your `link` elements should have an `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert.exists(links.find(link => link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
new file mode 100644
index 0000000000..d66790fd30
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
@@ -0,0 +1,55 @@
+---
+id: 615f357957e370510f21ea16
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `body` selector and give it a `font-family` set to `Open Sans` with a fallback of `sans-serif`.
+
+Remember that fonts with spaces in the name must be wrapped in quotes for CSS.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `font-family` property set to `"Open Sans", sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === '"Open Sans", sans-serif');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
new file mode 100644
index 0000000000..82f736ff48
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
@@ -0,0 +1,57 @@
+---
+id: 615f378014c2da526a109c81
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The font is a bit small. Create an `html` selector and set the font to have a size of `16px`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have a `font-size` property set to `16px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
new file mode 100644
index 0000000000..6ceffde047
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
@@ -0,0 +1,66 @@
+---
+id: 615f38279e5c3d53692ea441
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Wrap your `h1` and `p` elements in a `div` element. Give that `div` a `class` attribute set to `label`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelector('div'));
+```
+
+Your new `div` element should have the `class` attribute set to `label`.
+
+```js
+assert(document.querySelector('div')?.classList?.contains('label'));
+```
+
+Your `h1` and `p` elements should be within your new `.label` element.
+
+```js
+const children = [...document.querySelectorAll('h1'), ...document.querySelectorAll('p')];
+assert(children?.every(child => child?.parentElement?.classList?.contains('label')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+--fcc-editable-region--
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
new file mode 100644
index 0000000000..1ea4ac044a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
@@ -0,0 +1,65 @@
+---
+id: 615f38cabc64e3556f98cc1a
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Borders can be used to group and prioritize content.
+
+Create a `.label` selector and give it a `border` set to `2px solid black`.
+
+# --hints--
+
+You should have a `.label` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label'));
+```
+
+Your `.label` selector should have a `border` property set to `2px solid black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
new file mode 100644
index 0000000000..e436f20dcd
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
@@ -0,0 +1,61 @@
+---
+id: 615f3949f58e12577dcefb00
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Good use of white space can bring focus to the important elements of your page, and help guide your user's eyes through your text.
+
+Give your `.label` selector a `width` property set to `270px`.
+
+# --hints--
+
+Your `.label` selector should have a `width` property set to `270px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.width === '270px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
new file mode 100644
index 0000000000..ca53749464
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
@@ -0,0 +1,66 @@
+---
+id: 615f39d7da41b15851fa3fb9
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Give your `.label` selector a `margin` property set to `20px auto`, and a `padding` property set to `0 7px`.
+
+# --hints--
+
+Your `.label` selector should have a `margin` property set to `20px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.margin === '20px auto');
+```
+
+Your `.label` selector should have a `padding` property set to `0 7px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+  width: 270px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
new file mode 100644
index 0000000000..694a4e9ff3
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
@@ -0,0 +1,72 @@
+---
+id: 615f3b091162165948e1cb33
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+If you inspect your `.label` element with your browser's developer tools, you may notice that it's actually 288 pixels wide instead of 270. This is because, by default, the browser includes the border and padding when determining an element's size.
+
+To solve this, reset the box model by creating a `*` selector and giving it a `box-sizing` property of `border-box`.
+
+# --hints--
+
+You should create a `*` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
new file mode 100644
index 0000000000..84ea6cab71
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
@@ -0,0 +1,76 @@
+---
+id: 615f3cafd794015aa9547a6d
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Remember that the use of `h1`, `h2`, and similar tags determine the semantic structure of your HTML. However, you can adjust the CSS of these elements to control the visual flow and hierarchy.
+
+Create an `h1` rule and set the `font-weight` property to `800`. This will make your `h1` text bolder.
+
+# --hints--
+
+You should create an `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+Your `h1` selector should have a `font-weight` property set to `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
new file mode 100644
index 0000000000..fe53466124
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
@@ -0,0 +1,70 @@
+---
+id: 615f3d9e59db4b5b8e960762
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Give your `h1` selector a `text-align` property of `center`.
+
+# --hints--
+
+Your `h1` selector should have a `text-align` property set to `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
new file mode 100644
index 0000000000..0c437fb4e8
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
@@ -0,0 +1,71 @@
+---
+id: 615f3e1b7233ee5c7595771f
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Fine-tune the placement of your `h1` by giving it a top and bottom margin of `-4px` and a left and right margin of `0`.
+
+# --hints--
+
+Your `h1` selector should have a `margin` property set to `-4px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.margin === '-4px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
new file mode 100644
index 0000000000..2448838c5f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
@@ -0,0 +1,80 @@
+---
+id: 615f3e4af8008c5d494d3afe
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Create a `p` selector and remove all margins.
+
+# --hints--
+
+You should create a `p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p'));
+```
+
+Your `p` selector should have a `margin` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
new file mode 100644
index 0000000000..53f6d70c15
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
@@ -0,0 +1,96 @@
+---
+id: 615f3ed16592445e57941aec
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Lines can help separate and group important content, especially when space is limited.
+
+Create a `div` element below your `h1` element, and give it a `class` attribute set to `divider`.
+
+# --hints--
+
+You should create a new `div`.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('divider'));
+```
+
+Your `.divider` element should be within your `.label` element.
+
+```js
+assert(document.querySelector('.label')?.querySelector('.divider'));
+```
+
+Your `.divider` element should come after your `h1` element.
+
+```js
+assert(document.querySelector('.divider')?.previousElementSibling?.localName === 'h1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
new file mode 100644
index 0000000000..f8e43c0a29
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
@@ -0,0 +1,91 @@
+---
+id: 615f405b89a7ec5f8e2d11f4
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Create a selector for your new `.divider` and set the `border-bottom` property to `1px solid #888989`. Also give it a top and bottom margin of `2px`. It should not have any left or right margin.
+
+# --hints--
+
+You should create a `.divider` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider'));
+```
+
+Your `.divider` selector should have a `border-bottom` property set to `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+Your `.divider` selector should have a `margin` property set to `2px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.margin === '2px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
new file mode 100644
index 0000000000..aa3594ecc5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
@@ -0,0 +1,84 @@
+---
+id: 615f40b01f680e608d360ed4
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+The `letter-spacing` property can be used to adjust the space between each character of text in an element.
+
+Give your `h1` selector a `letter-spacing` property set to `0.15px` to space them out a bit more.
+
+# --hints--
+
+Your `h1` selector should have a `letter-spacing` property set to `0.15px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
new file mode 100644
index 0000000000..a1f84535ff
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
@@ -0,0 +1,91 @@
+---
+id: 615f4172e9eec061d6456221
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Nutrition labels have a lot of bold text to draw attention to important information. Rather than targeting each element that needs to be bold, it is more efficient to use a class to apply the bold styling to every element.
+
+Give your second `p` element a `class` attribute set to `bold`.
+
+# --hints--
+
+Your second `p` element should have a `class` attribute set to `bold`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.classList?.contains('bold'));
+```
+
+Your first `p` element should not have a `class` attribute set to `bold`.
+
+```js
+assert(!document.querySelector('p')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
new file mode 100644
index 0000000000..bcbaaf757a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
@@ -0,0 +1,104 @@
+---
+id: 615f41c979787462e76dab90
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Your new class does not have any styling yet. Create a `.bold` selector and give it a `font-weight` property set to `800` to make the text bold.
+
+Go ahead and remove the `font-weight` property from your `h1` selector as well.
+
+# --hints--
+
+You should have a `.bold` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold'));
+```
+
+Your `.bold` selector should have a `font-weight` property set to `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold')?.fontWeight === '800');
+```
+
+Your `h1` selector should not have a `font-weight` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === "");
+```
+
+You should not remove your `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
new file mode 100644
index 0000000000..05d8bb7562
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
@@ -0,0 +1,86 @@
+---
+id: 615f423cf65d5864132a0956
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Give your `h1` element a `class` attribute set to `bold`. This will make the text bold again.
+
+# --hints--
+
+Your `h1` element should have a `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('h1')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
new file mode 100644
index 0000000000..64189f1570
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
@@ -0,0 +1,100 @@
+---
+id: 615f42a021625f656101ef93
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Horizontal spacing between equally important elements can increase the readability of your text.
+
+Wrap the text `2/3 cup (55g)` in a `span` element.
+
+# --hints--
+
+You should create a new `span` element.
+
+```js
+assert(document.querySelector('span'));
+```
+
+Your `span` element should have the text `2/3 cup (55g)`.
+
+```js
+assert(document.querySelector('span')?.textContent?.trim() === '2/3 cup (55g)');
+```
+
+Your `p` element should still have the text `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
new file mode 100644
index 0000000000..686336b2dc
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
@@ -0,0 +1,92 @@
+---
+id: 615f4bfb9de4a16703b56eb6
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now we can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`.
+
+# --hints--
+
+Your `p` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.display === 'flex');
+```
+
+Your `p` selector should have a `justify-content` property set to `space-between`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.justifyContent === 'space-between');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+--fcc-editable-region--
+p {
+  margin: 0;
+}
+--fcc-editable-region--
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
new file mode 100644
index 0000000000..4c960b7219
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
@@ -0,0 +1,104 @@
+---
+id: 615f4ce9d877b668417c0c42
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Wrap everything within the `.label` element in a new `header` element.
+
+# --hints--
+
+You should create a new `header` element.
+
+```js
+assert(document.querySelector('header'));
+```
+
+Your `header` element should be within your `.label` element.
+
+```js
+assert(document.querySelector('header')?.parentElement?.classList?.contains('label'));
+```
+
+Your `h1`, `div`, and `p` elements should be within your new `header` element.
+
+```js
+const children = document.querySelector('header')?.children;
+assert(children?.[0]?.localName === 'h1');
+assert(children?.[1]?.localName === 'div');
+assert(children?.[2]?.localName === 'p');
+assert(children?.[3]?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
new file mode 100644
index 0000000000..ea61500923
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
@@ -0,0 +1,105 @@
+---
+id: 615f4dde9d72e3694cb9ee3b
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Now update your `h1` selector to be `header h1` to specifically target your `h1` element within your new `header`.
+
+# --hints--
+
+You should have a `header h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('header h1'));
+```
+
+You should not have an `h1` selector.
+
+```js
+assert.isNull(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+You should not change any properties in the selector.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('header h1');
+assert(style?.textAlign === 'center');
+assert(style?.margin === '-4px 0px');
+assert(style?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
new file mode 100644
index 0000000000..6830eadac2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
@@ -0,0 +1,105 @@
+---
+id: 615f4ec58334106a4170c2a8
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Create a new `div` element below your `header` element, and give it a `class` attribute set to `divider large`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 3);
+```
+
+Your new `div` element should come after your `header` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` element should have the `class` attribute set to `divider large`.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider'));
+assert(div?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
new file mode 100644
index 0000000000..4fd89a7f1f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
@@ -0,0 +1,111 @@
+---
+id: 615f4f9e4a40566b776a8f38
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Create a new `.large` selector and give it a `height` property set to `10px`. Also create an `.large, .medium` selector and set the `background-color` property to `black`.
+
+# --hints--
+
+You should have a new `.large` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large'));
+```
+
+Your `.large` selector should have a `height` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large')?.height === '10px');
+```
+
+You should have a new `.large, .medium` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium'));
+```
+
+Your `.large, .medium` selector should have a `background-color` property set to `black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.backgroundColor === 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
new file mode 100644
index 0000000000..971d93624c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
@@ -0,0 +1,101 @@
+---
+id: 615f50473cc0196c6dd3892a
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+You may notice there is still a small border at the bottom of your `.large` element. To reset this, give your `.large, .medium` selector a `border` property set to `0`.
+
+Note: the `medium`(medium) class will be utilized later for the thinner bars of the nutrition label.
+
+# --hints--
+
+Your `.large, .medium` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.borderWidth === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+--fcc-editable-region--
+.large, .medium {
+  background-color: black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
new file mode 100644
index 0000000000..47197f64cc
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
@@ -0,0 +1,113 @@
+---
+id: 615f51257a8a516d80b6c743
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Create a new `div` below your `.large` element and give it a `class` attribute set to `calories-info`.
+
+# --hints--
+
+You should create another `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 4);
+```
+
+Your new `div` should have a `class` attribute set to `calories-info`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info'));
+```
+
+Your new `div` should come after the `.large` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
new file mode 100644
index 0000000000..136c3e5dfc
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
@@ -0,0 +1,128 @@
+---
+id: 615f51e4e5b24a6e80eccce1
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Within your `.calories-info` element, create a `div` element. Give that `div` element a `class` attribute set to `left-container`. Within the newly created `div` element, create a `h2` element with the text `Amount per serving`. Give the `h2` element a `class` attribute set to `bold small-text`.
+
+# --hints--
+
+You should create a new `div` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'div');
+```
+
+Your new `div` element should have a `class` attribute set to `left-container`.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('left-container'));
+```
+
+You should create a new `h2` element within your `.left-container` element.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.localName === 'h2');
+```
+
+Your new `h2` element should have a `class` attribute set to `bold small-text`.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('bold'));
+assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('small-text'));
+```
+
+Your new `h2` element should have the text `Amount per serving`.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.innerText === 'Amount per serving');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+    <div class="calories-info">
+
+    </div>
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
new file mode 100644
index 0000000000..c71a25214c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
@@ -0,0 +1,115 @@
+---
+id: 615f522dea4f776f64dc3e91
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `rem` unit stands for `root em`, and is relative to the font size of the `html` element.
+
+Create a `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`).
+
+# --hints--
+
+You should have an `.small-text` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.small-text'));
+```
+
+Your `.small-text` selector should have a `font-size` property set to `0.85rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.small-text')?.fontSize === '0.85rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
new file mode 100644
index 0000000000..deabca353f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
@@ -0,0 +1,143 @@
+---
+id: 615f5486b8fd4b71633f69b0
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Below your `.small-text` element, create a new `p` element with the text `Calories`. Also below the `.left-container` element, create a new `span` element with the text `230`.
+
+# --hints--
+
+You should have a new `p` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.querySelector('p'))
+```
+
+You should have a new `span` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.querySelector('span'))
+```
+
+Your `p` element should come after your `.small-text` element.
+
+```js
+assert(document.querySelector('.small-text')?.nextElementSibling?.localName === 'p');
+```
+
+Your `span` element should come after your `.left-container` element.
+
+```js
+assert(document.querySelector('.left-container')?.nextElementSibling?.localName ==='span');
+```
+
+Your `p` element should have the text `Calories`.
+
+```js
+assert(document.querySelector('.small-text')?.nextElementSibling?.innerText === 'Calories');
+```
+
+Your `span` element should have the text `230`.
+
+```js
+assert(document.querySelector('.left-container')?.nextElementSibling?.innerText === '230');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
new file mode 100644
index 0000000000..14f20ffb78
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
@@ -0,0 +1,144 @@
+---
+id: 615f575b50b91e72af079480
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Create a new `.left-container p` selector setting the top and bottom margin to `-5px`, and the left and right margin to `-2px`. Also set the `font-size` to `2em` and `font-weight` to `700`.
+
+# --hints--
+
+You should have a new `.left-container p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p'));
+```
+
+Your new `.left-container p` selector should have a `margin` property set to `-5px -2px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginTop, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginBottom, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginLeft, '-2px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginRight, '-2px');
+```
+
+Your new `.left-container p` selector should have a `font-size` property set to `2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontSize === '2em');
+```
+
+Your new `.left-container p` selector should have a `font-weight` property set to `700`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontWeight === '700');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
new file mode 100644
index 0000000000..b833b5f471
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
@@ -0,0 +1,141 @@
+---
+id: 615f5af373a68e744a3c5a76
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Create a `.calories-info span` selector, set its `font-size` to `2.4em` and `font-weight` to `700`.
+
+# --hints--
+
+You should create a `.calories-info span` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span'));
+```
+
+Your `.calories-info span` selector should have a `font-size` property set to `2.4em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '2.4em');
+```
+
+Your `.calories-info span` selector should have a `font-weight` property set to `700`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontWeight === '700');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
new file mode 100644
index 0000000000..84d0ba9d98
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
@@ -0,0 +1,134 @@
+---
+id: 615f5fd85d0062761f288364
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Typography is often more art than science. You may have to tweak things like alignment until it looks correct.
+
+Give your `.calories-info span` selector a `margin` set to `-7px -2px`. This will shift your `230` text into place.
+
+# --hints--
+
+Your `.calories-info span` selector should have a `margin` set to `-7px -2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.margin === '-7px -2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+.calories-info span {
+  font-size: 2.4em;
+  font-weight: 700;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
new file mode 100644
index 0000000000..31f049fa2d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
@@ -0,0 +1,141 @@
+---
+id: 615f61338c8ca176d6445574
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider medium`.
+
+# --hints--
+
+You should create a new `div` within your `.label` element.
+
+```js
+assert(document.querySelectorAll('.label > div')?.length === 3)
+```
+
+Your new `div` should have the `class` attribute set to `divider medium`. This div should be the last element in your `.label` element.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider') && div?.classList?.contains('medium'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
new file mode 100644
index 0000000000..f074a2cf76
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
@@ -0,0 +1,142 @@
+---
+id: 615f666ac5edea782feb7e75
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Create an `.medium` selector and give it a `height` property of `5px`.
+
+# --hints--
+
+You should create an `.medium` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.medium'));
+```
+
+Your `.medium` selector should have a `height` property set to `5px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.medium')?.height === '5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
new file mode 100644
index 0000000000..0c0aa78424
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
@@ -0,0 +1,167 @@
+---
+id: 615f671b6d1919792745aa5d
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Create a new `div` element below your `.medium` element. Give it a `class` attribute set to `daily-value small-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `bold right`.
+
+# --hints--
+
+You should create a new `div` element after your `.medium` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('medium'));
+```
+
+Your new `div` should have a `class` attribute set to `daily-value small-text`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value'));
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('small-text'));
+```
+
+Your new `div` element should have a `p` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `% Daily Value *`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *');
+```
+
+Your new `p` element should have a `class` attribute set to `bold right`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    --fcc-editable-region--
+    <div class="divider medium"></div>
+
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
new file mode 100644
index 0000000000..3873e85fbf
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
@@ -0,0 +1,157 @@
+---
+id: 615f6823d0815b7a991f2a75
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Use your existing `.divider` element as an example to add a new divider after the `p` element.
+
+# --hints--
+
+You should create a new `div` within your `.daily-value` element.
+
+```js
+assert(document.querySelectorAll('.daily-value.small-text > div')?.length === 1)
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text > div')?.classList?.contains('divider'))
+```
+
+Your new `div` should come after your `p` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text > div')?.previousElementSibling?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
new file mode 100644
index 0000000000..74ebd1c18c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
@@ -0,0 +1,182 @@
+---
+id: 615f6b2d164f81809efd9bdc
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Then, wrap the text `Total Fat` in one `span` element, the text `10%` in another, and give them each a class of `bold`.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Total Fat 8g 10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g[\s|\n]+10%/));
+```
+
+Your `p` element should have two `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
+```
+
+One `span` element should wrap the text `Total Fat`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat');
+```
+
+The `span` element around `Total Fat` should have the `class` set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.className === 'bold');
+```
+
+A `span` element should wrap the text `10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span + span')?.innerText === '10%');
+```
+
+The `span` element around `10%` should have the `class` set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
new file mode 100644
index 0000000000..de2aab3150
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
@@ -0,0 +1,172 @@
+---
+id: 615f6cc778f7698258467596
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Below your element with the `Total Fat` text, create a new `p` element with the text `Saturated Fat 1g 5%`. Wrap the `5%` in a `span` with the `class` attribute set to `bold`. In this case this is enough to align the percentage to `5%`.
+
+# --hints--
+
+You should create a new `p` element below your element with the `Total Fat` text.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/));
+```
+
+Your new `p` element should have the text `Saturated Fat 1g 5%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.localName === 'span');
+```
+
+Your `span` element should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+Your `span` element should wrap the `5%` text.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === "5%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
new file mode 100644
index 0000000000..5f2aad0b62
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
@@ -0,0 +1,148 @@
+---
+id: 615f6fddaac1e083502d3e6a
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+This new `p` element will need to be indented. Give it a `class` set to `indent`.
+
+# --hints--
+
+Your `p` element with the text `Saturated Fat 1g 5%` should have a `class` attribute set to `indent`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p>Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
new file mode 100644
index 0000000000..2e1a5c3f79
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
@@ -0,0 +1,163 @@
+---
+id: 615f70077a4ff98424236c1e
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create a new `.indent` selector and give it a `margin-left` property set to `1em`.
+
+# --hints--
+
+You should have a new `.indent` selector.
+
+```js
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.indent'));
+```
+
+Your `.indent` selector should have a `margin-left` property set to `1em`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft, '1em');
+```
+
+Your `.indent` selector should only set the `margin-left` property, not other margin properties.
+
+```js
+const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.indent') ?? {};
+assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
new file mode 100644
index 0000000000..1d696789f3
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
@@ -0,0 +1,160 @@
+---
+id: 615f72a872354a850d4f533e
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Create a `.daily-value p` selector to target all of your `p` elements in the `daily-value` section. Give this new selector a `border-bottom` set to `1px solid #888989`.
+
+# --hints--
+
+You should have a new `.daily-value p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+Your `.daily-value p` selector should have a `border-bottom` property set to `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
new file mode 100644
index 0000000000..96cbc9639f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
@@ -0,0 +1,166 @@
+---
+id: 615f74a71f1e498619e38ee8
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+The bottom borders under your `% Daily Value *` and `Saturated Fat 1g 5%` elements do not extend the full width of the label. Add `no-divider` to the `class` for these two elements.
+
+# --hints--
+
+Your `p` element with the text `% Daily Value *` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.firstElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('bold'));
+```
+
+Your `p` element with the text `Saturated Fat 1g 5%` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
new file mode 100644
index 0000000000..d3d0a81e57
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
@@ -0,0 +1,181 @@
+---
+id: 615f7ad94380408d971d14f6
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+The `:not` pseudo-selector can be used to select all elements that do not match the given CSS rule.
+
+```css
+div:not(#example) {
+  color: red;
+}
+```
+
+The above selects all `div` elements without an `id` of `example`.
+
+Modify your `.daily-value p` selector to exclude the `.no-divider` elements.
+
+# --hints--
+
+You should have a `.daily-value p:not(.no-divider)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)'));
+```
+
+You should not have a `.daily-value p` selector.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+You should not change the properties in the `.daily-value p:not(.no-divider)` selector.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)');
+assert(style?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
new file mode 100644
index 0000000000..aac27eb5b6
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
@@ -0,0 +1,165 @@
+---
+id: 615f7bc680f7168ea01ebf99
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Now you will have to add separate dividers below your `.no-divider` elements.
+
+Your first `.no-divider` element has a `.divider` after it. Create another `.divider` after your second `.no-divider` element.
+
+# --hints--
+
+You should create a new `div` at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
new file mode 100644
index 0000000000..6504be1b04
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
@@ -0,0 +1,196 @@
+---
+id: 615f7c71eab8218f846e4503
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+After your last `.divider`, create another `p` element with the text `Trans Fat 0g`. Italicize the word `Trans` by wrapping it in an `i` element. Give the new `p` element the `class` attribute set to `indent no-divider`. Wrap `Trans Fat 0g` in a `span` element for alignment.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Trans Fat 0g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText === 'Trans Fat 0g');
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(p?.classList?.contains('indent'));
+assert(p?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have an `i` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i'));
+```
+
+Your `i` element should wrap the text `Trans`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i')?.innerText === 'Trans');
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span'));
+```
+
+Your `span` element should wrap the text `Trans Fat 0g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText?.match(/Trans[\s|\n]+Fat 0g/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
new file mode 100644
index 0000000000..b038b1dfc2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
@@ -0,0 +1,165 @@
+---
+id: 615f7d489a581590d1350288
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Create another `.divider` after your last `p` element.
+
+# --hints--
+
+You should create a new `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` element should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
new file mode 100644
index 0000000000..ce39f09eae
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
@@ -0,0 +1,215 @@
+---
+id: 615f7de4487b64919bb4aa5e
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Then, wrap the text `Cholesterol` in a `span` element, `0%` in another, and give each of them a class of `bold`.
+
+Finally, nest the `span` element containing the text `Cholesterol` along with the text `0mg`, in an additional `span` element for alignment.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Cholesterol 0mg 0%`.
+
+```js
+const text = document.querySelector('.daily-value.small-text')?.lastElementChild?.textContent?.trim()?.replace(/\n/g, ' ')?.replace(/\s\s+/g, ' ');
+assert(text === 'Cholesterol 0mg 0%');
+```
+
+Your new `p` element should have exactly three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+The text `Cholesterol` should be nested in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
+assert(cholesterolSpan.length === 1);
+```
+
+Your `Cholesterol` `span` should have the `class` attribute set to `bold`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
+assert(cholesterolSpan[0]?.classList?.contains('bold'));
+```
+
+The text `0%` should be nested in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
+assert(zeroPercentSpan.length === 1);
+```
+
+Your `0%` `span` should have the `class` attribute set to `bold`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
+assert(zeroPercentSpan[0]?.classList?.contains('bold'));
+```
+
+Your `Cholesterol` `span` and your `0mg` text should be wrapped in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolZeroSpan = spans.filter(span => span?.innerText === 'Cholesterol 0mg');
+assert(cholesterolZeroSpan.length === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
new file mode 100644
index 0000000000..f165c8568f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
@@ -0,0 +1,205 @@
+---
+id: 615f7e7281626a92bbd62da8
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Put `Sodium` and `7%` each in their own `span` with a class of a `bold` like you did with the others.
+
+Then, add an additional `span` element around `Sodium 160mg` for alignment again.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Sodium 160mg 7%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Sodium[\s|\n]160mg[\s|\n]+7%/));
+```
+
+Your new `p` element should have three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+A `span` element should wrap the text `Sodium 160mg`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/));
+```
+
+A `span` element should wrap the text `Sodium`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === "Sodium");
+```
+
+The `span` around `Sodium` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+A `span` element should wrap the text `7%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '7%');
+```
+
+The `span` element around `7%` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
new file mode 100644
index 0000000000..58d410f432
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
@@ -0,0 +1,210 @@
+---
+id: 615f7ecb09de9a938ef94756
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below your last `p` element, add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Then, wrap the nutrient and amount in a `span` for alignment again.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Total Carbohydrate 37g 13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g[\s|\n]+13%/));
+```
+
+Your new `p` element should have three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+One `span` element should wrap the text `Total Carbohydrate 37g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g/));
+```
+
+One `span` element should wrap the text `Total Carbohydrate`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Total Carbohydrate');
+```
+
+The `span` element around `Total Carbohydrate` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+A `span` element should wrap the text `13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
+```
+
+The `span` element around `13%` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+Your second `span` element should wrap the text `13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
new file mode 100644
index 0000000000..15003310e7
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
@@ -0,0 +1,183 @@
+---
+id: 615f7fa959ab75948f96a0d6
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Below your last `p` element, add another `p` element with the text `Dietary Fiber 4g`. Give the `p` element the `class` necessary to indent it and remove the dividing border. Then create a divider below that `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Dietary Fiber 4g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/));
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
new file mode 100644
index 0000000000..b47f77498e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
@@ -0,0 +1,185 @@
+---
+id: 615f808d85793195b0f53be9
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Create another `p` element after your last `.divider`, and give it the text `Total Sugars 12g`. Assign that `p` element the `class` values necessary to indent it and remove the bottom border. Then create another `.divider` below your new `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Total Sugars 12g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/));
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
new file mode 100644
index 0000000000..d7b411b930
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
@@ -0,0 +1,169 @@
+---
+id: 615f829d07b18f96f6f6684b
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+The advantage to creating these dividers is that you can apply specific classes to style them individually. Add `double-indent` to the `class` for your last `.divider`.
+
+# --hints--
+
+Your last `.divider` element should have `double-indent` added to the `class`. Do not remove the existing value.
+
+```js
+const last = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(last?.classList?.contains('double-indent'));
+assert(last?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      --fcc-editable-region-- 
+      <div class="divider"></div>
+      --fcc-editable-region-- 
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
new file mode 100644
index 0000000000..1c85a5b53a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
@@ -0,0 +1,182 @@
+---
+id: 615f83ef928ec9982b785b6a
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Create a `.double-indent` selector and give it a left margin of `2em`.
+
+# --hints--
+
+You should have a new `.double-indent` selector.
+
+```js
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.double-indent'));
+```
+
+Your `.double-indent` selector should have a `margin-left` property set to `2em`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.double-indent')?.marginLeft, '2em');
+```
+
+Your `.double-indent` selector should only set the `margin-left` property, not other margin properties.
+
+```js
+const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.double-indent') ?? {};
+assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region-- 
+
+--fcc-editable-region-- 
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
new file mode 100644
index 0000000000..a39f4b879c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
@@ -0,0 +1,211 @@
+---
+id: 615f84f246e8ba98e3cd97be
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Below your `.double-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. Your new `p` element should also be double indented, and have no bottom border. Use a `span` to make the `20%` bold and right aligned.
+
+Then create another divider after that `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Includes 10g Added Sugars 20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/));
+```
+
+Your new `p` element should have the `class` attribute set to `double-indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('double-indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.localName === 'span');
+```
+
+Your `span` element should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.classList?.contains('bold'));
+```
+
+Your `span` element should wrap the text `20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type span')?.innerText === '20%');
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
new file mode 100644
index 0000000000..d4af4e85bd
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
@@ -0,0 +1,208 @@
+---
+id: 615f887466db4ba14b5342cc
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+After your last divider, create another `p` element with the text `Protein 3g`. Use the necessary classes to remove the bottom border, and a `span` to make the `Protein` bold. Then wrap the text `Protein 3g` including the new `span` element, in a new `span` element.
+
+Following this element, create a large divider.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Protein 3g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/));
+```
+
+Your new `p` element should have the `class` attribute set to `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+You should have a `span` element with the class `bold` around the text `Protein`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type span.bold')?.innerText === 'Protein');
+```
+
+You should have a `span` element around the text `Protein 3g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text > p:last-of-type > span > span.bold')?.innerText === 'Protein');
+assert(document.querySelector('.daily-value.small-text > p:last-of-type > span')?.innerText === 'Protein 3g');
+```
+
+Your new `div` should have the `class` attribute set to `divider large`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
new file mode 100644
index 0000000000..0477e6cf30
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
@@ -0,0 +1,195 @@
+---
+id: 615f89e055040ba294719d2f
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`.
+
+The `p` element contains only text, you can wrap the percentage in a `span` element so that it is considered a separate entity from the rest of the text, and it's moved to the right.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Vitamin D 2mcg 10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+Your `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
new file mode 100644
index 0000000000..1f4bf4fb22
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
@@ -0,0 +1,219 @@
+---
+id: 615f8bfe0f30a1a3c340356b
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Create another `p` element, give it the text `Calcium 260mg 20%`. Align `20%` to the right. Below that, create a `p` element with the text `Iron 8mg 45%`, aligning the `45%` to the right.
+
+# --hints--
+
+You should create two new `p` elements at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+```
+
+Your first new `p` element should have the text `Calcium 260mg 20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/));
+```
+
+Your first new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span');
+```
+
+Your first `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold'));
+```
+
+Your first `span` element should wrap the text `20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%');
+```
+
+Your second new `p` element should have the text `Iron 8mg 45%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/));
+```
+
+Your second new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.localName === 'span');
+```
+
+Your second `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
new file mode 100644
index 0000000000..9734aee18e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
@@ -0,0 +1,202 @@
+---
+id: 615f8f1223601fa546e93f31
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Create the final `p` element for your `.daily-value` section. Give it the text `Potassium 235mg 6%`. Align the `6%` text to the right, and remove the bottom border of the `p` element.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the `class` attribute set to `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have the text `Potassium 235mg 6%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+Your `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+    </div>
+    --fcc-editable-region--      
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
new file mode 100644
index 0000000000..c098518ca5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
@@ -0,0 +1,211 @@
+---
+id: 615f905fbd1017a65ca224eb
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Add a medium divider after your `.daily-value` element. Below that new divider, create a `p` element with the `class` attribute set to `note`.
+
+Give the `p` element the following text:
+
+```markup
+* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
+```
+
+# --hints--
+
+You should create a new `div` after your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div');
+```
+
+Your new `div` should have the `class` set to `divider medium`.
+
+```js
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('medium'));
+```
+
+You should create a `p` element after your new `div` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the `class` set to `note`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note'));
+```
+
+Your new `p` element should have the provided text.
+
+```js
+assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    --fcc-editable-region--      
+
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
new file mode 100644
index 0000000000..0dd1ac2ee2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
@@ -0,0 +1,196 @@
+---
+id: 615f94786869e1a7fec54375
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Create a `.note` selector, and set the size of the font to `0.6rem`. Also set the top and bottom margins to `5px`, removing the left and right margins.
+
+# --hints--
+
+You should have a new `.note` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note'));
+```
+
+Your `.note` selector should have a `font-size` property set to `0.6rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem');
+```
+
+Your `.note` selector should have a `margin` property set to `5px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
new file mode 100644
index 0000000000..845b9f2d7f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
@@ -0,0 +1,365 @@
+---
+id: 615f951dff9317a900ef683f
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Give the `.note` selector a left and right padding of `8px`, removing the top and bottom padding. Also set the `text-indent` property to `-8px`.
+
+With these last changes, your nutrition label is complete!
+
+# --hints--
+
+Your `.note` selector should have a `padding` property set to `0 8px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px');
+```
+
+Your `.note` selector should have a `text-indent` property set to `-8px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+  padding: 0 8px;
+  text-indent: -8px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
new file mode 100644
index 0000000000..93d1888599
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
@@ -0,0 +1,153 @@
+---
+id: 635bde33c91c80540eae239b
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+The text `% Daily Value *` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it.
+
+# --hints--
+
+You should have a `.right` selector.
+
+```js
+const hasRight = new __helpers.CSSHelp(document).getStyle('.right');
+assert(hasRight);
+
+```
+
+The `.right` selector should have the `justify-content` property set to `flex-end`.
+
+```js
+const rightJustifyContent = new __helpers.CSSHelp(document).getStyle('.right')?.getPropertyValue('justify-content');
+assert(rightJustifyContent === 'flex-end');
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
new file mode 100644
index 0000000000..e6f009b7e0
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
@@ -0,0 +1,117 @@
+---
+id: 6395d33ab5d91bf317107c48
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Create a `.calories-info h2` selector and remove all margins.
+
+# --hints--
+
+Create a `.calories-info h2` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2'));
+```
+
+Your `.calories-info h2` selector should have a `margin` set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
new file mode 100644
index 0000000000..6a2dbb37aa
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
@@ -0,0 +1,135 @@
+---
+id: 6396e33fe478dd264ebbf278
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Create a new `.calories-info` selector and give it a `display` property set to `flex`. Also give it a `justify-content` property set to `space-between` and `align-items` property set to `flex-end`.
+
+# --hints--
+
+You should create a `.calories-info` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info'));
+```
+
+Your `.calories-info` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.display === 'flex');
+```
+
+Your `.calories-info` selector should have a `justify-content` property set to `space-between`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.justifyContent === 'space-between');
+```
+
+Your `.calories-info` selector should have a `align-items` property set to `flex-end`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.alignItems === 'flex-end');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.calories-info h2 {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
new file mode 100644
index 0000000000..170468d17b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
@@ -0,0 +1,147 @@
+---
+id: 667d1bb875f5961913176069
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Notice how the text `8g` appears centered in the preview. Nest the `span` element containing the text `Total Fat` along with the text `8g`, in an additional `span` element for alignment.
+
+# --hints--
+
+You should have a `span` element around the code `<span class="bold">Total Fat</span> 8g`.
+
+```js
+assert.match(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerHTML, /^<span class=("|')bold\1>Total Fat<\/span> 8g\s?$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+--fcc-editable-region--
+      <p><span class="bold">Total Fat</span> 8g <span class="bold">10%</span></p>
+--fcc-editable-region--
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
new file mode 100644
index 0000000000..3a5d413485
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
@@ -0,0 +1,58 @@
+---
+id: 612e78af05201622d4bab8aa
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Create a `div` element within your `body` element with the `id` set to `piano`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+const div = document.querySelector('div');
+assert.exists(div);
+```
+
+Your `div` should be within your `body` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.parentElement?.localName === 'body');
+```
+
+Your `div` should have the `id` set to `piano`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.getAttribute('id') === 'piano');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
new file mode 100644
index 0000000000..e5c80cf6b4
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
@@ -0,0 +1,60 @@
+---
+id: 612e7d1c29fb872d6384379c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Nest a second `div` within your existing `div`, and set the `class` to be `keys`.
+
+# --hints--
+
+You should create a second `div` element.
+
+```js
+const divDiv = document.querySelectorAll('div');
+assert(divDiv?.length === 2);
+```
+
+Your new `div` element should be within your existing `div` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.length === 1);
+assert(div?.children?.[0]?.localName === 'div');
+```
+
+Your new `div` element should have the `class` set to `keys`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.[0]?.className === 'keys');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="piano">
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
new file mode 100644
index 0000000000..bfbbe7748d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
@@ -0,0 +1,60 @@
+---
+id: 612e804c54d5e7308d7ebe56
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `.keys` element, add seven `div` elements, each with the class `key`.
+
+# --hints--
+
+You should create seven new `div` elements.
+
+```js
+const divDivDiv = document.querySelectorAll('div');
+assert(divDivDiv?.length === 9);
+```
+
+Your seven new `div` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].length === 7);
+assert([...keys?.children].every(child => child?.tagName === 'DIV'));
+```
+
+Your seven new `div` elements should all have the `class` set to `key`.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].every(child => child?.classList?.contains('key')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys"></div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
new file mode 100644
index 0000000000..93e60db476
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
@@ -0,0 +1,95 @@
+---
+id: 612e813b3ba67633222cbe54
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Remember, a `class` attribute can hold multiple values. To differentiate between your white and black keys, add a second `class` value of `black--key` to your second, third, fifth, sixth, and seventh `.key` elements.
+
+# --hints--
+
+Your second `.key` element should also have a `class` of `black--key`.
+
+```js
+const key = document.querySelectorAll('.key')?.[1];
+assert(key?.className?.includes('black--key'));
+```
+
+Your third `.key` should have `black--key` in the `class`.
+
+```js
+const third = document.querySelectorAll('.key')?.[2];
+assert(third?.classList?.contains('black--key'));
+```
+
+Your fifth `.key` should have `black--key` in the `class`.
+
+```js
+const fifth = document.querySelectorAll('.key')?.[4];
+assert(fifth?.classList?.contains('black--key'));
+```
+
+Your sixth `.key` should have `black--key` in the `class`.
+
+```js
+const sixth = document.querySelectorAll('.key')?.[5];
+assert(sixth?.classList?.contains('black--key'));
+```
+
+Your seventh `.key` should have `black--key` in the `class`.
+
+```js
+const seventh = document.querySelectorAll('.key')?.[6];
+assert(seventh?.classList?.contains('black--key'));
+```
+
+You should have five `.black--key` elements.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 5);
+```
+
+You should have seven `.key` elements.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 7);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
new file mode 100644
index 0000000000..d42477e30c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
@@ -0,0 +1,74 @@
+---
+id: 612e8279827a28352ce83a72
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Now, copy the set of seven `.key` elements and paste two additional sets into the `.keys` div.
+
+# --hints--
+
+You should have 21 `.key` elements.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 21);
+```
+
+You should have 15 `.black--key` elements.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 15);
+```
+
+All `.key` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.key')?.length === 21);
+```
+
+All `.black--key` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.black--key')?.length === 15);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
new file mode 100644
index 0000000000..1f4190864e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
@@ -0,0 +1,107 @@
+---
+id: 612e83ec2eca1e370f830511
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Add a `link` element inside your `head` element. Set its `rel` attribute to `stylesheet` and its `href` attribute to `styles.css`.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.isNotNull(document.querySelector('link'));
+```
+
+You should not change your existing `head` tags. Make sure you did not delete the closing tag.
+
+```js
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
+```
+
+You should have one `link` element.
+
+```js
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
+```
+
+Your `link` element should be inside your `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    --fcc-editable-region--
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    --fcc-editable-region--
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e89562043183c86df287c.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
new file mode 100644
index 0000000000..a5dad2247f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
@@ -0,0 +1,77 @@
+---
+id: 612e89562043183c86df287c
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Browsers often apply default margin and padding values to specific elements. To make sure your piano layout displays correctly, you need to reset the box model.
+
+Add an `html` rule selector to your CSS file, and set the `box-sizing` property to `border-box`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have the `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
new file mode 100644
index 0000000000..cd1ca1882c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
@@ -0,0 +1,83 @@
+---
+id: 612e89d254fe5d3df7d6693d
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you've reset the `html` box model, you need to apply this to the elements inside it as well. To do this, set the `box-sizing` property to `inherit`, which ensures that the targeted elements adopt the same value as their parent element.
+
+You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the `::before` and `::after` pseudo-elements.
+
+The `::before` selector creates a pseudo-element which is the first child of the selected element, while the `::after` selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project.
+
+For now, create a CSS selector to target all elements using `*`, and include the pseudo-elements `::before` and `::after`. Set the `box-sizing` property to `inherit`.
+
+# --hints--
+
+You should have a `*, ::before, ::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
+```
+
+Your `*, ::before, ::after` selector should have the `box-sizing` property set to `inherit`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+html {
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
new file mode 100644
index 0000000000..46f69e2b59
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
@@ -0,0 +1,95 @@
+---
+id: 612e8eebe3a6dc3fcc33a66f
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Now target your `#piano` element with an `id` selector. Set its `background-color` property to `#00471b`, the `width` property to `992px` and the `height` property to `290px`.
+
+# --hints--
+
+You should have a `#piano` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano'));
+```
+
+Your `#piano` selector should have the `background-color` property set to `#00471b`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)');
+```
+
+Your `#piano` selector should have a `width` property set to `992px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px');
+```
+
+Your `#piano` selector should have the `height` set to `290px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
new file mode 100644
index 0000000000..85c97c2924
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
@@ -0,0 +1,81 @@
+---
+id: 612e95ef2e4bdf41f69067f9
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Set the `margin` of the `#piano` to `80px auto`.
+
+# --hints--
+
+Your `#piano` selector should have the `margin` property set to `80px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
new file mode 100644
index 0000000000..26f7c9217a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
@@ -0,0 +1,102 @@
+---
+id: 612e96fc87fe8e44f69f7ec5
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Time to style the keys. Below the `#piano` rule, target the `.keys` element with a `class` selector. Give the new rule a `background-color` property of `#040404`, a `width` property of `949px` and a `height` property of `180px`.
+
+# --hints--
+
+You should have a `.keys` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys'));
+```
+
+Your `.keys` selector should have a `background-color` property set to `#040404`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
+```
+
+Your `.keys` selector should have the `width` property set to `949px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
+```
+
+Your `.keys` selector should have a `height` property set to `180px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
new file mode 100644
index 0000000000..d877f447ad
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
@@ -0,0 +1,88 @@
+---
+id: 612e98f3245c98475e49cfc6
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Give the `.keys` a `padding-left` of `2px`.
+
+# --hints--
+
+Your `.keys` selector should have a `padding-left` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
new file mode 100644
index 0000000000..01ea9f27a9
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
@@ -0,0 +1,89 @@
+---
+id: 612e9a21381a1949327512e6
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Move the keys into position by adjusting the `#piano` selector. Set the `padding` property to `90px 20px 0 20px`.
+
+# --hints--
+
+Your `#piano` selector should have the `padding` property set to `90px 20px 0 20px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
new file mode 100644
index 0000000000..0f8ca9d6ba
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
@@ -0,0 +1,117 @@
+---
+id: 612e9d142affc44a453655db
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Time to style the keys themselves. Create a `class` selector for the `.key` elements. Set the `background-color` set to the value `#ffffff`, the `position` property to `relative`, the `width` property to `41px`, and the `height` property to `175px`.
+
+# --hints--
+
+You should have a `.key` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key'));
+```
+
+Your `.key` selector should have a `background-color` property set to `#ffffff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)');
+```
+
+Your `.key` selector should have the `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative');
+```
+
+Your `.key` selector should have a `width` property set to `41px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px');
+```
+
+Your `.key` selector should have a `height` property set to `175px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
new file mode 100644
index 0000000000..28c5419dac
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
@@ -0,0 +1,103 @@
+---
+id: 612e9f1e7e5ccd4fa9ada0be
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Give the `.key` a `margin` of `2px` and a `float` property set to `left`.
+
+# --hints--
+
+Your `.key` selector should have a `margin` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
+```
+
+Your `.key` selector should have a `float` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
new file mode 100644
index 0000000000..f0e8088dd8
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
@@ -0,0 +1,119 @@
+---
+id: 612ea4c4993aba52ab4aa32e
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now it's time to use the pseudo-selectors you set up earlier. To create the black keys, add a new `.key.black--key::after` selector. This targets elements with both `key` and `black--key` classes and selects the pseudo-element created after these elements in the HTML.
+
+In the new selector, set the `background-color` to `#1d1e22`. Also set the `content` property to `""`. This will make the pseudo-elements empty.
+
+The `content` property is used to set or override the content of an element. By default, the pseudo-elements created by the `::before` and `::after` selectors are empty, which means they are not rendered on the page. By setting the `content` property to an empty string `""`, you ensure that the pseudo-elements are rendered, while still appearing empty.
+
+If you would like to experiment, try removing the `background-color` property and setting different values for the `content` property, such as `"♥"`. Remember to undo these changes when you are done so the tests pass.
+
+# --hints--
+
+You should have a `.key.black--key::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
+```
+
+Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
+```
+
+Your `.key.black--key::after` selector should have a `content` property set to `""`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
new file mode 100644
index 0000000000..a7340d458d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
@@ -0,0 +1,110 @@
+---
+id: 612ea97df5742154772f312e
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Give the `.key.black--key::after` a `position` property set to `absolute` and a `left` property set to `-18px`.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute');
+```
+
+Your `.key.black--key::after` selector should have a `left` property set to `-18px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
new file mode 100644
index 0000000000..72dbf9cc19
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
@@ -0,0 +1,112 @@
+---
+id: 612ead8788d28655ef8db056
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+For the `.key.black--key::after`, set the `width` to `32px` and the `height` to `100px`.
+
+# --hints--
+
+Your `.key.black--key::after` should have a `width` property set to `32px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px');
+```
+
+Your `.key.black--key::after` should have a `height` property set to `100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
new file mode 100644
index 0000000000..37d6779238
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
@@ -0,0 +1,144 @@
+---
+id: 612eaf56b7ba3257fdbfb0db
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The piano needs the freeCodeCamp logo to make it official.
+
+Add an `img` element before your `.keys` element. Give the `img` a `class` of `logo`, and set the `src` to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Give it an `alt` text of `freeCodeCamp Logo`.
+
+# --hints--
+
+You should add a new `img` element.
+
+```js
+assert(document.querySelectorAll('img')?.length === 1);
+```
+
+Your `img` element should come before your first `.keys` element.
+
+```js
+const img = document.querySelector('img');
+assert(img?.nextElementSibling?.className === 'keys');
+assert(img?.previousElementSibling === null);
+```
+
+Your `img` element should have a `class` set to `logo`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.className === 'logo');
+```
+
+Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
+```
+
+Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo');
+```
+
+Remember that casing and spelling matter.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+    --fcc-editable-region--
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
new file mode 100644
index 0000000000..2e461ef48a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
@@ -0,0 +1,129 @@
+---
+id: 612eb4893b63c75bb9251ddf
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Start styling the logo by creating a `.logo` selector. Set the `width` to `200px`, a `position` of `absolute` and a `top` set to `23px`.
+
+# --hints--
+
+You should have a `.logo` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo'));
+```
+
+Your `.logo` selector should have a `width` property set to `200px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px');
+```
+
+Your `.logo` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute');
+```
+
+Your `.logo` selector should have a `top` property set to `23px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
new file mode 100644
index 0000000000..dc900814fd
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
@@ -0,0 +1,115 @@
+---
+id: 612eb75153591b5e3b1ab65e
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `img` element needs its parent to have a `position` set as a point of reference. Set the `position` of the `#piano` selector to `relative`.
+
+# --hints--
+
+Your `#piano` selector should have a `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
new file mode 100644
index 0000000000..62dbbd5686
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
@@ -0,0 +1,116 @@
+---
+id: 612eb7ca8c275d5f89c73333
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+To soften the sharp edges of the piano and its keys, start by giving the `#piano` a `border-radius` of `10px`.
+
+# --hints--
+
+Your `#piano` selector should have a `border-radius` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
new file mode 100644
index 0000000000..777b6e023b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
@@ -0,0 +1,117 @@
+---
+id: 612eb8e984cd73677a92b7e9
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Give the `.key` selector a `border-radius` value of `0 0 3px 3px`.
+
+# --hints--
+
+Your `.key` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+--fcc-editable-region--
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
new file mode 100644
index 0000000000..80785c1dbf
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
@@ -0,0 +1,118 @@
+---
+id: 612eb934f64a4d6890a45518
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Give the `.key.black--key::after` selector a `border-radius` of `0 0 3px 3px` to match the keys.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+--fcc-editable-region--
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
new file mode 100644
index 0000000000..a0c170c27e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
@@ -0,0 +1,139 @@
+---
+id: 612ebcba99bfa46a15370b11
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+The `@media` at-rule, also known as a media query, is used to conditionally apply CSS. Media queries are commonly used to apply CSS based on the viewport width using the `max-width` and `min-width` properties.
+
+In the below example the padding is applied to the `.card` class when the viewport is `960px` wide and below.
+
+```css
+@media (max-width: 960px) {
+  .card {
+    padding: 2rem;
+  }
+}
+```
+
+Add a media query that will be applied when the viewport is `768px` wide and below.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
+```
+
+Your `@media` query should have a `max-width` of `768px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
new file mode 100644
index 0000000000..3291a4dac2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
@@ -0,0 +1,133 @@
+---
+id: 612ebe7fe6d07e6b76d1cae2
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Add a new `#piano` selector within your `@media` query, and set the `width` to `358px`.
+
+# --hints--
+
+Your `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `358px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '358px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
new file mode 100644
index 0000000000..5cfe1e3cac
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
@@ -0,0 +1,136 @@
+---
+id: 612ebedec97e096c8bf64999
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Within the `@media` query, add a `.keys` selector and set the `width` to `318px`.
+
+# --hints--
+
+
+Your `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `318px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '318px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
new file mode 100644
index 0000000000..0dbf2d1e3c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
@@ -0,0 +1,139 @@
+---
+id: 612ebf9a210f2b6d77001e68
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Now add a `.logo` selector to the `@media` query, and set the `width` property to `150px`.
+
+# --hints--
+
+Your `@media` rule should have a `.logo` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo);
+```
+
+Your new `.logo` selector should have a `width` of `150px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo?.style.width === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
new file mode 100644
index 0000000000..a32cab125e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
@@ -0,0 +1,133 @@
+---
+id: 612ec0490ae8626e9adf82e4
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+You may have noticed that the keys collapse when the browser window is smaller than `768px`. To address this issue, set `overflow` to `hidden` in the first `.keys` selector. This property will hide any elements that are pushed outside the defined `width` of `.keys`, preventing unwanted layout changes.
+
+# --hints--
+
+Your original `.keys` selector should have the `overflow` property set to `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+--fcc-editable-region--
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
new file mode 100644
index 0000000000..097b595db2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
@@ -0,0 +1,154 @@
+---
+id: 612ec19d5268da7074941f84
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Logical operators can be used to construct more complex media queries. The `and` logical operator is used to query two media conditions.
+
+For example, a media query that targets a display width between 500px and 1000px would be:
+
+```css
+@media (min-width: 500px) and (max-width: 1000px){
+
+}
+```
+
+Add another `@media` rule to apply if the browser window is wider than `769px` but smaller than `1199px`.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
+```
+
+Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`.
+
+```js
+const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText;
+assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
new file mode 100644
index 0000000000..de83d05ac4
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
@@ -0,0 +1,288 @@
+---
+id: 612ec29c84b9a6718b1f5cec
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+For the new `@media` rule, set the `width` of the `#piano` to `675px` and the `width` of the `.keys` to `633px`.
+
+With that, your piano is complete!
+
+# --hints--
+
+Your second `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `675px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '675px');
+```
+
+Your second `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `633px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '633px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+@media (max-width: 1199px) and (min-width: 769px) {
+
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+@media (max-width: 1199px) and (min-width: 769px) {
+  #piano {
+    width: 675px;
+  }
+
+  .keys {
+    width: 633px;
+  }
+}
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
new file mode 100644
index 0000000000..9d986165f5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
@@ -0,0 +1,36 @@
+---
+id: 66fbcdfed6848e48947dbbc9
+title: Step 1
+challengeType: 1
+dashedName: step-1
+---
+
+# --description--
+
+In this workshop, you will create a recipe tracker using JavaScript objects.
+
+Start by creating an empty array named `recipes`. This is the array you'll push the recipe objects into later.
+
+# --hints--
+
+You should create an array named `recipes`.
+
+```js
+assert.isArray(recipes)
+```
+
+Your `recipes` array should be empty.
+
+```js
+assert.isEmpty(recipes)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
new file mode 100644
index 0000000000..0186623c8b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
@@ -0,0 +1,81 @@
+---
+id: 66fbcf750a62784cf11f562d
+title: Step 2
+challengeType: 1
+dashedName: step-2
+---
+
+# --description--
+
+Create an object named `recipe1`. Inside the `recipe1` object, create a `name` property with the value `"Spaghetti Carbonara"`.
+
+Also inside the `recipe1` object, create an `ingredients` property with an array as the value. The array should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` inside it.
+
+Create another `ratings` property with array value. The array should have `4`, `5`, `4`, and `5` inside it.
+
+# --hints--
+
+You should create an object named `recipe1`.
+
+```js
+assert.isObject(recipe1)
+```
+
+Your `recipe1` object should have a `name` property.
+
+```js
+assert.property(recipe1, 'name');
+```
+
+Your `name` property should be set to `Spaghetti Carbonara`.
+
+```js
+assert.equal(recipe1.name, 'Spaghetti Carbonara');
+```
+
+Your `recipe1` object should have an `ingredients` property.
+
+```js
+assert.property(recipe1, 'ingredients');
+```
+
+Your `ingredients` property should have an array value.
+
+```js
+assert.isArray(recipe1.ingredients)
+```
+
+The array value of your `ingredients` property should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` in it.
+
+```js
+assert.deepEqual(recipe1.ingredients, ["spaghetti", "Parmesan cheese", "pancetta", "black pepper"]);
+```
+
+Your `recipe1` object should have a `ratings` property.
+
+```js
+assert.property(recipe1, "ratings");
+```
+
+Your `ratings` property should have an array value.
+
+```js
+assert.isArray(recipe1.ratings)
+```
+
+The array value of your `ratings` property should have `4`, `5`, `4`, and `5` in it.
+
+```js
+assert.deepEqual(recipe1.ratings, [4, 5, 4, 5]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
new file mode 100644
index 0000000000..77dac4da29
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
@@ -0,0 +1,152 @@
+---
+id: 66fbcf750a62784cf11f562e
+title: Step 4
+challengeType: 1
+dashedName: step-4
+---
+
+# --description--
+
+Create another `recipe2` object with the following properties and values:
+
+| Key                | Value                                                                   |
+| ------------------ | ----------------------------------------------------------------------- |
+| `name`             | `Chicken Curry`                                                         |
+| `ingredients`      | `["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]` |
+| `ratings`          | `[4, 5, 5, 5]`                                                          |
+| `cookingTime`      | `42`                                                                    |
+| `totalIngredients` | `null`                                                                  |
+| `difficultyLevel`  | `''`                                                                    |
+| `averageRating`    | `null`                                                                  |
+
+# --hints--
+
+You should create an object named `recipe2`.
+
+```js
+assert.isObject(recipe2)
+```
+
+Your `recipe2` object should have a `name` property.
+
+```js
+assert.property(recipe2, "name");
+```
+
+Your `name` property should be set to `Chicken Curry`.
+
+```js
+assert.equal(recipe2.name, "Chicken Curry");
+```
+
+Your `recipe2` object should have an `ingredients` property.
+
+```js
+assert.property(recipe2, "ingredients");
+```
+
+Your `ingredients` property should have an array value.
+
+```js
+assert.isArray(recipe2.ingredients)
+```
+
+The array value of your `ingredients` property should have `chicken breast`, `coconut milk`, `curry powder`, `onion` and `garlic` in it.
+
+```js
+assert.deepEqual(recipe2.ingredients, ["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]);
+```
+
+Your `recipe2` object should have a `ratings` property.
+
+```js
+assert.property(recipe2, "ratings");
+```
+
+Your `ratings` property should have an array value.
+
+```js
+assert.isArray(recipe2.ratings)
+```
+
+The array value of your `ratings` property should have `4`, `5`, `5`, and `5` in it.
+
+```js
+assert.deepEqual(recipe2.ratings, [4, 5, 5, 5]);
+```
+
+Your `recipe2` object should have a `cookingTime` property.
+
+```js
+assert.property(recipe2, "cookingTime");
+```
+
+Your `cookingTime` property value should be a number.
+
+```js
+assert.isNumber(recipe2.cookingTime);
+```
+
+Your `cookingTime` property should be set to `42`.
+
+```js
+assert.equal(recipe2.cookingTime, 42);
+```
+
+Your `recipe2` object should have a `totalIngredients` property.
+
+```js
+assert.property(recipe2, "totalIngredients");
+```
+
+Your `totalIngredients` property should be set to `null`.
+
+```js
+assert.isNull(recipe2.totalIngredients);
+```
+
+Your `recipe2` object should have a `difficultyLevel` property.
+
+```js
+assert.property(recipe2, "difficultyLevel");
+```
+
+Your `difficultyLevel` property should be set to an empty string.
+
+```js
+assert.deepEqual(recipe2.difficultyLevel, "");
+```
+
+Your `recipe2` object should have an `averageRating` property.
+
+```js
+assert.property(recipe2, "averageRating");
+```
+
+Your `averageRating` property should be set to `null`.
+
+```js
+assert.isNull(recipe2.averageRating);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
new file mode 100644
index 0000000000..a010c6c140
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
@@ -0,0 +1,98 @@
+---
+id: 66fbcf750a62784cf11f5630
+title: Step 6
+challengeType: 1
+dashedName: step-6
+---
+
+# --description--
+
+A third `recipe3` object has been filled in for you. It has the same properties as `recipe1` and `recipe2`.
+
+You should now push the three objects into the `recipes` array. To do thus, you can use the `push()` method.
+
+Use the `push()` method to push all the recipe objects into the `recipes` array. Make sure to push `recipe1`, `recipe2`, and `recipe3` in that order.
+
+# --hints--
+
+You should remove `recipe1Name` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe1Name\s*=\s*recipe1\.name;?\s*console\.log\(recipe1Name\);?/)
+```
+
+You should remove `recipe2Name` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe2Name\s*=\s*recipe2\.name;?\s*console\.log\(recipe2Name\);?/)
+```
+
+You should remove `recipe1CookingTime` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe1CookingTime\s*=\s*recipe1\.cookingTime;?\s*console\.log\(recipe1CookingTime\);?/)
+```
+
+You should remove `recipe2CookingTime` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe2CookingTime\s*=\s*recipe2\.cookingTime;?\s*console\.log\(recipe2CookingTime\);?/)
+```
+
+You should push all the recipes objects into the `recipes` array. Make sure to push them in the order they are declared.
+
+```js
+assert.deepEqual(recipes, [recipe1, recipe2, recipe3]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+const recipe1Name = recipe1.name;
+console.log(recipe1Name);
+
+const recipe2Name = recipe2.name;
+console.log(recipe2Name);
+
+const recipe1CookingTime = recipe1.cookingTime;
+console.log(recipe1CookingTime);
+
+const recipe2CookingTime = recipe2.cookingTime;
+console.log(recipe2CookingTime);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
new file mode 100644
index 0000000000..292feedbae
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
@@ -0,0 +1,104 @@
+---
+id: 66fbcf750a62784cf11f5631
+title: Step 7
+challengeType: 1
+dashedName: step-7
+---
+
+# --description--
+
+Now, you should work on calculating the `averageRating`, `totalIngredients`, and the `difficultyLevel` for each recipe in the `recipes` array.
+
+Start by creating a `getAverageRating` function that takes a `ratings` parameter. Inside the function, calculate the average rating using the items in the `ratings` property of each recipe.
+
+Your `getAverageRating` function must return a number.
+
+# --hints--
+
+You should create a `getAverageRating` function.
+
+```js
+assert.isFunction(getAverageRating)
+```
+
+Your `getAverageRating` function should have a `ratings` parameter.
+
+```js
+assert.match(getAverageRating.toString(), /ratings/);
+```
+
+Your `getAverageRating` function should return a number.
+
+```js
+assert.isNumber(getAverageRating(recipe1.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.00`.
+
+```js
+assert.isNumber(getAverageRating(recipe2.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.75`.
+
+```js
+assert.isNumber(getAverageRating(recipe2.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.50`.
+
+```js
+assert.isNumber(getAverageRating(recipe1.ratings))
+```
+
+Your `getAverageRating` function should return the correct rating.
+
+```js
+assert.equal(getAverageRating(recipe1.ratings), 4.50)
+assert.equal(getAverageRating(recipe2.ratings), 4.75)
+assert.equal(getAverageRating(recipe3.ratings), 4.00)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
new file mode 100644
index 0000000000..ace358ab7f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
@@ -0,0 +1,105 @@
+---
+id: 66fbcf750a62784cf11f5632
+title: Step 8
+challengeType: 1
+dashedName: step-8
+---
+
+# --description--
+
+Create a `getTotalIngredients` function that takes an `ingredients` parameter. This function should return the number of ingredients for each recipe by returning the length of the `ingredients` array.
+
+# --hints--
+
+You should create a `getTotalIngredients` function.
+
+```js
+assert.isFunction(getTotalIngredients)
+```
+
+You `getTotalIngredients` function should have an `ingredients` parameter.
+
+```js
+assert.match(getTotalIngredients.toString(), /ingredients/);
+```
+
+Your `getTotalIngredients` function should return a number.
+
+```js
+assert.isNumber(getTotalIngredients(recipe1.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `5`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe2.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `3`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe3.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `4`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe1.ingredients))
+```
+
+Your `getTotalIngredients` function should return the correct number of ingredients.
+
+```js
+assert.equal(getTotalIngredients(recipe1.ingredients), 4)
+assert.equal(getTotalIngredients(recipe2.ingredients), 5)
+assert.equal(getTotalIngredients(recipe3.ingredients), 3)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
new file mode 100644
index 0000000000..c686ff0e9a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
@@ -0,0 +1,106 @@
+---
+id: 66fbcf750a62784cf11f5633
+title: Step 9
+challengeType: 1
+dashedName: step-9
+---
+
+# --description--
+
+Create a `getDifficultyLevel` function that takes `cookingTime` as a parameter.
+
+If `cookingTime` is less than `30`, the function should return `"easy"`. If it is less than or equal to `60`, the function should return `"medium"`. Otherwise, the function should return `"hard"`.
+
+# --hints--
+
+You should create a `getDifficultyLevel` function.
+
+```js
+assert.isFunction(getDifficultyLevel)
+```
+
+You `getDifficultyLevel` function should have a `cookingTime` parameter.
+
+```js
+assert.match(getDifficultyLevel.toString(), /cookingTime/);
+```
+
+Your `getDifficultyLevel` function should return `"easy"` when the `cookingTime` is less than or equal to `30`.
+
+```js
+assert.strictEqual(getDifficultyLevel(10), "easy")
+assert.strictEqual(getDifficultyLevel(20), "easy")
+assert.strictEqual(getDifficultyLevel(29), "easy")
+assert.strictEqual(getDifficultyLevel(30), "easy")
+```
+
+Your `getDifficultyLevel` function should return `"medium"` when the `cookingTime` is greater than `31` and less than `60`.
+
+```js
+assert.strictEqual(getDifficultyLevel(31), "medium")
+assert.strictEqual(getDifficultyLevel(40), "medium")
+assert.strictEqual(getDifficultyLevel(50), "medium")
+assert.strictEqual(getDifficultyLevel(60), "medium")
+```
+
+Your `getDifficultyLevel` function should return `"hard"` when the `cookingTime` is greater than `60`.
+
+```js
+assert.strictEqual(getDifficultyLevel(61), "hard")
+assert.strictEqual(getDifficultyLevel(65), "hard")
+assert.strictEqual(getDifficultyLevel(70), "hard")
+assert.strictEqual(getDifficultyLevel(75), "hard")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
new file mode 100644
index 0000000000..38ec100fd5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
@@ -0,0 +1,133 @@
+---
+id: 66fbcf750a62784cf11f5634
+title: Step 10
+challengeType: 1
+dashedName: step-10
+---
+
+# --description--
+
+It's time to test each of the functions. You can use any of the recipes for this, but let's start with `recipe1`.
+
+Create three new variables: `recipe1AverageRating`, `recipe1TotalIngredients`, and `recipe1DifficultyLevel`. Assign them the values by calling the corresponding function for each variable and passing in the appropriate `recipe1` property.
+
+Finally, log each variable to the console to see the results.
+
+# --hints--
+
+You should create a `recipe1AverageRating` variable.
+
+```js
+assert.isNotNull(recipe1AverageRating)
+```
+
+Your `recipe1AverageRating` variable should be set to `getAverageRating(recipe1.ratings)`.
+
+```js
+assert.equal(recipe1AverageRating, getAverageRating(recipe1.ratings));
+```
+
+You should log `recipe1AverageRating` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1AverageRating\);?/)
+```
+
+You should create a `recipe1TotalIngredients` variable.
+
+```js
+assert.isNotNull(recipe1TotalIngredients)
+```
+
+Your `recipe1TotalIngredients` variable should be set to `getTotalIngredients(recipe1.ingredients)`.
+
+```js
+assert.equal(recipe1TotalIngredients, getTotalIngredients(recipe1.ingredients));
+```
+
+You should log `recipe1TotalIngredients` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1TotalIngredients\);?/)
+```
+
+You should create a `recipe1DifficultyLevel` variable.
+
+```js
+assert.isNotNull(recipe1DifficultyLevel)
+```
+
+Your `recipe1DifficultyLevel` variable should be set to `getDifficultyLevel(recipe1.cookingTime)`.
+
+```js
+assert.equal(recipe1DifficultyLevel, getDifficultyLevel(recipe1.cookingTime));
+```
+
+You should log `recipe1DifficultyLevel` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1DifficultyLevel\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
new file mode 100644
index 0000000000..3a34c4658f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
@@ -0,0 +1,124 @@
+---
+id: 66fbcf750a62784cf11f5635
+title: Step 11
+challengeType: 1
+dashedName: step-11
+---
+
+# --description--
+
+You can now fill in each item of the `recipes` array with values for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties.
+
+To do this, access the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of each recipe object and assign them the results of the corresponding function calls with the appropriate arguments.
+
+For now, access the `averageRating`, `totalIngredients`, and `difficultyLevel` of `recipe1` and set them to the appropriate function calls and arguments.
+
+# --hints--
+
+You should access the `averageRating` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.averageRating/)
+```
+
+You should set the `averageRating` of `recipe1` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter.
+
+```js
+assert.match(code, /recipe1\.averageRating\s*=\s*getAverageRating\(recipe1\.ratings\);?/)
+```
+
+You should access the `totalIngredients` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.totalIngredients/)
+```
+
+You should set the `totalIngredients` of `recipe1` you accessed to the calling of `getTotalIngredients` with `recipe1.ingredients` as its parameter.
+
+```js
+assert.match(code, /recipe1\.totalIngredients\s*=\s*getTotalIngredients\(recipe1\.ingredients\);?/)
+```
+
+You should access the `difficultyLevel` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.difficultyLevel/)
+```
+
+You should set the `difficultyLevel` of `recipe1` you accessed to the calling of `getDifficultyLevel` with `recipe1.cookingTime` as its parameter.
+
+```js
+assert.match(code, /recipe1\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe1\.cookingTime\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
new file mode 100644
index 0000000000..bd9aceddf5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
@@ -0,0 +1,124 @@
+---
+id: 66fbcf750a62784cf11f5636
+title: Step 12
+challengeType: 1
+dashedName: step-12
+---
+
+# --description--
+
+Repeat the process for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe2`.
+
+# --hints--
+
+You should access the `averageRating` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.averageRating/)
+```
+
+You should set the `averageRating` of `recipe2` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter.
+
+```js
+assert.match(code, /recipe2\.averageRating\s*=\s*getAverageRating\(recipe2\.ratings\);?/)
+```
+
+You should access the `totalIngredients` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.totalIngredients/)
+```
+
+You should set the `totalIngredients` of `recipe2` you accessed to the calling of `getTotalIngredients` with `recipe2.ingredients` as its parameter.
+
+```js
+assert.match(code, /recipe2\.totalIngredients\s*=\s*getTotalIngredients\(recipe2\.ingredients\);?/)
+```
+
+You should access the `difficultyLevel` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.difficultyLevel/)
+```
+
+You should set the `difficultyLevel` of `recipe2` you accessed to the calling of `getDifficultyLevel` with `recipe2.cookingTime` as its parameter.
+
+```js
+assert.match(code, /recipe2\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe2\.cookingTime\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
new file mode 100644
index 0000000000..032cb8cd78
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
@@ -0,0 +1,186 @@
+---
+id: 66fbcf750a62784cf11f5637
+title: Step 13
+challengeType: 1
+dashedName: step-13
+---
+
+# --description--
+
+The `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe3` have been filled in for you.
+
+Now, log the `recipes` array to the console to see all its items filled with the updated values.
+
+With that, your recipes tracker project is complete.
+
+# --hints--
+
+You should log the `recipes` array to the console.
+
+```js
+assert.match(code, /console\.log\(recipes\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+recipe2.averageRating = getAverageRating(recipe2.ratings);
+recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients);
+recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime);
+
+recipe3.averageRating = getAverageRating(recipe3.ratings);
+recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients)
+recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime)
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return (total / ratings.length).toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(`Recipe 1 Average Rating ${recipe1AverageRating}`);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(`Recipe 1 Total Ingredients: ${recipe1TotalIngredients}`);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(`Recipe 1 Difficulty: ${recipe1DifficultyLevel}`);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+recipe2.averageRating = getAverageRating(recipe2.ratings);
+recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients);
+recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime);
+
+recipe3.averageRating = getAverageRating(recipe3.ratings);
+recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients)
+recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime)
+
+console.log(recipes);
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
new file mode 100644
index 0000000000..193d3d702f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
@@ -0,0 +1,86 @@
+---
+id: 66ff02792b3042a2b811f475
+title: Step 3
+challengeType: 1
+dashedName: step-3
+---
+
+# --description--
+
+Add the following properties to the `recipe1` object:
+
+| Key                | Value  |
+| ------------------ | ------ |
+| `cookingTime`      | `22`   |
+| `totalIngredients` | `null` |
+| `difficultyLevel`  | `""`   |
+| `averageRating`    | `null` |
+
+The properties with `null` and empty string values will be updated later after you calculate them.
+
+# --hints--
+
+Your `recipe1` object should have a `cookingTime` property.
+
+```js
+assert.property(recipe1, "cookingTime");
+```
+
+Your `cookingTime` property should be set to `22`.
+
+```js
+assert.equal(recipe1.cookingTime, 22);
+```
+
+Your `recipe1` object should have a `totalIngredients` property.
+
+```js
+assert.property(recipe1, "totalIngredients");
+```
+
+Your `totalIngredients` property should be set to `null`.
+
+```js
+assert.isNull(recipe1.totalIngredients);
+```
+
+Your `recipe1` object should have a `difficultyLevel` property.
+
+```js
+assert.property(recipe1, "difficultyLevel");
+```
+
+Your `difficultyLevel` property should be set to an empty string.
+
+```js
+assert.deepEqual(recipe1.difficultyLevel, "");
+```
+
+Your `recipe1` object should have a `averageRating` property.
+
+```js
+assert.property(recipe1, "averageRating");
+```
+
+Your `averageRating` property should be set to `null`.
+
+```js
+assert.isNull(recipe1.averageRating);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  ratings: [4, 5, 4, 5],
+--fcc-editable-region--
+
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
new file mode 100644
index 0000000000..6e051af223
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
@@ -0,0 +1,135 @@
+---
+id: 670e4f45f7116c0f216a5177
+title: Step 5
+challengeType: 1
+dashedName: step-5
+---
+
+# --description--
+
+Before we move on, you should practice how to access properties from an object.
+
+You can use either dot (`.`) or bracket (`[]`) notation to do this. Here's an example:
+
+```js
+const person = {
+  name: 'John',
+  age: 30,
+  job: 'Software Engineer'
+};
+
+console.log(person.name); // John
+console.log(person['age']);  // 30
+```
+
+Access the `name` properties of both `recipe1` and `recipe2`, and assign them to the variables `recipe1Name` and `recipe2Name`, respectively.
+
+Next, access the `cookingTime` properties of both recipes and assign them to the variables `recipe1CookingTime` and `recipe2CookingTime`, respectively.
+
+Make sure all the variables you created are logged to the console.
+
+# --hints--
+
+You should create a `recipe1Name` variable.
+
+```js
+assert.isNotNull(recipe1Name)
+```
+
+You should set your `recipe1Name` variable to the accessment of the `name` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.name|recipe1\[("|'|`)name("|'|`)\]/)
+```
+
+You should log `recipe1Name` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1Name\)/)
+```
+
+You should create a `recipe2Name` variable.
+
+```js
+assert.isNotNull(recipe2Name)
+```
+
+You should set your `recipe2Name` variable to the accessment of the `name` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.name|recipe2\[("|'|`)name("|'|`)\]/)
+```
+
+You should log `recipe2Name` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe2Name\)/)
+```
+
+You should create a `recipe1CookingTime` variable.
+
+```js
+assert.isNotNull(recipe1CookingTime)
+```
+
+You should set your `recipe1CookingTime` variable to the accessment of the `cookingTime` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.cookingTime|recipe1\[("|'|`)cookingTime("|'|`)\]/)
+```
+
+You should log `recipe1CookingTime` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1CookingTime\)/)
+```
+
+You should create a `recipe2CookingTime` variable.
+
+```js
+assert.isNotNull(recipe2CookingTime)
+```
+
+You should set your `recipe2CookingTime` variable to the accessment of the `cookingTime` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.cookingTime|recipe2\[("|'|`)cookingTime("|'|`)\]/)
+```
+
+You should log `recipe2CookingTime` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe2CookingTime\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
new file mode 100644
index 0000000000..f86b2c6d43
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996b
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Begin your project by adding an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` within the `body` element.
+
+# --hints--
+
+Your code should have an `img` element.
+
+```js
+assert(document.querySelectorAll('img').length === 1);
+```
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
new file mode 100644
index 0000000000..ba70369909
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
@@ -0,0 +1,42 @@
+---
+id: 60a3e3396c7b40068ad6996c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+In the previous lecture videos about the CSS box model, you learned that every HTML element is treated as a box with four areas.
+
+Imagine you receive a box from your favorite online retailer — the content is the item in the box, or in your case, a header, paragraph, or image element.
+
+Change the `src` attribute in the `<img>` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`.
+
+# --hints--
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
new file mode 100644
index 0000000000..53f6395c12
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
@@ -0,0 +1,41 @@
+---
+id: 60a3e3396c7b40068ad6996d
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it.
+
+Think of the border like the cardboard box your item was shipped in.
+
+Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+# --hints--
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
new file mode 100644
index 0000000000..070dc57d06
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Margin is the area outside of the box, and can be used to control the space between other boxes or elements.
+
+Here the bottom element has a larger top margin, pushing it further down the page.
+
+Now that you quickly reviewed the CSS box model, let's get started on the Rothko painting.
+
+Remove the `<img>` element.
+
+# --hints--
+
+You should not have an `img` element in your code.
+
+```js
+assert(document.querySelector('img') === null);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
new file mode 100644
index 0000000000..33aa91b710
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
@@ -0,0 +1,47 @@
+---
+id: 60a3e3396c7b40068ad6996f
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Add a `div` element in the `body`.
+
+Set the `class` attribute equal to `canvas`.
+
+This will act as the canvas for your painting.
+
+# --hints--
+
+Your code should have a `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 1)
+```
+
+The `div` element should have a `class` with the value `canvas`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('canvas'))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
new file mode 100644
index 0000000000..4ef6fabe87
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
@@ -0,0 +1,53 @@
+---
+id: 60a3e3396c7b40068ad69970
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Before you can start styling the `div` you added, you need to link your CSS to your HTML.
+
+Add a `link` element to link your `styles.css` file. Set the `href` to `styles.css`, and remember to set the `rel` attribute to `stylesheet`.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert(/<link/.test(code))
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert.match(code, /<link.*?rel=('|"|`)stylesheet\1/)
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link.*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
new file mode 100644
index 0000000000..286d537b9e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69971
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Time for CSS.
+
+Even though your `<div>` has no text, it's still treated as a box with content. Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels. Here's a CSS rule that sets the width of the class `card` to 300 pixels:
+
+```css
+.card {
+  width: 300px;
+}
+```
+
+# --hints--
+
+Your code should have a `.canvas` selector.
+
+```js
+const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas');
+assert(hasCanvas)
+```
+
+You should set the `width` property to `500px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px')
+assert(hasWidth);
+```
+
+Your `.canvas` element should have a `width` of `500px`.
+
+```js
+const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width');
+assert(width === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
new file mode 100644
index 0000000000..9151276320
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
@@ -0,0 +1,54 @@
+---
+id: 60a3e3396c7b40068ad69972
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Add the `height` property with the value `600px` to your `.canvas` rule.
+
+# --hints--
+
+You should set the `height` property to `600px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px');
+assert(hasHeight);
+```
+
+Your `.canvas` element should have a `height` of `600px`.
+
+```js
+const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height');
+assert(canvasHeight === '600px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
new file mode 100644
index 0000000000..66a17e01da
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
@@ -0,0 +1,55 @@
+---
+id: 60a3e3396c7b40068ad69973
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Change the `background-color` of the canvas to `#4d0f00`.
+
+# --hints--
+
+You should set the `background-color` property to `#4d0f00`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)');
+assert(hasBackground);
+```
+
+Your `.canvas` element should have a `background-color` of `#4d0f00`.
+
+```js
+const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color');
+assert(canvasBackground === 'rgb(77, 15, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
new file mode 100644
index 0000000000..45d4fc208c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69974
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Every painting needs a frame.
+
+Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class.
+# --hints--
+
+You should add a new `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 2)
+```
+
+Your `.canvas` element should be nested in the new `div` element.
+
+```js
+assert(document.querySelector('.canvas').parentElement.tagName === 'DIV');
+```
+
+Your new `div` should have a `class` with the value `frame`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('frame'));
+```
+
+Your new `div` should be within your `body` element.
+
+```js
+assert(document.querySelector('div').parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+--fcc-editable-region--
+
+    <div class="canvas">
+    </div>
+
+--fcc-editable-region--
+  </body>
+  ```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
new file mode 100644
index 0000000000..8943f3095f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69975
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Write a new rule using the `.frame` class selector.
+
+Use the `border` shorthand declaration to give the `.frame` element a solid, black border with a width of `50px`.
+
+# --hints--
+
+Your code should have a `.frame` selector.
+
+```js
+const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame');
+assert(hasFrame);
+```
+
+You should set the `border` property to `50px solid black`.
+
+```js
+const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black');
+assert(hasBorder);
+```
+
+Your `.frame` element should have a `50px solid black` `border`.
+
+```js
+const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border');
+assert(frameBorder === '50px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
new file mode 100644
index 0000000000..67d334708d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
@@ -0,0 +1,64 @@
+---
+id: 60a3e3396c7b40068ad69976
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+The frame is much too wide.
+
+In `.frame`, set its `width` to 500 pixels.
+
+# --hints--
+
+You should set the `width` property to `500px`.
+
+```js
+const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px');
+assert(widthFilter.length === 2);
+```
+
+Your `.frame` element should have a `width` of `500px`.
+
+```js
+const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width');
+assert(frameWidth === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
new file mode 100644
index 0000000000..bba60c94f2
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
@@ -0,0 +1,65 @@
+---
+id: 60a3e3396c7b40068ad69977
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Use padding to adjust the spacing within an element.
+
+In `.frame`, use the `padding` shorthand property to increase the space between the `.frame` and `.canvas` elements by `50px`. The shorthand will increase space in the top, bottom, left, and right of the element's border and canvas within.
+
+# --hints--
+
+You should set the `padding` property to `50px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px');
+assert(hasPadding);
+```
+
+Your `.frame` element should have a `padding` value of `50px`.
+
+```js
+const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding');
+assert(framePadding === '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
new file mode 100644
index 0000000000..5bdf662a15
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
@@ -0,0 +1,66 @@
+---
+id: 60a3e3396c7b40068ad69978
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Use margins to adjust the spacing outside of an element.
+
+Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. This will move the frame down 20 pixels and horizontally center it on the page.
+
+# --hints--
+
+You should set the `margin` property to `20px auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto');
+assert(hasMargin);
+```
+
+Your `.frame` element should have a `margin` value of `20px auto`.
+
+```js
+const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin');
+assert(frameMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
new file mode 100644
index 0000000000..cbbaa5bd1d
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad69979
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Add a new `div` element inside of your `.canvas` element.
+
+Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 3);
+```
+
+You should nest the new `div` element within your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[0].tagName === 'DIV');
+```
+
+Your new `div` should have a `class` attribute with a value `one`.
+
+```js
+assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
new file mode 100644
index 0000000000..de2c2b089c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997a
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Write a new rule that targets `.one` and set its `width` to 425 pixels.
+
+# --hints--
+
+You should have a `.one` selector.
+
+```js
+const hasOne = new __helpers.CSSHelp(document).getStyle('.one');
+assert(hasOne);
+```
+
+You should set the `width` property to `425px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px');
+assert(hasWidth);
+```
+
+Your `.one` element should have a `width` value of `425px`.
+
+```js
+const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width');
+assert(oneWidth === '425px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
new file mode 100644
index 0000000000..aa9033dc8b
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
@@ -0,0 +1,70 @@
+---
+id: 60a3e3396c7b40068ad6997b
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Now set the `height` for `.one` to 150 pixels.
+
+# --hints--
+
+You should set the `height` property to `150px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px');
+assert(hasHeight);
+```
+
+Your `.one` element should have a `height` value of `150px`.
+
+```js
+const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height');
+assert(oneHeight === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
new file mode 100644
index 0000000000..bec4b8fdf3
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad6997c
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Set the `background-color` of `.one` to `#efb762`.
+
+# --hints--
+
+You should set the `background-color` property to `#efb762`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)');
+assert(hasBackground)
+```
+
+Your `.one` element should have a `background-color` value of `#efb762`.
+
+```js
+const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color');
+assert(oneBackground === 'rgb(239, 183, 98)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
new file mode 100644
index 0000000000..29042741c7
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997d
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Use margins to position the `.one` element on the canvas.
+
+Add the shorthand `margin` property with a vertical margin of `20px` and a horizontal margin of `auto`.
+
+# --hints--
+
+You should set the `margin` property to `20px auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto');
+assert(marginFilter.length === 2);
+```
+
+Your `.one` element should have a `margin` value of `20px auto`.
+
+```js
+const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin');
+assert(oneMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
new file mode 100644
index 0000000000..365ecbaec6
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
@@ -0,0 +1,75 @@
+---
+id: 60a3e3396c7b40068ad6997e
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels.
+
+Add `padding` of `1px` to the `.canvas` element to give the `.one` element something solid to push off of.
+
+# --hints--
+
+You should set the `padding` property to `1px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
+assert(hasPadding);
+```
+
+Your `.canvas` element should have a `padding` value of `1px`.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding');
+assert(canvasPadding === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
new file mode 100644
index 0000000000..9ffd481ee9
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
@@ -0,0 +1,82 @@
+---
+id: 60a3e3396c7b40068ad6997f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels.
+
+Replace the `padding` property with `overflow` set to `hidden` - changing the canvas back to its original dimensions.
+
+# --hints--
+
+You should remove the `padding` property from the `.canvas` selector.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding');
+assert(!canvasPadding);
+```
+
+You should set the `overflow` property to `hidden`.
+
+```js
+const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden');
+assert(hasOverflow);
+```
+
+Your `.canvas` element should have an `overflow` value of `hidden`.
+
+```js
+const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow');
+assert(canvasOverflow === 'hidden')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+  padding: 1px;
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
new file mode 100644
index 0000000000..84694dcaba
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69980
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle.
+
+# --hints--
+
+You should not change the existing `.one` element.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+```
+
+You should have a second `div` element in your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[1].tagName === 'DIV');
+```
+
+Your second `div` element should have a `class` value of `two`.
+
+```js
+assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two'));
+```
+
+Your `.two` element should come after your `.one` element.
+
+```js
+assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
new file mode 100644
index 0000000000..905c846534
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69981
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels.
+
+# --hints--
+
+You should have a `.two` selector.
+
+```js
+const hasTwo = new __helpers.CSSHelp(document).getStyle('.two');
+assert(hasTwo);
+```
+
+You should set the `width` property to `475px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px');
+assert(hasWidth);
+```
+
+Your `.two` element should have a `width` value of `475px`.
+
+```js
+const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width');
+assert(twoWidth === '475px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
new file mode 100644
index 0000000000..deb83104e5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
@@ -0,0 +1,79 @@
+---
+id: 60a3e3396c7b40068ad69982
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Set the `height` of the `.two` element to 200 pixels.
+
+# --hints--
+
+You should set the `height` property to `200px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px');
+assert(hasHeight);
+```
+
+Your `.two` element should have a `height` value of `200px`.
+
+```js
+const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height');
+assert(twoHeight === '200px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
new file mode 100644
index 0000000000..b473fbe95e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
@@ -0,0 +1,80 @@
+---
+id: 60a3e3396c7b40068ad69983
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Set the `background-color` of the `.two` element to `#8f0401`.
+
+# --hints--
+
+You should set the `background-color` property to `#8f0401`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)');
+assert(hasBackground);
+```
+
+Your `.two` element should have a `background-color` value of `#8f0401`.
+
+```js
+const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color');
+assert(twoBackground === 'rgb(143, 4, 1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
new file mode 100644
index 0000000000..aa6bfc9b10
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
@@ -0,0 +1,81 @@
+---
+id: 60a3e3396c7b40068ad69984
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Center the `.two` element by setting its `margin` to `auto`.
+
+# --hints--
+
+You should set the `margin` property to `auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto');
+assert(hasMargin);
+```
+
+Your `.two` element should have a `margin` value of `auto`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
new file mode 100644
index 0000000000..d4e9204170
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad69986
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle.
+
+# --hints--
+
+Your existing `.one` and `.two` elements should not be changed.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+assert(document.querySelectorAll('.two').length === 1);
+```
+
+Your new `div` should be nested in your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
+```
+
+Your new `div` should come after your `.two` element.
+
+```js
+assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
+```
+
+Your new `div` element should have a `class` with the value `three`.
+
+```js
+assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
new file mode 100644
index 0000000000..a8ed43828e
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
@@ -0,0 +1,94 @@
+---
+id: 60a3e3396c7b40068ad69987
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+You don't always have to use pixels when sizing an element.
+
+Create a new rule, `.three`, and set its `width` to `91%`.
+
+# --hints--
+
+You should use the `.three` selector.
+
+```js
+const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
+assert(hasThree);
+```
+
+You should set the `width` property to `91%`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
+assert(hasWidth);
+```
+
+Your `.three` element should have a `width` value of `91%`.
+
+```js
+const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
+assert(threeWidth === '91%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
new file mode 100644
index 0000000000..4bac9123c8
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
@@ -0,0 +1,87 @@
+---
+id: 60a3e3396c7b40068ad69988
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Set the `height` of `.three` to `28%`.
+
+# --hints--
+
+You should set the `height` property to `28%`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
+assert(hasHeight);
+```
+
+Your `.three` element should have a `height` value of `28%`.
+
+```js
+const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
+assert(threeHeight === '28%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
new file mode 100644
index 0000000000..aa949defd3
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
@@ -0,0 +1,88 @@
+---
+id: 60a3e3396c7b40068ad69989
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Change the `background-color` of `.three` to `#b20403`.
+
+# --hints--
+
+You should set the `background-color` property to `#b20403`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
+assert(hasBackground);
+```
+
+Your `.three` element should have a `background-color` value of `#b20403`.
+
+```js
+const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
+assert(threeBackground === 'rgb(178, 4, 3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
new file mode 100644
index 0000000000..6a8b129773
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
@@ -0,0 +1,89 @@
+---
+id: 60a3e3396c7b40068ad6998a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Center the `.three` element on the canvas by setting its `margin` to `auto`.
+
+# --hints--
+
+You should set the `margin` property to `auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
+assert(marginFilter.length === 2);
+```
+
+Your `.three` element should have a `margin` value of `auto`.
+
+```js
+const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
+assert(threeMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
new file mode 100644
index 0000000000..ba32bd466f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad6998b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+It's helpful to have your margins push in one direction.
+
+In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels.
+
+In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels.
+
+# --hints--
+
+You should set the `margin` property to `0 auto 20px`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
+assert(hasMargin);
+```
+
+Your `.two` element should have a `margin` value of `0 auto 20px`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === '0px auto 20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+  margin: auto;
+--fcc-editable-region--
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
new file mode 100644
index 0000000000..db47cb9346
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad6998c
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The colors and shapes of your painting are too sharp to pass as a Rothko.
+
+Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element.
+
+Here's an example of a rule that add a 3px `blur`:
+
+```css
+p {
+  filter: blur(3px);
+}
+```
+
+# --hints--
+
+You should set the `filter` property to `blur(2px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
+assert(hasFilter);
+```
+
+Your `.canvas` element should have a `filter` value of `blur(2px)`.
+
+```js
+const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
+assert(canvasFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+
+}
+--fcc-editable-region--
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
new file mode 100644
index 0000000000..06f7c56156
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
@@ -0,0 +1,108 @@
+---
+id: 60a3e3396c7b40068ad6998d
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel.
+
+# --hints--
+
+You should have a `.one, .two` selector list.
+
+```js
+const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
+assert(oneTwo);
+```
+
+You should set the `filter` property to `blur(1px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
+assert(hasFilter)
+```
+
+Your `.one` element should have a `filter` value of `blur(1px)`.
+
+```js
+const one = document.querySelector('.one');
+const oneFilter = getComputedStyle(one).filter;
+assert(oneFilter === 'blur(1px)');
+```
+
+Your `.two` element should have a `filter` value of `blur(1px)`.
+
+```js
+const two = document.querySelector('.two');
+const twoFilter = getComputedStyle(two).filter;
+assert(twoFilter === 'blur(1px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
new file mode 100644
index 0000000000..dafc3792ec
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
@@ -0,0 +1,95 @@
+---
+id: 60a3e3396c7b40068ad6998e
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Increase the `blur` of `.three` by 2 pixels.
+
+# --hints--
+
+You should set the `filter` property to `blur(2px)`.
+
+```js
+const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
+assert(filterFilter.length === 2);
+```
+
+Your `.three` element should have a `filter` value of `blur(2px)`.
+
+```js
+const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
+assert(threeFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
new file mode 100644
index 0000000000..9971a7dda8
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad6998f
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+The rectangles are too small and their edges don't have the soft quality of a painting.
+
+Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
+
+```js
+const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
+assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
new file mode 100644
index 0000000000..70123d3e87
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
@@ -0,0 +1,97 @@
+---
+id: 60a3e3396c7b40068ad69990
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 3px 3px #8f0401`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`.
+
+```js
+const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
+assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
new file mode 100644
index 0000000000..e7582ebc5a
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad69991
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+assert(hasBoxShadow);
+```
+
+Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
+
+```js
+const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
+assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
new file mode 100644
index 0000000000..f78535e86c
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
@@ -0,0 +1,101 @@
+---
+id: 60a3e3396c7b40068ad69992
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+The corners of each rectangle are still too sharp.
+
+Round each corner of the `.one` element by 9 pixels, using the `border-radius` property.
+
+# --hints--
+
+You should set the `border-radius` property to `9px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
+assert(hasBorderRadius);
+```
+
+Your `.one` element should have a `border-radius` value of `9px`.
+
+```js
+const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
+assert(oneBorderRadius === '9px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
new file mode 100644
index 0000000000..e99b91467f
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad69993
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Use the `border-radius` property on the `.two` selector, to set its top-left radius and bottom-right radius to `8px`, and top-right radius and bottom-left radius to `10px`.
+
+# --hints--
+
+You should set the `border-radius` property to `8px 10px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
+assert(hasBorderRadius);
+```
+
+Your `.two` element should have a `border-radius` value of `8px 10px`.
+
+```js
+const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
+assert(twoBorderRadius === '8px 10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
new file mode 100644
index 0000000000..41be8e8fd5
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69994
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners.
+
+Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels.
+
+# --hints--
+
+You should set the `border-radius` property to `30px 25px 60px 12px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
+assert(hasBorderRadius);
+```
+
+Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`.
+
+```js
+const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
+assert(threeBorderRadius === '30px 25px 60px 12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
new file mode 100644
index 0000000000..f5ebe9a726
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
@@ -0,0 +1,104 @@
+---
+id: 60a3e3396c7b40068ad69995
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Rotate each rectangle to give them more of an imperfect, hand-painted look.
+
+Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees.
+
+# --hints--
+
+You should set the `transform` property to `rotate(-0.6deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
+assert(hasTransform);
+```
+
+Your `.one` element should have a `transform` value of `rotate(-0.6deg)`.
+
+```js
+const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
+assert(oneTransform === 'rotate(-0.6deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
new file mode 100644
index 0000000000..3b25d4ac04
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69996
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Rotate the `.two` element clockwise by 0.4 degrees.
+
+# --hints--
+
+You should set the `transform` property to `rotate(0.4deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
+assert(hasTransform);
+```
+
+Your `.two` element should have a `transform` value of `rotate(0.4deg)`.
+
+```js
+const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
+assert(twoTransform === 'rotate(0.4deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
new file mode 100644
index 0000000000..a41a1976ff
--- /dev/null
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
@@ -0,0 +1,180 @@
+---
+id: 60a3e3396c7b40068ad69997
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Rotate `.three` counter clockwise by 0.2 degrees.
+
+With this final step, your Rothko painting is now complete.
+
+# --hints--
+
+You should set the `transform` property to `rotate(-0.2deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
+assert(hasTransform);
+```
+
+Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
+
+```js
+const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
+assert(threeTransform === 'rotate(-0.2deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+  transform: rotate(-0.2deg);
+}
+```
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
index ca8edf45e9..6bf673cdf3 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
@@ -17,7 +17,9 @@ gradient-type(
 );
 ```
 
-Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`.
+Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third.
+
+When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`, so you do not need to set them.
 
 # --hints--
 
@@ -33,6 +35,18 @@ You should use `90deg` for the direction in the first argument of `repeating-lin
 assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
 ```
 
+You should not set the percentage for the first color.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "var(--building-color3)0%");
+```
+
+You should not set the percentage for the second color.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "var(--building-color3)7.5%");
+```
+
 You should use `--building-color3` for the first two colors.
 
 ```js
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
index f3f06e33df..fce6269914 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
@@ -9,7 +9,7 @@ dashedName: step-3
 
 The `p` element is used to create a paragraph of text on websites. Create a `p` element below your `h2` element and give it the following text:
 
-`See more cat photos in our gallery.`
+`Everyone loves cute cats online!`
 
 # --hints--
 
@@ -25,13 +25,13 @@ Your `p` element should have a closing tag. Closing tags have a `/` just after t
 assert(code.match(/<\/p\>/));
 ```
 
-Your `p` element's text should be `See more cat photos in our gallery.` You have either omitted the text or have a typo.
+Your `p` element's text should be `Everyone loves cute cats online!` You have either omitted the text or have a typo.
 
 ```js
 const extraSpacesRemoved = document
   .querySelector('p')
   .innerText.replace(/\s+/g, ' ');
-assert(extraSpacesRemoved.match(/see more cat photos in our gallery\.?$/i));
+assert.match(extraSpacesRemoved, /everyone loves cute cats online!$/i);
 ```
 
 Your `p` element should be below the `h2` element. You have them in the wrong order.
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
index f98148fee4..c2b07a0a9e 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
@@ -49,12 +49,9 @@ assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/i));
 Your comment should be above the `p` element. You have them in the wrong order.
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
-    )
+assert.match(
+  code.replace(/\s/g, ''),
+  /<!--todo:addlinktocatphotos--><p>everyonelovescutecatsonline!<\/p>/i
 );
 ```
 
@@ -69,7 +66,7 @@ assert(
     <h2>Cat Photos</h2>
 --fcc-editable-region--
 
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
index a650fb00f8..bc2b15c842 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -55,10 +55,8 @@ Your `main` element's closing tag should be below the `p` element. You have them
 ```js
 const mainNode = document.querySelector('main');
 const pNode = document.querySelector('p');
-assert(
-  mainNode.contains(pNode) &&
-    pNode.textContent.toLowerCase().match(/see more cat photos in our gallery/)
-);
+assert.isTrue(mainNode.contains(pNode));
+assert.match(pNode.textContent.toLowerCase(), /everyone loves cute cats online!/);
 ```
 
 # --seed--
@@ -73,7 +71,7 @@ assert(
     <h1>CatPhotoApp</h1>
     <h2>Cat Photos</h2>
     <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 1f6f7925b4..4f65380640 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -74,14 +74,14 @@ Your code should have a `p` element. You have removed the `p` element from an ea
 assert(document.querySelector('p'));
 ```
 
-The text of the `p` element should be `See more cat photos in our gallery.` Do not change the text, spacing, or punctuation of the `p` element.
+The text of the `p` element should be `Everyone loves cute cats online!` Do not change the text, spacing, or punctuation of the `p` element.
 
 ```js
-assert(
+assert.match(
   document
     .querySelector('p')
-    .innerText.toLowerCase()
-    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
+    .innerText.toLowerCase(),
+    /everyone\s+loves\s+cute\s+cats\s+online!$/
 );
 ```
 
@@ -98,12 +98,12 @@ assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
     </main>
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 92ef311a23..ca9f8fc101 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -52,7 +52,7 @@ assert(collection.indexOf('P') < collection.indexOf('IMG'));
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
     </main>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
index 0d6ec6dd9c..cb3310434c 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
@@ -36,19 +36,19 @@ assert(document.querySelector('img').src);
 Your `img` element's `src` attribute should be set to '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. You have either omitted the URL or have a typo. The case of the URL is important.
 
 ```js
-assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
+assert.strictEqual(document.querySelector('img').src, 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
 ```
 
 Although you have set the `img` element's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks.
 
 ```js
-assert(!/\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/);
 ```
 
 Your `img` element should be closed either with `>` or `/>`.
 
 ```js
-assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\1\s*\/?>/.test(code));
+assert.match(code, /<img\s+src\s*=\s*("|')\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\s*\1\s*\/?>/);
 ```
 
 # --seed--
@@ -62,7 +62,7 @@ assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img>
 --fcc-editable-region--
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
index b6870cefcd..b53aea3523 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
@@ -54,7 +54,7 @@ assert(altText.match(/A cute orange cat lying on its back\.?$/i));
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
 --fcc-editable-region--
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index 8593266173..bebde81fbc 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -75,7 +75,7 @@ assert(
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index 899253f533..b0172e87cb 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -15,7 +15,7 @@ Here is an example of a link with the text `click here to go to freeCodeCamp.org
 <a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>
 ```
 
-Add the anchor text `link to cat pictures` to the anchor element. This will become the link's text.
+Add the anchor text `cat photos` to the anchor element. This will become the link's text.
 
 # --hints--
 
@@ -31,12 +31,12 @@ Your anchor (`a`) element should have a closing tag. Closing tags have a `/` jus
 assert(code.match(/<\/a\>/));
 ```
 
-Your anchor (`a`) element's text should be `link to cat pictures`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag.
+Your anchor (`a`) element's text should be `cat photos`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag.
 
 ```js
-assert(
-  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
-    'link to cat pictures'
+assert.strictEqual(
+  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' '),
+    'cat photos'
 );
 ```
 
@@ -51,7 +51,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <a href="https://freecatphotoapp.com"></a>
 --fcc-editable-region--
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
index 3efc8f3739..3b799b148f 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa2407b521be39a3de7be1
-title: 14 단계
+title: Step 15
 challengeType: 0
-dashedName: step-14
+dashedName: step-15
 ---
 
 # --description--
@@ -25,22 +25,20 @@ Your `p` element should have a nested anchor (`a`) element with the text `cat ph
 
 ```js
 const anchor = document.querySelectorAll('p > a');
-assert(
-  anchor.length &&
-    anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+assert.isNotEmpty(anchor);
+assert.strictEqual(anchor[1]?.innerText?.toLowerCase().replace(/\s+/g, ' '), 'cat photos')
 ```
 
 Your anchor (`a`) element does not have a `target` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
 
 ```js
-assert(document.querySelector('a').hasAttribute('target'));
+assert.isTrue(document.querySelectorAll('a')[1]?.hasAttribute('target'));
 ```
 
 The value of the `target` attribute should be `_blank`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks.
 
 ```js
-assert(document.querySelector('a').getAttribute('target') === '_blank');
+assert.strictEqual(document.querySelectorAll('a')[1]?.getAttribute('target'), '_blank');
 ```
 
 # --seed--
@@ -54,6 +52,7 @@ assert(document.querySelector('a').getAttribute('target') === '_blank');
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
 --fcc-editable-region--
       <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
index 32a292ff77..1355440130 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa30b9eacea3f48c6300ad
-title: Step 15
+title: Step 17
 challengeType: 0
-dashedName: step-15
+dashedName: step-17
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert(document.querySelectorAll('a').length >= 2);
 You are missing a closing (`a`) tag after the image.
 
 ```js
-assert(document.querySelectorAll('a').length === 2);
+assert.lengthOf(document.querySelectorAll('a'), 3);
 ```
 
 Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
@@ -52,7 +52,7 @@ assert(code.match(/<\/a>/g).length >= 2);
 You should only add one closing anchor (`a`) tag. Please remove any extras.
 
 ```js
-assert(code.match(/<\/a>/g).length === 2);
+assert.lengthOf(code.match(/<\/a>/g), 3);
 ```
 
 Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
@@ -86,7 +86,7 @@ assert(document.querySelector('img').parentNode.nodeName === 'A');
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
index 303300a19d..6e775274d2 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa3589eacea3f48c6300ae
-title: Step 18
+title: Step 20
 challengeType: 0
-dashedName: step-18
+dashedName: step-20
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
index 22e7fd5be6..e017cf1b24 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa371beacea3f48c6300af
-title: Step 19
+title: Step 21
 challengeType: 0
-dashedName: step-19
+dashedName: step-21
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index 843e458b51..bbdb5a91ed 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa37b9eacea3f48c6300b0
-title: Step 20
+title: Step 22
 challengeType: 0
-dashedName: step-20
+dashedName: step-22
 ---
 
 # --description--
@@ -43,7 +43,7 @@ assert.equal(secondSectionLastElemNode?.nodeName , 'UL');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
index 19ed028336..d97f5a238c 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb5ecbeacea3f48c6300b1
-title: Step 21
+title: Step 23
 challengeType: 0
-dashedName: step-21
+dashedName: step-23
 ---
 
 # --description--
@@ -63,7 +63,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
index 897f0b2d61..a1f64d12c7 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6250eacea3f48c6300b2
-title: Step 22
+title: Step 24
 challengeType: 0
-dashedName: step-22
+dashedName: step-24
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert.isTrue(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curricu
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
index ed935a5d01..008c061b54 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb655eeacea3f48c6300b3
-title: Step 23
+title: Step 25
 challengeType: 0
-dashedName: step-23
+dashedName: step-25
 ---
 
 # --description--
@@ -34,11 +34,7 @@ assert.equal(document.querySelectorAll('section')?.[1]?.lastElementChild?.nodeNa
 The lasagna `img` element should be nested in the `figure` element.
 
 ```js
-assert(
-  document.querySelector('figure > img') &&
-    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
-      'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
-);
+assert.strictEqual(document.querySelector('figure > img')?.src.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg');
 ```
 
 # --seed--
@@ -52,7 +48,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
index 45e6c14488..4905cd9954 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6a35eacea3f48c6300b4
-title: Step 24
+title: Step 26
 challengeType: 0
-dashedName: step-24
+dashedName: step-26
 ---
 
 # --description--
@@ -82,7 +82,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
index ef9e68c807..724e9b2b26 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d0
-title: Step 25
+title: Step 27
 challengeType: 0
-dashedName: step-25
+dashedName: step-27
 ---
 
 # --description--
@@ -61,7 +61,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
index 972db05455..093b28f8cc 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d1
-title: Step 26
+title: Step 28
 challengeType: 0
-dashedName: step-26
+dashedName: step-28
 ---
 
 # --description--
@@ -55,7 +55,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
index bfd507963c..0dcc248e69 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d2
-title: Step 27
+title: Step 29
 challengeType: 0
-dashedName: step-27
+dashedName: step-29
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert([...document.querySelectorAll('ol')].length == 1);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
index 384a714acf..8bda3c42be 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d3
-title: Step 28
+title: Step 30
 challengeType: 0
-dashedName: step-28
+dashedName: step-30
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert.equal(document.querySelectorAll('main > section')?.[1]?.lastElementChild?
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
index b075240b39..d68438b9d8 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d4
-title: Step 32
+title: Step 34
 challengeType: 0
-dashedName: step-32
+dashedName: step-34
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
index 8deaf57d65..5b94ff9597 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d5
-title: Step 34
+title: Step 36
 challengeType: 0
-dashedName: step-34
+dashedName: step-36
 ---
 
 # --description--
@@ -67,7 +67,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
index 9db68b7792..d6780868fb 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d6
-title: Step 35
+title: Step 37
 challengeType: 0
-dashedName: step-35
+dashedName: step-37
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
index 56be115adf..62e6860cf9 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d7
-title: 36 단계
+title: Step 38
 challengeType: 0
-dashedName: step-36
+dashedName: step-38
 ---
 
 # --description--
@@ -83,7 +83,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
index 6a2bcf5d3a..a8a5f7d8d2 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d8
-title: Step 37
+title: Step 39
 challengeType: 0
-dashedName: step-37
+dashedName: step-39
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.isTrue(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
index e69eb349df..00ff4e9f0f 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d9
-title: Step 40
+title: Step 42
 challengeType: 0
-dashedName: step-40
+dashedName: step-42
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
index 37c4d11367..ad55eb141d 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804da
-title: Step 42
+title: Step 44
 challengeType: 0
-dashedName: step-42
+dashedName: step-44
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
index d5d1b6641f..9d90308923 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804db
-title: Step 41
+title: Step 43
 challengeType: 0
-dashedName: step-41
+dashedName: step-43
 ---
 
 # --description--
@@ -49,7 +49,7 @@ assert.strictEqual(document.querySelector('input')?.getAttribute('required'), ''
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
index bbb8351df9..7a52d7f2e5 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dc
-title: Step 44
+title: Step 46
 challengeType: 0
-dashedName: step-44
+dashedName: step-46
 ---
 
 # --description--
@@ -107,7 +107,7 @@ assert.match(radioInputElem?.nextSibling?.nodeValue?.replace(/\s+/g, ' '), /\s*I
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
index a1961865ed..78c8cba66b 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dd
-title: Step 45
+title: Step 47
 challengeType: 0
-dashedName: step-45
+dashedName: step-47
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
index 0d24e64f6c..dbd106c3fc 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804de
-title: Step 48
+title: Step 50
 challengeType: 0
-dashedName: step-48
+dashedName: step-50
 ---
 
 # --description--
@@ -68,9 +68,10 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
index 5e0de64f76..7e6da73cc0 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804df
-title: Step 46
+title: Step 48
 challengeType: 0
-dashedName: step-46
+dashedName: step-48
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert.match(document.querySelector('input')?.id, /^indoor$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
index 4a42bc7811..32efcf5c55 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e1
-title: Step 50
+title: Step 52
 challengeType: 0
-dashedName: step-50
+dashedName: step-52
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
index 594e730588..310d65d25b 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e2
-title: Step 54
+title: Step 56
 challengeType: 0
-dashedName: step-54
+dashedName: step-56
 ---
 
 # --description--
@@ -76,7 +76,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
index 5072a34e56..85d4f47ee8 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e3
-title: Step 58
+title: Step 60
 challengeType: 0
-dashedName: step-58
+dashedName: step-60
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
index cc4c501e58..b813bc74a5 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e5
-title: 61 단계
+title: Step 63
 challengeType: 0
-dashedName: step-61
+dashedName: step-63
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.isFalse(document.querySelectorAll('input[type="checkbox"]')?.[2]?.hasAttr
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
index 37a76b9e0e..83e8c455f3 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e7
-title: Step 62
+title: Step 64
 challengeType: 0
-dashedName: step-62
+dashedName: step-64
 ---
 
 # --description--
@@ -48,7 +48,7 @@ assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
index da20565d0e..cef86ce688 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e8
-title: Step 63
+title: Step 65
 challengeType: 0
-dashedName: step-63
+dashedName: step-65
 ---
 
 # --description--
@@ -23,11 +23,11 @@ Your `footer` element should have a `p` element. Make sure to add an opening tag
 assert(document.querySelector('footer > p'));
 ```
 
-Your `footer` element should have a closing tag. Closing tags have a `/` just after the `<` character.
+Your `p` element should have a closing tag. Closing tags have a `/` just after the `<` character.
 
 ```js
 const pElemClosingTags = code.match(/<\/p\>/g);
-assert(pElemClosingTags && pElemClosingTags.length === 2);
+assert.lengthOf(pElemClosingTags, 3);
 ```
 
 Your `p` element's text should be `No Copyright - freeCodeCamp.org`. You have either omitted the text, have a typo, or it is not between the `p` element's opening and closing tags.
@@ -48,7 +48,7 @@ assert.match(extraSpacesRemoved, /No Copyright - freeCodeCamp\.org$/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
index c969d3313c..659376576f 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e9
-title: Step 64
+title: Step 66
 challengeType: 0
-dashedName: step-64
+dashedName: step-66
 ---
 
 # --description--
@@ -21,7 +21,7 @@ Your anchor (`a`) element should have a closing tag. Closing tags have a `/` jus
 
 ```js
 const aElemClosingTags = code.match(/<\/a\>/g);
-assert(aElemClosingTags && aElemClosingTags.length === 3);
+assert.lengthOf(aElemClosingTags, 4);
 ```
 
 Your anchor (`a`) element should have an `href` attribute with the value `https://www.freecodecamp.org`. You may have omitted the attribute/value, or have a typo.
@@ -59,7 +59,7 @@ assert.match(pText, /^no copyright - freecodecamp.org$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
index 71708712af..97226fa0de 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ea
-title: Step 65
+title: Step 67
 challengeType: 0
-dashedName: step-65
+dashedName: step-67
 ---
 
 # --description--
@@ -54,7 +54,7 @@ assert(noSpaces.match(/\<\/head\>\<body\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
index de5a1cd546..67bca05c1b 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804eb
-title: Step 66
+title: Step 68
 challengeType: 0
-dashedName: step-66
+dashedName: step-68
 ---
 
 # --description--
@@ -56,7 +56,7 @@ assert(document.title && document.title.toLowerCase() === 'catphotoapp');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
index 5f24af58b8..435f6d2c66 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ec
-title: Step 67
+title: Step 69
 challengeType: 0
-dashedName: step-67
+dashedName: step-69
 ---
 
 # --description--
@@ -44,7 +44,7 @@ assert(extraSpacesRemoved.match(/\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
index f98f54be2d..a01a428a2f 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ee
-title: Step 68
+title: Step 70
 challengeType: 0
-dashedName: step-68
+dashedName: step-70
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\<html/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
index 3f25827a66..864c6b8abd 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
@@ -1,8 +1,8 @@
 ---
 id: 5efada803cbd2bbdab94e332
-title: Step 29
+title: Step 31
 challengeType: 0
-dashedName: step-29
+dashedName: step-31
 ---
 
 # --description--
@@ -42,16 +42,15 @@ The third image should have a `src` attribute set to `https://cdn.freecodecamp.o
 
 ```js
 const catsImg = document.querySelectorAll('figure > img')[1];
-assert(
-  catsImg &&
-    catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
+assert.strictEqual(
+  catsImg?.src?.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
 );
 ```
 
 Although you have set the new image's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks.
 
 ```js
-assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/);
 ```
 
 # --seed--
@@ -65,7 +64,7 @@ assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/ca
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
index fc9ae81ed9..5c4b2d7bad 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae0543cbd2bbdab94e333
-title: Step 30
+title: Step 32
 challengeType: 0
-dashedName: step-30
+dashedName: step-32
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
index 5dd98f117a..67adb8c27f 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae16e3cbd2bbdab94e334
-title: Step 31
+title: Step 33
 challengeType: 0
-dashedName: step-31
+dashedName: step-33
 ---
 
 # --description--
@@ -88,7 +88,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
index 20fab7dbb3..4bee47e445 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb23e70dc218d6c85f89b1
-title: Step 38
+title: Step 40
 challengeType: 0
-dashedName: step-38
+dashedName: step-40
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(!/\<input\s+type\s*=\s*text/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
index c31c2c7312..0ce265406c 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb2c990dc218d6c85f89b2
-title: Step 43
+title: Step 45
 challengeType: 0
-dashedName: step-43
+dashedName: step-45
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
index 8839051402..279e4134d1 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc4f528d6a74d05e68af74
-title: Step 56
+title: Step 58
 challengeType: 0
-dashedName: step-56
+dashedName: step-58
 ---
 
 # --description--
@@ -110,7 +110,7 @@ assert.match(code, />\s+<label\s+for\s*=\s*('|")loving/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
index c66b5194a1..9c771a8966 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc518e8d6a74d05e68af75
-title: Step 57
+title: Step 59
 challengeType: 0
-dashedName: step-57
+dashedName: step-59
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
index 79091df7c9..fc0e86d705 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc54138d6a74d05e68af76
-title: Step 55
+title: Step 57
 challengeType: 0
-dashedName: step-55
+dashedName: step-57
 ---
 
 # --description--
@@ -34,7 +34,7 @@ assert.match(document.querySelector('input[type="checkbox"]')?.id, /^loving$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
index 3b8813627f..5cd8d5f74c 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc575c8d6a74d05e68af77
-title: Step 59
+title: Step 61
 challengeType: 0
-dashedName: step-59
+dashedName: step-61
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
index 0ffa306ff4..d83fbbf26e 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5f05a1d8e233dff4a68508d8
-title: Step 47
+title: Step 49
 challengeType: 0
-dashedName: step-47
+dashedName: step-49
 ---
 
 # --description--
@@ -92,7 +92,7 @@ assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
index 8d1bf5b4d1..1b7c5b36f3 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07be6ef7412fbad0c5626b
-title: Step 16
+title: Step 18
 challengeType: 0
-dashedName: step-16
+dashedName: step-18
 ---
 
 # --description--
@@ -40,14 +40,14 @@ The entire `section` element should be between the opening and closing tags of t
 assert(document.querySelector('section').parentNode.nodeName === 'MAIN');
 ```
 
-The existing `h2`, comment, `p` element, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
+The existing `h2`, comment, two `p` elements, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
 
 ```js
 const childrenOfSection = [...document.querySelector('section').childNodes];
 const foundElements = childrenOfSection.filter((child) => {
   return ['H2', 'A', 'P'].includes(child.nodeName);
 });
-assert(foundElements.length === 3);
+assert.lengthOf(foundElements, 4);
 ```
 
 The `h1` element should not be nested in the `section` element.
@@ -65,12 +65,12 @@ assert.isFalse(includesH1);
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
 
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
       <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
index 9d0b1269dd..5a552e3a3e 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07c98cdb9413cbd4b16750
-title: Step 17
+title: Step 19
 challengeType: 0
-dashedName: step-17
+dashedName: step-19
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(foundElems.length === 2);
 --fcc-editable-region--
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
index 16233d230f..9da6198618 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07fb1579dc934717801375
-title: Step 33
+title: Step 35
 challengeType: 0
-dashedName: step-33
+dashedName: step-35
 ---
 
 # --description--
@@ -62,7 +62,7 @@ assert.lengthOf(document.querySelectorAll('main > section')?.[2]?.children, 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
index 8dff31c730..f278db5843 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d48e7b435f13ab6550051
-title: Step 51
+title: Step 53
 challengeType: 0
-dashedName: step-51
+dashedName: step-53
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
index 13328c4035..b8c80387da 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4ab1b435f13ab6550052
-title: Step 52
+title: Step 54
 challengeType: 0
-dashedName: step-52
+dashedName: step-54
 ---
 
 # --description--
@@ -79,7 +79,7 @@ assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
index 5cea934f00..57757efa41 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4d04b435f13ab6550053
-title: Step 53
+title: Step 55
 challengeType: 0
-dashedName: step-53
+dashedName: step-55
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
index 0fda7b0e33..0745f08bcf 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a80975fc4bcae0edb3497
-title: Step 49
+title: Step 51
 challengeType: 0
-dashedName: step-49
+dashedName: step-51
 ---
 
 # --description--
@@ -64,9 +64,10 @@ assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
index 18830d7298..d9d8395afd 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a89f1190aff21ae42105a
-title: Step 60
+title: Step 62
 challengeType: 0
-dashedName: step-60
+dashedName: step-62
 ---
 
 # --description--
@@ -52,7 +52,7 @@ assert(energeticCheckbox.getAttribute('value').match(/^energetic$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
index edde17fdeb..de0b0faa56 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
@@ -1,8 +1,8 @@
 ---
 id: 62bb4009e3458a128ff57d5d
-title: Step 69
+title: Step 71
 challengeType: 0
-dashedName: step-69
+dashedName: step-71
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
@@ -127,7 +127,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
new file mode 100644
index 0000000000..aa057f8e17
--- /dev/null
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
@@ -0,0 +1,57 @@
+---
+id: 671141d8e32fe934c26fa1be
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Add the words `See more` before the anchor element and `in our gallery` after the anchor element
+
+# --hints--
+
+You should use the existing anchor element, do not create a new one.
+
+```js
+assert.lengthOf(document.querySelectorAll('a'), 1);
+```
+
+You should have the words `See more` before the anchor element.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a>/)
+```
+
+You should have the words `in our gallery` after the anchor element.
+
+```js
+assert.match(code, /<a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+You should have `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery` in your code.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <a href="https://freecatphotoapp.com">cat photos</a>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
new file mode 100644
index 0000000000..78aae1394e
--- /dev/null
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
@@ -0,0 +1,48 @@
+---
+id: 671141f948cbab359e74cc93
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Add `p` tags to turn `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.` into a paragraph.
+
+# --hints--
+
+You should add a `p` element around `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.`.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P);
+assert.strictEqual(P.innerText, "See more cat photos in our gallery.");
+```
+
+You should still have the anchor element inside the new paragraph.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P.querySelector('a'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
new file mode 100644
index 0000000000..57b4139497
--- /dev/null
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -0,0 +1,57 @@
+---
+id: 671141feba228a35cefba82d
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Turn the text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+# --hints--
+
+There should be a new anchor element in the first `p` element.
+
+```js
+assert.exists(document.querySelector('p')?.querySelector('a'));
+```
+
+The anchor text should be `cute cats`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.innerText, "cute cats");
+```
+
+The `href` attrivute of the new anchor element should be `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.href, "https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg");
+```
+
+The text of the `p` element should still be `Everyone loves cute cats online!`.
+
+```js
+assert.strictEqual(document.querySelector('p')?.innerText, "Everyone loves cute cats online!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
new file mode 100644
index 0000000000..7256f63593
--- /dev/null
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
@@ -0,0 +1,47 @@
+---
+id: 671144cdcc01d73f7dd79dc9
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have added the link you can remove the comment.
+
+# --hints--
+
+There should not be any comment in your code.
+
+```js
+assert.notMatch(code, /<!--/);
+assert.notMatch(code, /-->/);
+```
+
+The text `TODO: Add link to cat photos` should not be present anymore.
+
+```js
+assert.notMatch(code, /TODO:?/i)
+assert.notMatch(code, /Add\s*link\s*to\s*cat\s*photos/i)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+--fcc-editable-region--
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
+      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
index 33a20b1ea9..660fee99a5 100644
--- a/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
+++ b/curriculum/challenges/korean/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
@@ -1,8 +1,8 @@
 ---
 id: 7cf9b03d81a65668421804c3
-title: Step 39
+title: Step 41
 challengeType: 0
-dashedName: step-39
+dashedName: step-41
 ---
 
 # --description--
@@ -66,7 +66,7 @@ assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/korean/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md b/curriculum/challenges/korean/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
index 93597f0d81..418e21789b 100644
--- a/curriculum/challenges/korean/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
+++ b/curriculum/challenges/korean/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
@@ -56,9 +56,29 @@ Rentals are usually stationary services, not something that stops.
 # --scene--
 
 ```json
-{ "setup": { "background": "company2-center.png", "characters": [
-      { "character": "Maria", "position": {"x":50,"y":0,"z":1.5}, "opacity": 0 } ], "audio": { "filename": "1.3-5.mp3", "startTime": 1, "startTimestamp": 37.92, "finishTimestamp": 42.38 } }, "commands": [
-    { "character": "Maria", "opacity": 1, "startTime": 0 },
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {"x":50,"y":0,"z":1.5},
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "1.3-5.mp3",
+      "startTime": 1,
+      "startTimestamp": 37.92,
+      "finishTimestamp": 42.38
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
     {
       "character": "Maria",
       "startTime": 1,
@@ -73,4 +93,6 @@ Rentals are usually stationary services, not something that stops.
       "opacity": 0,
       "startTime": 5.96
     }
-  ] }
+  ]
+}
+```
diff --git a/curriculum/challenges/korean/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md b/curriculum/challenges/korean/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
index d4e08d4892..b7c5edd310 100644
--- a/curriculum/challenges/korean/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
+++ b/curriculum/challenges/korean/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
@@ -39,9 +39,29 @@ Refers to the act of being introduced to someone for the first time.
 # --scene--
 
 ```json
-{ "setup": { "background": "company1-boardroom.png", "characters": [
-      { "character": "David", "position": {"x":50,"y":0,"z":1.4}, "opacity": 0 } ], "audio": { "filename": "1.2-5.mp3", "startTime": 1, "startTimestamp": 27.38, "finishTimestamp": 29.06 } }, "commands": [
-    { "character": "David", "opacity": 1, "startTime": 0 },
+{
+  "setup": {
+    "background": "company1-boardroom.png",
+    "characters": [
+      {
+        "character": "David",
+        "position": {"x":50,"y":0,"z":1.4},
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "1.2-5.mp3",
+      "startTime": 1,
+      "startTimestamp": 27.38,
+      "finishTimestamp": 29.06
+    }
+  },
+  "commands": [
+    {
+      "character": "David",
+      "opacity": 1,
+      "startTime": 0
+    },
     {
       "character": "David",
       "startTime": 1,
@@ -56,4 +76,6 @@ Refers to the act of being introduced to someone for the first time.
       "opacity": 0,
       "startTime": 3.18
     }
-  ] }
+  ]
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md b/curriculum/challenges/korean/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
index e20e552f62..0a780050f2 100644
--- a/curriculum/challenges/korean/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
+++ b/curriculum/challenges/korean/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
@@ -24,13 +24,13 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 # --hints--
 
-You should define a funtion named `maskEmail`.
+You should define a function named `maskEmail`.
 
 ```js
 assert.isFunction(maskEmail);
 ```
 
-The `maskEmail` funtion should take a string, `email` as an argument.
+The `maskEmail` function should take a string, `email` as an argument.
 
 ```js
 assert.match(maskEmail.toString(), /\s*maskEmail\(\s*\w+\s*\)/);
diff --git a/curriculum/challenges/korean/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md b/curriculum/challenges/korean/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
index cefbcfd944..6ebd40d2b4 100644
--- a/curriculum/challenges/korean/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
+++ b/curriculum/challenges/korean/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
@@ -15,7 +15,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 1. Define a function called `isLeapYear` that takes a number as an argument.
 2. Outside the function, declare a variable `year` that stores the value of the year you want to check.
-3. Inside the funtion, use an `if/ else` statement or a ternary operator to check if the year is a leap year.
+3. Inside the function, use an `if/ else` statement or a ternary operator to check if the year is a leap year.
 4. To check if the year is a leap year, fulfill the following conditions:
 
    - If the year is divisible by `4`, then it is a leap year.
@@ -34,7 +34,7 @@ You should define a function named `isLeapYear`.
 assert(typeof isLeapYear === 'function');
 ```
 
-The `isLeapYear` funtion should take a number as an argument.
+The `isLeapYear` function should take a number as an argument.
 
 ```js
 assert.match(isLeapYear.toString(), /\s*isLeapYear\(\s*\w+\s*\)/);
diff --git a/curriculum/challenges/korean/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md b/curriculum/challenges/korean/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
index d6540612c5..2713df62d6 100644
--- a/curriculum/challenges/korean/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
+++ b/curriculum/challenges/korean/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
@@ -343,7 +343,7 @@ assert(usesFlex || usesFlexMedia)
                     <div class="desc">
                         <h2>Fast Shipping</h2>
                         <p>
-                            We make sure you recieve your trombone as soon as we have
+                            We make sure you receive your trombone as soon as we have
                             finished making it. We also provide free returns if you are not
                             satisfied.
                         </p>
diff --git a/curriculum/challenges/korean/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md b/curriculum/challenges/korean/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
index 23675a54f5..d2e30611fd 100644
--- a/curriculum/challenges/korean/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
+++ b/curriculum/challenges/korean/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
@@ -248,7 +248,7 @@ for (let anchor of anchors) {
         <h1>Discover Italy</h1>
         <p>Art, folklore, food, nature, and more. Choose among our wide selection of guided tours and excursions, and live an unforgettable experience exploring Italy.</p>
         <h2>Packages</h2>
-        <p>We offer an extensive range of holiday solutions to accomodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
+        <p>We offer an extensive range of holiday solutions to accommodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
         <ul>
             <li><a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li>
             <li><a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</a></li>
diff --git a/curriculum/challenges/korean/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md b/curriculum/challenges/korean/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
index fe076d9490..c6412beae4 100644
--- a/curriculum/challenges/korean/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
+++ b/curriculum/challenges/korean/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
@@ -278,7 +278,7 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
           </li>
           <li>
             <strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat
-            with a high-yeidling American breed, creating a strain that responds
+            with a high-yielding American breed, creating a strain that responds
             well to fertilizer. It goes on to provide 95% of Mexico's wheat.
           </li>
           <li>
diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
new file mode 100644
index 0000000000..6ced83e0fe
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
@@ -0,0 +1,121 @@
+---
+id: 670803abcb3e980233da4768
+title: What Are Divs and Spans, and When Should You Use Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-divs-and-spans
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What type of element is a `div` element?
+
+## --answers--
+
+An inline-level element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+An inline-block element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+A block-inline element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+A block-level element.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What kind of an element is a `span` element?
+
+## --answers--
+
+An inline-level element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+---
+
+An inline element.
+
+---
+
+A block element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+---
+
+A block-level element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What should you group using a `div` element?
+
+## --answers--
+
+Block-level content and larger sections.
+
+---
+
+Inline texts and smaller sections.
+
+### --feedback--
+
+Think about related and larger content.
+
+---
+
+The whole HTML content.
+
+### --feedback--
+
+Think about related and larger content.
+
+---
+
+A small chuck of text.
+
+### --feedback--
+
+Think about related and larger content.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
new file mode 100644
index 0000000000..6c660565a2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
@@ -0,0 +1,121 @@
+---
+id: 6708143cab2b583ecd3324f5
+title: What Are Attributes, and How Do They Work?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-attributes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of these best describes a boolean attribute?
+
+## --answers--
+
+They always require a value.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+---
+
+They add JavaScript functionality to your code.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+---
+
+Their presence implies true.
+
+---
+
+They are not different from regular attributes.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What do regular attributes do in HTML?
+
+## --answers--
+
+They provide additional information about an element.
+
+---
+
+They provide the background information about an element.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+---
+
+They are replacements for HTML elements.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+---
+
+They allow developers to toggle a feature on and off.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of these differentiates a boolean attribute from a regular attribute?
+
+## --answers--
+
+A boolean attribute is true and a regular attribute is false.
+
+---
+
+A boolean attribute requires a value but a regular attribute does not.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+---
+
+A boolean attribute provides additional information about an element but a regular attribute does not.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+---
+
+A boolean attribute does not require a value but a regular attribute does.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
new file mode 100644
index 0000000000..4007ac4197
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
@@ -0,0 +1,125 @@
+---
+id: 6708382cf088b216580a9ff1
+title: What Are IDs and Classes, and When Should You Use Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-ids-and-classes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+When should you use an `id` versus a `class`?
+
+## --answers--
+
+Use a `class` when you want a unique identifier that should only apply to one element.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Use an `id` when you need a unique identifier for a specific element, and use a `class` when you want to apply styles or behavior to multiple elements.
+
+---
+
+Use an `id` when you want to style multiple elements consistently across different parts of your webpage.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Use an `id` when you want to apply styles that can be easily overridden by other styles in your CSS.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What happens if you try to use duplicate an `id` in your HTML?
+
+## --answers--
+
+It can lead to unwanted results and issues when trying to apply styles or targeting an element in JavaScript.
+
+---
+
+The program will crash.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Nothing will happen.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+There will be a popup alert message in the browser window.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of the following is NOT a correct value for the `id` attribute?
+
+## --answers--
+
+`id="heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main-heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
new file mode 100644
index 0000000000..3ea5a03c99
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
@@ -0,0 +1,121 @@
+---
+id: 67083868d5fdcb17bf8c14bd
+title: What Are HTML Entities, and What Are Some Common Examples?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-html-entities
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is an HTML entity (character reference)?
+
+## --answers--
+
+A set of Google fonts.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A group of images and captions.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A set of characters used to represent JavaScript code.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A set of characters used to represent a reserved character in HTML.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What are the three types of character references?
+
+## --answers--
+
+Named, Roman and Hexadecimal numeric character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+---
+
+Octal, Named and Binary character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+---
+
+Named, Decimal numeric, and Hexadecimal numeric character references.
+
+---
+
+Asymmetric, Decimal numeric, and Hexadecimal numeric character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which of the following is the correct syntax for a named character reference?
+
+## --answers--
+
+`&amp;`
+
+---
+
+`;amp;`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+---
+
+`&amp>>`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+---
+
+`&amp&`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
new file mode 100644
index 0000000000..7412866fc7
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
@@ -0,0 +1,121 @@
+---
+id: 670838977810401844af6fe0
+title: What Is the Role of the Link Element in HTML, and How Can It Be Used to Link to External Stylesheets?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-link-element-in-html
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the role of the `link` element in HTML?
+
+## --answers--
+
+It specifies the content type of the linked resource.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It determines the visibility of the linked resource on the webpage.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It defines the font size of the linked resource when displayed.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It is used to link to external resources like stylesheets and site icons.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is the role of the `rel` attribute inside the `link` element?
+
+## --answers--
+
+It is used to indicate the language of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+---
+
+It is used to specify the relationship between the linked resource and the HTML document.
+
+---
+
+It is used to define the media type of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+---
+
+It is used to determine the size of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What is a favicon?
+
+## --answers--
+
+A type of JavaScript file used to enhance website functionality.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+---
+
+A type of font used to style text on a website.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+---
+
+A small icon typically displayed in the browser tab next to the site title.
+
+---
+
+A security feature used to prevent cross-site scripting attacks.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
new file mode 100644
index 0000000000..85b77abd45
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
@@ -0,0 +1,121 @@
+---
+id: 670838b10ee87a18e5faff62
+title: What Is the Role of the Script Element in HTML, and How Can It Be Used to Link to External JavaScript Files?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-script-element-in-html
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which attribute is used to link to an external JavaScript file?
+
+## --answers--
+
+The `div` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location/
+
+---
+
+The `defer` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location.
+
+---
+
+The `async` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location.
+
+---
+
+The `src` attribute.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is separation of concerns?
+
+## --answers--
+
+It's about making sure everyone on the team has their own clear responsibilities.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+---
+
+A design principle where you separate your programs into distinct sections and have each section address a separate concern.
+
+---
+
+The act of combining all aspects of a program into a single module for simplicity.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+---
+
+It involves dividing up tasks among team members without considering how they might overlap or affect each other.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which of the following is the correct syntax for linking to an external JavaScript file?
+
+## --answers--
+
+`<script div="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+---
+
+`<script alt="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+---
+
+`<script src="path-to-javascript-file.js"></script>`
+
+---
+
+`<script defer="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
new file mode 100644
index 0000000000..dd0270925c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
@@ -0,0 +1,121 @@
+---
+id: 670838e914096b194b0c51aa
+title: What Is an HTML Boilerplate, and Why Is It Important?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-an-html-boilerplate
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Where would you set the character encoding for your page?
+
+## --answers--
+
+A `meta` element in the `body`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+---
+
+A `head` element in the `body`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+---
+
+A `meta` element in the `head`.
+
+---
+
+In the `DOCTYPE`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Where would you set the language for your page?
+
+## --answers--
+
+In the opening `html` tag.
+
+---
+
+A `meta` element in the `body`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+---
+
+A `head` element in the `body`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+---
+
+A `meta` element in the `head`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+## --video-solution--
+
+1
+
+## --text--
+
+What purpose does a boilerplate serve?
+
+## --answers--
+
+Provides a starting structure for your websites.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+Ensures you are not missing any essential elements.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+Allows you to get started writing the content of your page faster.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+All of the above.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
new file mode 100644
index 0000000000..57fce3537b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
@@ -0,0 +1,120 @@
+---
+id: 670839051794aa19fcef6dc8
+title: What Is UTF-8 Character Encoding and Why Is It Needed?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-utf-8-character-encoding
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+Which attribute is used to set the UTF-8 character encoding for HTML documents?
+
+## --answers--
+
+`pattern`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+---
+
+`content`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+---
+
+`charset`
+
+---
+
+`lang`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is character encoding?
+
+## --answers--
+
+A method computers use to store characters as data.
+
+---
+
+A way to compress text files.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+---
+
+It determines the font used to display text on a screen.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+---
+
+It refers to the process of converting spoken language into written text.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+## --video-solution--
+
+1
+
+## --text--
+
+How many bits are inside of a byte?
+
+## --answers--
+
+1
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+33
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+7
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+8
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
new file mode 100644
index 0000000000..96e393015a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
@@ -0,0 +1,121 @@
+---
+id: 67083952f800051a8a21fcfd
+title: What Is the Role of the Meta Description, and How Does It Affect SEO?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-meta-description
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which element is used to set the description for a web page?
+
+## --answers--
+
+`img`
+
+### --feedback--
+
+Look closely to the title of this video
+
+---
+
+`meta`
+
+---
+
+`slot`
+
+### --feedback--
+
+Look closely to the title of this video
+
+---
+
+`figure`
+
+### --feedback--
+
+Look closely to the title of this video
+
+## --video-solution--
+
+2
+
+## --text--
+
+What does SEO stand for?
+
+## --answers--
+
+Slot Engine Optimization
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Site Enhancement Outreach
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Social Engagement Optimization
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Search Engine Optimization
+
+## --video-solution--
+
+4
+
+## --text--
+
+Where does the page's description typically show up?
+
+## --answers--
+
+Inside the `figure` element.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+---
+
+Inside the `footer` element.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+---
+
+In the search engine results page.
+
+---
+
+In a popup alert message.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
new file mode 100644
index 0000000000..7977b8cc03
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
@@ -0,0 +1,121 @@
+---
+id: 6708396caa00e11b597b3365
+title: What Is the Role of Open Graph Tags, and How Do They Affect SEO?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-open-graph-tags
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What are open graph properties used for?
+
+## --answers--
+
+For embedding interactive multimedia content directly into web pages.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+---
+
+To set how your website's content will be seen on different social media platforms.
+
+---
+
+For generating dynamic pop-up advertisements on websites.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+---
+
+For encrypting sensitive data transmitted between web servers and users' browsers.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What does the `name="og:title"` do in the `meta` element?
+
+## --answers--
+
+It automatically adjusts the font size and style of the webpage title based on user preferences.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It directs the browser to display a specific emoticon or emoji as the title of the webpage.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It causes the webpage to play a specific audio file when the title is displayed in the browser tab.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It specifies the title of your web page content when it is shared on social media platforms.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What does the `property="og:type"` do in the `meta` element?
+
+## --answers--
+
+It selects the page's default font style.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+---
+
+It triggers a pop-up advertisement when the webpage is loaded.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+---
+
+It specifies the type of content used for your web page when it is shared on social media platforms.
+
+---
+
+It changes the webpage's background color based on the user's time zone.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/korean/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
index 692385ab63..c833584c2d 100644
--- a/curriculum/challenges/korean/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
+++ b/curriculum/challenges/korean/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is asynchronous programming?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to execute code in a sequential order.
 
 ---
 
-Placeholder distractor 2
+A technique to handle errors in synchronous code.
 
 ---
 
-Placeholder distractor 3
+A way to guarantee task order.
 
 #### --answer--
 
-Placeholder answer
+A method to execute code concurrently without blocking the main thread.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `async` attribute do when used in a `<script>` tag?
 
 #### --distractors--
 
-Placeholder distractor 1
+It allows the script to be executed after the HTML document has been completely parsed.
 
 ---
 
-Placeholder distractor 2
+It ensures the script runs in a synchronous manner.
 
 ---
 
-Placeholder distractor 3
+It delays the script execution until the browser is idle.
 
 #### --answer--
 
-Placeholder answer
+The script is downloaded in parallel with parsing the page and executed as soon as it is available.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Fetch API in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manage asynchronous callbacks.
 
 ---
 
-Placeholder distractor 2
+To create and manage cookies.
 
 ---
 
-Placeholder distractor 3
+To render dynamic HTML content.
 
 #### --answer--
 
-Placeholder answer
+To make network requests to servers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which `HTTP` method is used to send data to a server for processing?
 
 #### --distractors--
 
-Placeholder distractor 1
+`GET`
 
 ---
 
-Placeholder distractor 2
+`DELETE`
 
 ---
 
-Placeholder distractor 3
+`HEAD`
 
 #### --answer--
 
-Placeholder answer
+`POST`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `res.json()` method do in Express.js?
 
 #### --distractors--
 
-Placeholder distractor 1
+It retrieves data from a JSON file.
 
 ---
 
-Placeholder distractor 2
+It parses a JSON string into a JavaScript object.
 
 ---
 
-Placeholder distractor 3
+It sends raw JSON as a response without any processing.
 
 #### --answer--
 
-Placeholder answer
+It converts a JavaScript object to a JSON string and sends it as a response.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a promise in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to synchronize multiple operations.
 
 ---
 
-Placeholder distractor 2
+A callback function that runs after an operation.
 
 ---
 
-Placeholder distractor 3
+A technique to handle errors in asynchronous code.
 
 #### --answer--
 
-Placeholder answer
+An object that represents the eventual completion (or failure) of an asynchronous operation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does promise chaining allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Execute multiple asynchronous operations in parallel.
 
 ---
 
-Placeholder distractor 2
+Handle synchronous operations more efficiently.
 
 ---
 
-Placeholder distractor 3
+Retry failed operations automatically.
 
 #### --answer--
 
-Placeholder answer
+Pass the result of one promise to the next.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle successful completion of a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.catch()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.then()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle errors in a promise chain?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.then()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.catch()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the use of the `.finally()` method in a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+It returns the result of the promise.
 
 ---
 
-Placeholder distractor 2
+It stops the execution of subsequent promise handlers.
 
 ---
 
-Placeholder distractor 3
+It retries the promise if it fails.
 
 #### --answer--
 
-Placeholder answer
+It executes code after a promise is fulfilled or rejected, regardless of the outcome.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the syntax for declaring an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+`function myFunction() {}`
 
 ---
 
-Placeholder distractor 2
+`function async myFunction() {}`
 
 ---
 
-Placeholder distractor 3
+`async {} => ()`
 
 #### --answer--
 
-Placeholder answer
+`async function myFunction() {}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `await` keyword do in an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+It creates a new promise.
 
 ---
 
-Placeholder distractor 2
+It executes code immediately without waiting.
 
 ---
 
-Placeholder distractor 3
+It returns the result of the promise.
 
 #### --answer--
 
-Placeholder answer
+It pauses the execution of the function until the promise is resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Geolocation API?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manipulate HTML elements.
 
 ---
 
-Placeholder distractor 2
+To create and manage map elements.
 
 ---
 
-Placeholder distractor 3
+To control the device's camera.
 
 #### --answer--
 
-Placeholder answer
+To retrieve the geographical location of a device.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method of the Geolocation API is used to get the current position of the device?
 
 #### --distractors--
 
-Placeholder distractor 1
+`getLocation()`
 
 ---
 
-Placeholder distractor 2
+`getPosition()`
 
 ---
 
-Placeholder distractor 3
+`getLatLong()`
 
 #### --answer--
 
-Placeholder answer
+`getCurrentPosition()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What parameters can be passed to the `getCurrentPosition()` method?
 
 #### --distractors--
 
-Placeholder distractor 1
+Only the success callback function.
 
 ---
 
-Placeholder distractor 2
+Only options.
 
 ---
 
-Placeholder distractor 3
+One the error callback function.
 
 #### --answer--
 
-Placeholder answer
+Success and error callback functions, along with options.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What will the following code return? `fetch('https://api.example.com/data')`
 
 #### --distractors--
 
-Placeholder distractor 1
+The JSON response directly.
 
 ---
 
-Placeholder distractor 2
+An error if the URL is not reachable.
 
 ---
 
-Placeholder distractor 3
+A synchronous response.
 
 #### --answer--
 
-Placeholder answer
+A `Promise` that resolves to a `Response` object
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default HTTP method for the Fetch API?
 
 #### --distractors--
 
-Placeholder distractor 1
+`POST`
 
 ---
 
-Placeholder distractor 2
+`PUT`
 
 ---
 
-Placeholder distractor 3
+`DELETE`
 
 #### --answer--
 
-Placeholder answer
+`GET`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `Promise.all()` method do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resolves a single promise.
 
 ---
 
-Placeholder distractor 2
+It rejects the first promise that fails.
 
 ---
 
-Placeholder distractor 3
+It runs all promises sequentially.
 
 #### --answer--
 
-Placeholder answer
+It executes multiple promises concurrently and returns the results when all are resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you handle multiple asynchronous operations using async/await?
 
 #### --distractors--
 
-Placeholder distractor 1
+You must always use `.then()` for each operation.
 
 ---
 
-Placeholder distractor 2
+You cannot handle multiple operations with async/await.
 
 ---
 
-Placeholder distractor 3
+You must use callback functions for all operations.
 
 #### --answer--
 
-Placeholder answer
+You can use `await` for each operation in sequence and put them inside an async function.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is true about the `fetch` API?
 
 #### --distractors--
 
-Placeholder distractor 1
+It can only handle `GET` requests.
 
 ---
 
-Placeholder distractor 2
+It requires a callback function for handling responses.
 
 ---
 
-Placeholder distractor 3
+It only works in synchronous code.
 
 #### --answer--
 
-Placeholder answer
+It is used to make HTTP requests to a server.
 
diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md b/curriculum/challenges/korean/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
index b43c4043e7..b6812d1bbf 100644
--- a/curriculum/challenges/korean/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
+++ b/curriculum/challenges/korean/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
@@ -381,7 +381,7 @@ Gives animations to the page.
 
 ---
 
-Improves Search Emgine Optimiztion (SEO).
+Improves Search Emgine Optimization (SEO).
 
 #### --answer--
 
diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/korean/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
index 80af1166b6..cac5b80e72 100644
--- a/curriculum/challenges/korean/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
+++ b/curriculum/challenges/korean/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What happens when there is too much content to fit in an element box?
 
 #### --distractors--
 
-Placeholder distractor 1
+Underflow
 
 ---
 
-Placeholder distractor 2
+Compression
 
 ---
 
-Placeholder distractor 3
+Padding
 
 #### --answer--
 
-Placeholder answer
+Overflow
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default behavior of CSS when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+Content is hidden
 
 ---
 
-Placeholder distractor 2
+Content is clipped
 
 ---
 
-Placeholder distractor 3
+Content is resized
 
 #### --answer--
 
-Placeholder answer
+Content is visible
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why does CSS typically avoid hiding content when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+To enhance page design by hiding irrelevant content
 
 ---
 
-Placeholder distractor 2
+To save memory and load pages faster
 
 ---
 
-Placeholder distractor 3
+To automatically fix broken layout issues
 
 #### --answer--
 
-Placeholder answer
+To prevent data loss and make issues noticeable
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you handle overflow in CSS to hide content or add scrollbars?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars
 
 ---
 
-Placeholder distractor 2
+Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars
 
 ---
 
-Placeholder distractor 3
+Use `overflow: none` to hide content and `overflow: show` to display scrollbars
 
 #### --answer--
 
-Placeholder answer
+Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you specify different scrolling behaviors for the x-axis and y-axis in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+By using `scroll-x` and `scroll-y` properties
 
 ---
 
-Placeholder distractor 2
+By using `overflow-x` and `overflow-y` separately in every case
 
 ---
 
-Placeholder distractor 3
+By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x`
 
 #### --answer--
 
-Placeholder answer
+By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform` CSS property allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Change the color and font style of an element
 
 ---
 
-Placeholder distractor 2
+Adjust the margin and padding of an element
 
 ---
 
-Placeholder distractor 3
+Modify the visibility and display of an element
 
 #### --answer--
 
-Placeholder answer
+Rotate, scale, skew, or translate an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform-box: fill-box` property do in an animation that rotates an element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resizes the element to fit the canvas during the transformation
 
 ---
 
-Placeholder distractor 2
+It changes the background of the element during transformation
 
 ---
 
-Placeholder distractor 3
+It sets the transform origin to the top-left corner of the element
 
 #### --answer--
 
-Placeholder answer
+It sets the transform origin to the center of the element's bounding box, allowing it to spin in place
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `transform-origin` property in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It controls the animation speed of transformed elements
 
 ---
 
-Placeholder distractor 2
+It defines the display type of transformed elements
 
 ---
 
-Placeholder distractor 3
+It sets the background of transformed elements
 
 #### --answer--
 
-Placeholder answer
+It specifies the point around which a transformation is applied to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does margin affect the size of an element in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Margin increases the actual size of the element's box
 
 ---
 
-Placeholder distractor 2
+Margin has no effect on the element's size or position
 
 ---
 
-Placeholder distractor 3
+Margin decreases the total area the element occupies on the page
 
 #### --answer--
 
-Placeholder answer
+Margin affects the total area an element occupies but is not part of the actual size of the box
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the content area of an element in CSS represent?
 
 #### --distractors--
 
-Placeholder distractor 1
+It defines the margins and padding around the element
 
 ---
 
-Placeholder distractor 2
+It specifies the border thickness of the element
 
 ---
 
-Placeholder distractor 3
+It controls the visibility of the element on the page
 
 #### --answer--
 
-Placeholder answer
+It contains the "real" content of the element, such as text, images, or videos
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the difference between `content-box` and `border-box` in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`content-box` includes padding and border, while `border-box` includes only content dimensions
 
 ---
 
-Placeholder distractor 2
+Both `content-box` and `border-box` include only the border dimensions
 
 ---
 
-Placeholder distractor 3
+`content-box` is used for 2D elements, while `border-box` is used for 3D elements
 
 #### --answer--
 
-Placeholder answer
+`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+To apply default styles to all elements for faster loading
 
 ---
 
-Placeholder distractor 2
+To minimize the size of CSS files by removing unused styles
 
 ---
 
-Placeholder distractor 3
+To optimize images and fonts for better performance
 
 #### --answer--
 
-Placeholder answer
+To remove default browser styling and create a consistent baseline for styling across different browsers
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What are the common types of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bootstrap Reset, Tailwind Reset, and Foundation Reset
 
 ---
 
-Placeholder distractor 2
+Simple Reset, Comprehensive Reset, and Adaptive Reset
 
 ---
 
-Placeholder distractor 3
+Minimal Reset, Advanced Reset, and Legacy Reset
 
 #### --answer--
 
-Placeholder answer
+Normalize.css, Eric Meyer's Reset, and HTML5 Reset
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `scale3d()` property value do in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It rotates an element in 3D space
 
 ---
 
-Placeholder distractor 2
+It skews an element on the x, y, and z axes
 
 ---
 
-Placeholder distractor 3
+It translates an element in 3D space
 
 #### --answer--
 
-Placeholder answer
+It scales an element along the x, y, and z axes
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the total width of an element calculated in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Total width = width + margin + padding + border
 
 ---
 
-Placeholder distractor 2
+Total width = width + margin + padding
 
 ---
 
-Placeholder distractor 3
+Total width = width + margin + border
 
 #### --answer--
 
-Placeholder answer
+Total width = width + left padding + right padding + left border + right border
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the filter property in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the layout of the element on the page
 
 ---
 
-Placeholder distractor 2
+It changes the background color and texture of an element
 
 ---
 
-Placeholder distractor 3
+It alters the size and position of an element
 
 #### --answer--
 
-Placeholder answer
+It applies visual effects like blur and saturation to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the `filter` property specified in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+As only a single function, where percentage values must be used
 
 ---
 
-Placeholder distractor 2
+As `block` or `inline`, with values expressed in pixels
 
 ---
 
-Placeholder distractor 3
+As `none` or multiple functions, but only percentage values are accepted
 
 #### --answer--
 
-Placeholder answer
+As `none` or one or more functions, where percentage values can also be expressed as decimals
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `contrast()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white
 
 ---
 
-Placeholder distractor 2
+Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it
 
 ---
 
-Placeholder distractor 3
+Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque
 
 #### --answer--
 
-Placeholder answer
+Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `hue-rotate()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the brightness of the input image based on degrees
 
 ---
 
-Placeholder distractor 2
+It rotates an element's size and position in the document
 
 ---
 
-Placeholder distractor 3
+It adjusts the saturation and contrast of the input image
 
 #### --answer--
 
-Placeholder answer
+It applies a hue rotation, where the `<angle>` value defines the degrees around the hue color circle
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens when two animated filters have different function list lengths in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+The shorter list's filters override the longer list's filters
 
 ---
 
-Placeholder distractor 2
+The filters are discarded and no animation is applied
 
 ---
 
-Placeholder distractor 3
+Only the first filter function in each list is animated
 
 #### --answer--
 
-Placeholder answer
+The longer list's missing equivalent filter functions are added to the shorter list using their initial values
 
diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md b/curriculum/challenges/korean/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
index 2f36f50f71..698708ccfd 100644
--- a/curriculum/challenges/korean/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
+++ b/curriculum/challenges/korean/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+Which method is used to check if an `input` element's value satisfies the validation rules?
 
 #### --distractors--
 
-Placeholder distractor 1
+`validateInput()`
 
 ---
 
-Placeholder distractor 2
+`isValid()`
 
 ---
 
-Placeholder distractor 3
+`checkValue()`
 
 #### --answer--
 
-Placeholder answer
+`checkValidity()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if the `checkValidity()` method finds an invalid `input`?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is automatically submitted
 
 ---
 
-Placeholder distractor 2
+Nothing happens
 
 ---
 
-Placeholder distractor 3
+The `input` value is cleared
 
 #### --answer--
 
-Placeholder answer
+The browser displays a validation message
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to customize the message shown during validation failure?
 
 #### --distractors--
 
-Placeholder distractor 1
+`setErrorMessage()`
 
 ---
 
-Placeholder distractor 2
+`setValidationMessage()`
 
 ---
 
-Placeholder distractor 3
+`customMessage()`
 
 #### --answer--
 
-Placeholder answer
+`setCustomValidity()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default validation behavior for required fields when the form is submitted?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is submitted even if required fields are empty
 
 ---
 
-Placeholder distractor 2
+The form submits but gives a warning
 
 ---
 
-Placeholder distractor 3
+The form resets the `input` values
 
 #### --answer--
 
-Placeholder answer
+The browser stops the form submission if required fields are empty
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which actions does not cause an HTML form to be checked for errors?
 
 #### --distractors--
 
-Placeholder distractor 1
+Changing the `input` value
 
 ---
 
-Placeholder distractor 2
+Submitting the form
 
 ---
 
-Placeholder distractor 3
+Calling `reportValidity()`
 
 #### --answer--
 
-Placeholder answer
+Clicking a reset button
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does `checkValidity()` return when all form inputs are valid?
 
 #### --distractors--
 
-Placeholder distractor 1
+`false`
 
 ---
 
-Placeholder distractor 2
+`undefined`
 
 ---
 
-Placeholder distractor 3
+`null`
 
 #### --answer--
 
-Placeholder answer
+`true`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When does the `checkValidity()` method stop form submission?
 
 #### --distractors--
 
-Placeholder distractor 1
+When the form has no submit button
 
 ---
 
-Placeholder distractor 2
+When the form `action` is empty
 
 ---
 
-Placeholder distractor 3
+When the form method is POST
 
 #### --answer--
 
-Placeholder answer
+When the form has at least one invalid `input` (and the default behavior of form submission is prevented).
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if `checkValidity()` is called, but a field fails validation?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form submits without error
 
 ---
 
-Placeholder distractor 2
+The `input` values are cleared
 
 ---
 
-Placeholder distractor 3
+The form closes immediately
 
 #### --answer--
 
-Placeholder answer
+The invalid field is highlighted and a message appears
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which action will make `checkValidity()` run?
 
 #### --distractors--
 
-Placeholder distractor 1
+Resetting the form
 
 ---
 
-Placeholder distractor 2
+Changing an `input` value
 
 ---
 
-Placeholder distractor 3
+Clicking an anchor tag
 
 #### --answer--
 
-Placeholder answer
+Submitting the form manually
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of calling `checkValidity()` before submitting a form?
 
 #### --distractors--
 
-Placeholder distractor 1
+To automatically submit the form
 
 ---
 
-Placeholder distractor 2
+To reload the page
 
 ---
 
-Placeholder distractor 3
+To clear all `input` fields
 
 #### --answer--
 
-Placeholder answer
+To check if all `input` elements meet their specified constraints
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the main purpose of `e.preventDefault()`?
 
 #### --distractors--
 
-Placeholder distractor 1
+To reload the form
 
 ---
 
-Placeholder distractor 2
+To clear form data
 
 ---
 
-Placeholder distractor 3
+To reset the form values
 
 #### --answer--
 
-Placeholder answer
+To stop the default action of an event
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When used on a form's submit event, what does `e.preventDefault()` do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It submits the form
 
 ---
 
-Placeholder distractor 2
+It clears all form fields
 
 ---
 
-Placeholder distractor 3
+It disables the form temporarily
 
 #### --answer--
 
-Placeholder answer
+It prevents the form from being submitted
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In which scenario is `e.preventDefault()` most useful?
 
 #### --distractors--
 
-Placeholder distractor 1
+When handling a button click that submits a form
 
 ---
 
-Placeholder distractor 2
+When closing a modal dialog
 
 ---
 
-Placeholder distractor 3
+When opening a new page
 
 #### --answer--
 
-Placeholder answer
+When submitting a form via AJAX and preventing a page reload
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if you forget to call `e.preventDefault()` on a form submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is submitted via AJAX
 
 ---
 
-Placeholder distractor 2
+The form does not submit
 
 ---
 
-Placeholder distractor 3
+The form data is lost
 
 #### --answer--
 
-Placeholder answer
+The form submits and refreshes the page
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which default behavior can be prevented using `e.preventDefault()`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Editing a form
 
 ---
 
-Placeholder distractor 2
+Rendering the form
 
 ---
 
-Placeholder distractor 3
+Reloading the form
 
 #### --answer--
 
-Placeholder answer
+The default behavior caused by submitting a form (e.g., page refresh or POST call).
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What triggers the form's submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+When an input field changes
 
 ---
 
-Placeholder distractor 2
+When the form is reset
 
 ---
 
-Placeholder distractor 3
+When the form's action is cleared
 
 #### --answer--
 
-Placeholder answer
+When a form's submit button is clicked or Enter is pressed
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Where do you usually handle the submit event in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+On a text input element
 
 ---
 
-Placeholder distractor 2
+On any field in the form
 
 ---
 
-Placeholder distractor 3
+On a button element outside the form
 
 #### --answer--
 
-Placeholder answer
+On the form element itself
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the submit event do by default?
 
 #### --distractors--
 
-Placeholder distractor 1
+It validates the form but doesn’t submit it
 
 ---
 
-Placeholder distractor 2
+It clears the form fields
 
 ---
 
-Placeholder distractor 3
+It cancels form submission
 
 #### --answer--
 
-Placeholder answer
+It sends form data to the server specified in the form's action
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which event should you listen for to handle form data when the form is submitted in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+`"input"`
 
 ---
 
-Placeholder distractor 2
+`"change"`
 
 ---
 
-Placeholder distractor 3
+`"focus"`
 
 #### --answer--
 
-Placeholder answer
+`"submit"`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What must be done to prevent the default form submission behavior in the submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+Call `submit.preventDefault()`
 
 ---
 
-Placeholder distractor 2
+Stop the form from being displayed
 
 ---
 
-Placeholder distractor 3
+Set the form's `method` to `"GET"`
 
 #### --answer--
 
-Placeholder answer
+Call `e.preventDefault()`
 
diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
index 022a3aef8b..07bda7d052 100644
--- a/curriculum/challenges/korean/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
+++ b/curriculum/challenges/korean/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+The Fibonacci sequence is a series where each number is the sum of the two preceding ones, starting with `0` and `1`. The sequence goes: `0, 1, 1, 2, 3, 5, 8, 13, 21...` and so on. What is the best approach to calculate `nth` number in the sequence?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use the formula `fib(n) = fib(n-1) * fib(n-2)`.
 
 ---
 
-Placeholder distractor 2
+Use recursion with memoization to avoid recalculating subproblems where `fib(n) = (n-1) + (n-2)`.
 
 ---
 
-Placeholder distractor 3
+Use a for loop to calculate iteratively where `fib(n) = fib(n-1) + (n-2)`.
 
 #### --answer--
 
-Placeholder answer
+Use recursion with memoization to avoid recalculating subproblems where `fib(n) = fib(n-1) + fib(n-2)`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+A binary string, such as `"1011"`, represents a number in base-2, where each digit corresponds to a power of `2`. What process can be used to convert this binary string into its decimal equivalent?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use the `parseInt()` function with base `10`.
 
 ---
 
-Placeholder distractor 2
+Convert the string to an array, then sum the digits using bitwise operations.
 
 ---
 
-Placeholder distractor 3
+Use the `Number()` function directly with a binary string.
 
 #### --answer--
 
-Placeholder answer
+Multiply each character by powers of `2` and sum them up.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following algorithm will move all zeroes in an array to the end while keeping the order of other elements unchanged? For example, given `[0, 1, 0, 3, 12]`, return `[1, 3, 12, 0, 0]`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Sort the array in decreasing order and place zeros at the start.
 
 ---
 
-Placeholder distractor 2
+Sort the array in ascending order.
 
 ---
 
-Placeholder distractor 3
+Use recursion to remove all zeros and add them to the front.
 
 #### --answer--
 
-Placeholder answer
+Use a two-pointer technique to swap non-zero elements with zero elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a sentence, such as `"I am a frontend engineer"`, what approach can be taken to reverse the order of the words, producing the output `"engineer frontend a am I"`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Split the string into words using `split(" ")`, reverse the array, and join it back into a string using `join("_")`.
 
 ---
 
-Placeholder distractor 2
+Sort the words alphabetically and return the result.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to reverse each word.
 
 #### --answer--
 
-Placeholder answer
+Split the string into words using `split(" ")`, reverse the array, and join it back into a string using `join(" ")`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a string, what approach would be used to find the first non-repeating character? For example, in the string `"codecamp"`, it would be `'o'`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Sort the string and check for consecutive duplicates.
 
 ---
 
-Placeholder distractor 2
+Convert the string to an array, then filter for unique elements.
 
 ---
 
-Placeholder distractor 3
+Use a regular expression to find the first non-repeat.
 
 #### --answer--
 
-Placeholder answer
+Iterate over the string twice, once to count number of occurrences and once to find the first unique character.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach can be used to encode a string by counting consecutive repeated characters? For example, given the input`"mississippi"`, the output should be `"m1i1s2i1s2i1p2i1"`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Use regular expressions to match repeated characters.
 
 ---
 
-Placeholder distractor 2
+Use `map()` to map consecutive characters to the output.
 
 ---
 
-Placeholder distractor 3
+Sort the string and count occurrences.
 
 #### --answer--
 
-Placeholder answer
+Iterate through the string, counting consecutive occurrences of each character while building the answer.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach can be used to reverse the digits of an integer? For example, given the input `1234`, the output should be `4321`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Use bitwise operations to reverse the digits.
 
 ---
 
-Placeholder distractor 2
+Convert the integer to a binary number and reverse it.
 
 ---
 
-Placeholder distractor 3
+Use the `reverse()` method directly on the integer.
 
 #### --answer--
 
-Placeholder answer
+Use a loop to extract digits from the integer and reconstruct the reversed integer.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach would be used to generate Pascal's Triangle up to `n` rows? For example, for `n = 3`, the result would be `[[1], [1, 1], [1, 2, 1]]`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Generate rows by using a function that outputs prime numbers and maps them to each row.
 
 ---
 
-Placeholder distractor 2
+Use a loop to generate each row by multiplying adjacent elements from the previous row.
 
 ---
 
-Placeholder distractor 3
+Use `Math.random()` to generate the rows.
 
 #### --answer--
 
-Placeholder answer
+Use a loop to generate each row by adding adjacent elements from the previous row.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which algorithm is most efficient for sorting an array of size `n` containing numbers from `1` to `n`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bubble Sort
 
 ---
 
-Placeholder distractor 2
+Merge Sort
 
 ---
 
-Placeholder distractor 3
+Quick Sort
 
 #### --answer--
 
-Placeholder answer
+Cyclic Sort
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which algorithmic approach is best for solving the problem of finding the minimum number of coins for a given amount when only one type of coin is provided?
 
 #### --distractors--
 
-Placeholder distractor 1
+Dynamic Programming
 
 ---
 
-Placeholder distractor 2
+Divide and Conquer
 
 ---
 
-Placeholder distractor 3
+Backtracking
 
 #### --answer--
 
-Placeholder answer
+Greedy Algorithm
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following problems can be solved efficiently using the two-pointer technique?
 
 #### --distractors--
 
-Placeholder distractor 1
+Sorting an array.
 
 ---
 
-Placeholder distractor 2
+Traversing a tree level by level.
 
 ---
 
-Placeholder distractor 3
+Finding the middle element of a linked list.
 
 #### --answer--
 
-Placeholder answer
+Finding two numbers in a sorted array that sum up to a target value.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a Roman numeral string, convert it to its corresponding integer value. For example, `"IX"` should return `9`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Parse the string from left to right and add the values of individual numerals.
 
 ---
 
-Placeholder distractor 2
+Parse each character and multiply by its index.
 
 ---
 
-Placeholder distractor 3
+Use the `parseInt()` function on the Roman numeral string.
 
 #### --answer--
 
-Placeholder answer
+Parse the string from right to left, adding the values of individual numerals and subtracting when a smaller numeral comes before a larger numeral.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can one check if a given string is a palindrome (the same forwards and backwards), for example `"madam"`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use Slow and Fast Pointer.
 
 ---
 
-Placeholder distractor 2
+Compare it to its reverse after sorting the string.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to remove all non-alphabetic characters and check equality.
 
 #### --answer--
 
-Placeholder answer
+Compare the string to its reverse.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a number `n`, write a function that prints numbers from `1` to `n`. For multiples of `3`, print `"Fizz"` for multiples of `5`, print `"Buzz"` and for multiples of both `3` and `5`, print `"FizzBuzz"`. What is the simplest approach to this?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `Math.random()` to generate numbers between `1` and `n` and check the result.
 
 ---
 
-Placeholder distractor 2
+Use a for loop and check divisibility in-order of `3`, `5` and `15` with if conditions or switch.
 
 ---
 
-Placeholder distractor 3
+Create a recursive function that checks divisibility by `3` and `5`.
 
 #### --answer--
 
-Placeholder answer
+Use a for loop and check divisibility in-order of `15`, `5` and `3` with if conditions or switch.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+The Caesar cipher is a simple encryption technique where each letter in a string is shifted forward by a fixed number of positions in the alphabet. How would you shift all letters in a string by `3` positions?
 
 #### --distractors--
 
-Placeholder distractor 1
+Subtract `3` from the ASCII value of each character.
 
 ---
 
-Placeholder distractor 2
+Replace each vowel with the next consonant.
 
 ---
 
-Placeholder distractor 3
+Add `3` to the ASCII value of each character, but only for uppercase letters.
 
 #### --answer--
 
-Placeholder answer
+Add `3` to the ASCII value of each character, wrapping around for `'z'` and `'Z'`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Anagrams are words formed by rearranging letters of another word. How can one determine if two strings are anagrams?
 
 #### --distractors--
 
-Placeholder distractor 1
+Compare total number of letters in both strings.
 
 ---
 
-Placeholder distractor 2
+Reverse one string and compare with the other.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to remove duplicate letters and check equality.
 
 #### --answer--
 
-Placeholder answer
+Sort both strings and check if they are equal.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is the correct approach to check if a given number is prime?
 
 #### --distractors--
 
-Placeholder distractor 1
+Check if the number is divisible by `2` and `3`. If not, it's prime.
 
 ---
 
-Placeholder distractor 2
+Check if the number is divisible by any odd number between `3` and the square root of the number.
 
 ---
 
-Placeholder distractor 3
+Convert the number to binary and check if it has exactly two 1s.
 
 #### --answer--
 
-Placeholder answer
+Loop from `2` to up to the square root of the prime candidate, and make sure none of the number divides it evenly.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following describes the correct approach to find the greatest common divisor (GCD) of two numbers?
 
 #### --distractors--
 
-Placeholder distractor 1
+Find the average of the two numbers and round to the nearest integer.
 
 ---
 
-Placeholder distractor 2
+Multiply the two numbers together and then divide by their least common divisor.
 
 ---
 
-Placeholder distractor 3
+Add the two numbers together and divide by `2`.
 
 #### --answer--
 
-Placeholder answer
+Use recursion where `gcd(a, b) = gcd(b, a % b)` where the base case would be to return first parameter when second parameter is zero.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+The factorial of a non-negative integer `n` (denoted `n!`) is the product of all positive integers from `1` to `n`, with `0! = 1`. Which of the following approaches can be used to calculate the factorial of a given number `n`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Add the numbers from `1` to `n`.
 
 ---
 
-Placeholder distractor 2
+Raise `n` to the power of `n-1`.
 
 ---
 
-Placeholder distractor 3
+Find the prime factorization of n and then multiply the prime factors together.
 
 #### --answer--
 
-Placeholder answer
+Multiplying numbers from `1` to `n` in a loop.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is the most efficient approach to search for a given integer within a distinct, sorted array of integers?
 
 #### --distractors--
 
-Placeholder distractor 1
+Linear Search.
 
 ---
 
-Placeholder distractor 2
+Sort the array and search using Linear Search.
 
 ---
 
-Placeholder distractor 3
+Create a hash table with the array elements and check for the given integer.
 
 #### --answer--
 
-Placeholder answer
+Binary Search.
 
diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md b/curriculum/challenges/korean/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
index bf02c6d126..30b6619cac 100644
--- a/curriculum/challenges/korean/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
+++ b/curriculum/challenges/korean/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
@@ -83,7 +83,7 @@ Type `nano [FILE]`, then press the **Enter** key
 
 #### --text--
 
-What type of files is nano capable of creating and modifiying?
+What type of files is nano capable of creating and modifying?
 
 #### --distractors--
 
diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md b/curriculum/challenges/korean/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
index fb4f4e6437..f73b3b9e1d 100644
--- a/curriculum/challenges/korean/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
+++ b/curriculum/challenges/korean/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
@@ -17,439 +17,440 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+How do you handle a click event in a React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<button onClick='handleClick()'>Click me</button>`
 
 ---
 
-Placeholder distractor 2
+`<button onClick={() => handleClick}>Click me</button>`
 
 ---
 
-Placeholder distractor 3
+`<button click={handleClick}>Click me</button>`
 
 #### --answer--
 
-Placeholder answer
+`<button onClick={handleClick}>Click me</button>`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is NOT a method for conditional rendering in React?
 
 #### --distractors--
 
-Placeholder distractor 1
+Ternary operators
 
 ---
 
-Placeholder distractor 2
+Logical `&&` operator
 
 ---
 
-Placeholder distractor 3
+`switch` statements
 
 #### --answer--
 
-Placeholder answer
+`setTimeout`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does `<React.Fragment>` do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Wraps components with adding extra DOM nodes.
 
 ---
 
-Placeholder distractor 2
+Creates a new HTML element.
 
 ---
 
-Placeholder distractor 3
+Deletes an existing element.
 
 #### --answer--
 
-Placeholder answer
+Wraps components without adding extra DOM nodes.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of React Context?
 
 #### --distractors--
 
-Placeholder distractor 1
+Managing component styles.
 
 ---
 
-Placeholder distractor 2
+Passing data through the component.
 
 ---
 
-Placeholder distractor 3
+Controlling component re-renders.
 
 #### --answer--
 
-Placeholder answer
+Passing data through the component tree without props.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is TRUE about JSX?
 
 #### --distractors--
 
-Placeholder distractor 1
+JSX must always be written in separate files from JavaScript.
 
 ---
 
-Placeholder distractor 2
+JSX cannot use JavaScript expressions.
 
 ---
 
-Placeholder distractor 3
+JSX is not recommended for React applications.
 
 #### --answer--
 
-Placeholder answer
+JSX allows writing HTML within JavaScript code.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a con of using Vanilla JS instead of a framework?
 
 #### --distractors--
 
-Placeholder distractor 1
+Automatic state management.
 
 ---
 
-Placeholder distractor 2
+Built-in routing capabilities.
 
 ---
 
-Placeholder distractor 3
+Declarative UI rendering.
 
 #### --answer--
 
-Placeholder answer
+Increased verbosity and manual DOM manipulation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a single-page application typically update the view?
 
 #### --distractors--
 
-Placeholder distractor 1
+By making a full server reload.
 
 ---
 
-Placeholder distractor 2
+By reloading the entire HTML document.
 
 ---
 
-Placeholder distractor 3
+By using server-side rendering only.
 
 #### --answer--
 
-Placeholder answer
+By updating only the necessary parts of the page.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to create a functional React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+Using classes only.
 
 ---
 
-Placeholder distractor 2
+Using the `React.Component` only.
 
 ---
 
-Placeholder distractor 3
+Using JavaScript constructors.
 
 #### --answer--
 
-Placeholder answer
+Using the `function` keyword or arrow functions.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is not a valid JSX element?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<div className='class'></div>`
 
 ---
 
-Placeholder distractor 2
+`<span>Hello World</span>`
 
 ---
 
-Placeholder distractor 3
+`<button>Click Me</button>`
 
 #### --answer--
 
-Placeholder answer
+`<img class='img'>`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is an example of a meta framework for React?
 
 #### --distractors--
 
-Placeholder distractor 1
+Vue.js
 
 ---
 
-Placeholder distractor 2
+Angular
 
 ---
 
-Placeholder distractor 3
+Svelte
 
 #### --answer--
 
-Placeholder answer
+Next.js
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What tool would you use to bootstrap a new React project?
 
 #### --distractors--
 
-Placeholder distractor 1
+Webpack
 
 ---
 
-Placeholder distractor 2
+npm
 
 ---
 
-Placeholder distractor 3
+Babel
 
 #### --answer--
 
-Placeholder answer
+Vite
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command installs dependencies listed in `package.json`?
 
 #### --distractors--
 
-Placeholder distractor 1
+`npm run`
 
 ---
 
-Placeholder distractor 2
+`npm update`
 
 ---
 
-Placeholder distractor 3
+`npm build`
 
 #### --answer--
 
-Placeholder answer
+`npm install`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How would you pass a `name` prop to a child component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<ChildComponent props="name" />`
 
 ---
 
-Placeholder distractor 2
+`<ChildComponent {props} />`
 
 ---
 
-Placeholder distractor 3
+`<ChildComponent {'John'} />`
 
 #### --answer--
 
-Placeholder answer
+`<ChildComponent name="Vignesh" />`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to conditionally render a component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<Home/>`
 
 ---
 
-Placeholder distractor 2
+`<Home>isLoggedIn</Home>`
 
 ---
 
-Placeholder distractor 3
+`<Home showIf={isLoggedIn} />`
 
 #### --answer--
 
-Placeholder answer
+`{isLoggedIn ? <Home /> : <Login />}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a child component, how do you access the `name` prop passed from a parent component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`this.props.name`
 
 ---
 
-Placeholder distractor 2
+`this.name`
 
 ---
 
-Placeholder distractor 3
+`{props}.name`
 
 #### --answer--
 
-Placeholder answer
+`props.name`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to add an inline style in React?
 
 #### --distractors--
 
-Placeholder distractor 1
+`style={{ color: blue }}`
 
 ---
 
-Placeholder distractor 2
+`style="color: blue"`
 
 ---
 
-Placeholder distractor 3
+`style: { color: 'blue' }`
 
 #### --answer--
 
-Placeholder answer
+`style={{ color: 'blue' }}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to conditionally render a React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+Using `if` statements inside JSX.
 
 ---
 
-Placeholder distractor 2
+Declaring a new component inside a `render()` method.
 
 ---
 
-Placeholder distractor 3
+Using `while` loops inside JSX.
 
 #### --answer--
 
-Placeholder answer
+Using ternary operators or logical `&&` operators within JSX.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What causes a React component to re-render?
 
 #### --distractors--
 
-Placeholder distractor 1
+Directly modifying the state variable.
 
 ---
 
-Placeholder distractor 2
+Calling the `render()` method.
 
 ---
 
-Placeholder distractor 3
+Recompiling the project.
 
 #### --answer--
 
-Placeholder answer
+Changing the state using `setState`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How would you specify a required `name` prop using `PropTypes`?
 
 #### --distractors--
 
-Placeholder distractor 1
+`name: PropTypes.bool`
 
 ---
 
-Placeholder distractor 2
+`name: PropTypes.array.isRequired`
 
 ---
 
-Placeholder distractor 3
+`name: PropTypes.string`
 
 #### --answer--
 
-Placeholder answer
+`name: PropTypes.string.isRequired`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What file is used to define project dependencies in a React/Node.js project?
 
 #### --distractors--
 
-Placeholder distractor 1
+`package.lock.json`
 
 ---
 
-Placeholder distractor 2
+`index.html`
 
 ---
 
-Placeholder distractor 3
+`webpack.config.js`
 
 #### --answer--
 
-Placeholder answer
+`package.json`
+
 
diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/korean/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
index 79e4cb7a88..6855b5dea7 100644
--- a/curriculum/challenges/korean/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
+++ b/curriculum/challenges/korean/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A database structured to recognize non-relation between stored items.
 
 ---
 
-Placeholder distractor 2
+A database that stores unstructured data.
 
 ---
 
-Placeholder distractor 3
+A flat file-based system.
 
 #### --answer--
 
-Placeholder answer
+A database structured to recognize relations between stored items.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a non-relational database differ from a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Non-relational databases use tables, while relational databases do not.
 
 ---
 
-Placeholder distractor 2
+Relational databases can store unstructured data.
 
 ---
 
-Placeholder distractor 3
+Non-relational databases are slower than relational databases.
 
 #### --answer--
 
-Placeholder answer
+Non-relational databases can store unstructured data.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `\l` command do when executed in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all schemas
 
 ---
 
-Placeholder distractor 2
+Lists all tables
 
 ---
 
-Placeholder distractor 3
+Connects to a database
 
 #### --answer--
 
-Placeholder answer
+Lists all databases
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following commands creates a new table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD TABLE`
 
 ---
 
-Placeholder distractor 2
+`NEW TABLE`
 
 ---
 
-Placeholder distractor 3
+`ALTER TABLE`
 
 #### --answer--
 
-Placeholder answer
+`CREATE TABLE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of a foreign key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To allow duplication of data.
 
 ---
 
-Placeholder distractor 2
+To uniquely identify a row in the table.
 
 ---
 
-Placeholder distractor 3
+To store large amounts of text data.
 
 #### --answer--
 
-Placeholder answer
+To create a relationship between two tables.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command will add a new column to an existing table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD COLUMN column_name TO table_name data_type;`
 
 ---
 
-Placeholder distractor 2
+`INSERT COLUMN column_name INTO table_name data_type;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name ADD COLUMN column_name data_type;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name ADD COLUMN column_name data_type;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What type of relationship exists when one record in Table A corresponds to one or more records in Table B?
 
 #### --distractors--
 
-Placeholder distractor 1
+One-to-One (1-1)
 
 ---
 
-Placeholder distractor 2
+Many-to-Many (m-m)
 
 ---
 
-Placeholder distractor 3
+Many-to-one(m-1)
 
 #### --answer--
 
-Placeholder answer
+One-to-Many (1-m)
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary purpose of normalization in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To increase the speed of data retrieval.
 
 ---
 
-Placeholder distractor 2
+To enforce security measures.
 
 ---
 
-Placeholder distractor 3
+To simplify the database schema.
 
 #### --answer--
 
-Placeholder answer
+To eliminate data redundancy and ensure data integrity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you delete a column from a table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 2
+`DELETE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name DELETE column_name;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name DROP COLUMN column_name;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the function of the `PRIMARY KEY` constraint in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+To link two tables together.
 
 ---
 
-Placeholder distractor 2
+To define the default value for a column.
 
 ---
 
-Placeholder distractor 3
+To allow null values in the column.
 
 #### --answer--
 
-Placeholder answer
+To ensure that the column contains unique values.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the command `\c` do in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all tables in the current database.
 
 ---
 
-Placeholder distractor 2
+Displays the current database connection details.
 
 ---
 
-Placeholder distractor 3
+Exits the `psql` shell.
 
 #### --answer--
 
-Placeholder answer
+Connects to the specified database.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command inserts data into a table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`PUT VALUES`
 
 ---
 
-Placeholder distractor 2
+`UPDATE INTO`
 
 ---
 
-Placeholder distractor 3
+`ADD DATA`
 
 #### --answer--
 
-Placeholder answer
+`INSERT INTO`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you rename a column in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`MODIFY COLUMN`
 
 ---
 
-Placeholder distractor 2
+`CHANGE COLUMN`
 
 ---
 
-Placeholder distractor 3
+`ALTER COLUMN`
 
 #### --answer--
 
-Placeholder answer
+`RENAME COLUMN`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which query will delete all records from the employees table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE ALL`
 
 ---
 
-Placeholder distractor 2
+`TRUNCATE employees`
 
 ---
 
-Placeholder distractor 3
+`DROP RECORDS`
 
 #### --answer--
 
-Placeholder answer
+`DELETE FROM employees`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which SQL constraint specifically ensures that a column can contain only unique values, allowing nulls?
 
 #### --distractors--
 
-Placeholder distractor 1
+`NOT NULL`
 
 ---
 
-Placeholder distractor 2
+`FOREIGN KEY`
 
 ---
 
-Placeholder distractor 3
+`PRIMARY KEY`
 
 #### --answer--
 
-Placeholder answer
+`UNIQUE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a relational database, what is an index used for?
 
 #### --distractors--
 
-Placeholder distractor 1
+To store additional metadata about tables.
 
 ---
 
-Placeholder distractor 2
+To ensure unique values in a column.
 
 ---
 
-Placeholder distractor 3
+To enforce data integrity.
 
 #### --answer--
 
-Placeholder answer
+To speed up data retrieval.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does a one-to-one (1-1) relationship represent in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Each record in Table A corresponds to one or more records in Table B.
 
 ---
 
-Placeholder distractor 2
+Each record in Table A corresponds to no records in Table B.
 
 ---
 
-Placeholder distractor 3
+Each record in Table A corresponds to multiple records in Table B and vice versa.
 
 #### --answer--
 
-Placeholder answer
+Each record in Table A corresponds to exactly one record in Table B.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command will list all tables in the current PostgreSQL database?
 
 #### --distractors--
 
-Placeholder distractor 1
+`\l`
 
 ---
 
-Placeholder distractor 2
+`SHOW TABLES`
 
 ---
 
-Placeholder distractor 3
+`\t`
 
 #### --answer--
 
-Placeholder answer
+`\d`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md b/curriculum/challenges/korean/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
index 6a4965d122..af439d1aab 100644
--- a/curriculum/challenges/korean/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
+++ b/curriculum/challenges/korean/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What CSS property is commonly used to create a flexible layout in a container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`display: block;`
 
 ---
 
-Placeholder distractor 2
+`display: inline;`
 
 ---
 
-Placeholder distractor 3
+`display: table;`
 
 #### --answer--
 
-Placeholder answer
+`display: flex;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the main purpose of media queries in responsive web design?
 
 #### --distractors--
 
-Placeholder distractor 1
+To change the color scheme of the page.
 
 ---
 
-Placeholder distractor 2
+To create animations.
 
 ---
 
-Placeholder distractor 3
+To adjust margins for print pages.
 
 #### --answer--
 
-Placeholder answer
+To apply different styles based on the screen size or device type.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which media feature in a media query checks the width of the browser window?
 
 #### --distractors--
 
-Placeholder distractor 1
+`min-height`
 
 ---
 
-Placeholder distractor 2
+`max-aspect-ratio`
 
 ---
 
-Placeholder distractor 3
+`resolution`
 
 #### --answer--
 
-Placeholder answer
+`min-width`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which CSS unit is relative to the width of the viewport?
 
 #### --distractors--
 
-Placeholder distractor 1
+`em`
 
 ---
 
-Placeholder distractor 2
+`px`
 
 ---
 
-Placeholder distractor 3
+`rem`
 
 #### --answer--
 
-Placeholder answer
+`vw`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does mobile-first design emphasize?
 
 #### --distractors--
 
-Placeholder distractor 1
+Designing for desktops and scaling down for smaller devices.
 
 ---
 
-Placeholder distractor 2
+Using only desktop breakpoints.
 
 ---
 
-Placeholder distractor 3
+Focusing on the highest resolution devices first.
 
 #### --answer--
 
-Placeholder answer
+Designing for smaller screens first and scaling up for larger devices.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which media query will apply styles when the device's width is between 600px and 1200px?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 1200px)`
 
 ---
 
-Placeholder distractor 2
+`@media screen and (min-width: 600px)`
 
 ---
 
-Placeholder distractor 3
+`@media screen and (width: 800px)`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 600px) and (max-width: 1200px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default flex-direction value in Flexbox?
 
 #### --distractors--
 
-Placeholder distractor 1
+`column`
 
 ---
 
-Placeholder distractor 2
+`row-reverse`
 
 ---
 
-Placeholder distractor 3
+`column-reverse`
 
 #### --answer--
 
-Placeholder answer
+`row`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In Flexbox, how do you distribute space between items in a container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`align-items`
 
 ---
 
-Placeholder distractor 2
+`flex-grow`
 
 ---
 
-Placeholder distractor 3
+`flex-wrap`
 
 #### --answer--
 
-Placeholder answer
+`justify-content`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you apply a grid layout to a container in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`display: flexbox;`
 
 ---
 
-Placeholder distractor 2
+`display: block;`
 
 ---
 
-Placeholder distractor 3
+`display: table;`
 
 #### --answer--
 
-Placeholder answer
+`display: grid;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `fr` unit represent in CSS Grid?
 
 #### --distractors--
 
-Placeholder distractor 1
+Flexible ratio
 
 ---
 
-Placeholder distractor 2
+Frame ratio
 
 ---
 
-Placeholder distractor 3
+Fixed region
 
 #### --answer--
 
-Placeholder answer
+Fraction of available space
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is a valid media query for targeting devices with a resolution of 2x or higher?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media (resolution: 2x)`
 
 ---
 
-Placeholder distractor 2
+`@media (max-resolution: 2x)`
 
 ---
 
-Placeholder distractor 3
+`@media screen and (min-width: 1200px)`
 
 #### --answer--
 
-Placeholder answer
+`@media (min-resolution: 2px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which property controls the number of columns in a grid container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`grid-template-rows`
 
 ---
 
-Placeholder distractor 2
+`grid-auto-rows`
 
 ---
 
-Placeholder distractor 3
+`grid-template`
 
 #### --answer--
 
-Placeholder answer
+`grid-template-columns`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you set up a media query for screens larger than 768px?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 768px)`
 
 ---
 
-Placeholder distractor 2
+`@media only screen and (width > 768px)`
 
 ---
 
-Placeholder distractor 3
+`@media (screen-width: 768px)`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 768px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `flex-wrap` property in Flexbox?
 
 #### --distractors--
 
-Placeholder distractor 1
+To align items along the cross axis.
 
 ---
 
-Placeholder distractor 2
+To reverse the order of flex items.
 
 ---
 
-Placeholder distractor 3
+To distribute space evenly between items.
 
 #### --answer--
 
-Placeholder answer
+To allow flex items to wrap onto multiple lines.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following breakpoints is commonly used for tablets in responsive web design?
 
 #### --distractors--
 
-Placeholder distractor 1
+`480px`
 
 ---
 
-Placeholder distractor 2
+`1920px`
 
 ---
 
-Placeholder distractor 3
+`2560px`
 
 #### --answer--
 
-Placeholder answer
+`768px`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you center an item horizontally in a flex container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`align-items: center;`
 
 ---
 
-Placeholder distractor 2
+`flex-direction: row;`
 
 ---
 
-Placeholder distractor 3
+`flex-grow: 1;`
 
 #### --answer--
 
-Placeholder answer
+`justify-content: center;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In mobile-first design, which media query should be used to target larger screens?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 600px)`
 
 ---
 
-Placeholder distractor 2
+`@media screen and (height: 600px)`
 
 ---
 
-Placeholder distractor 3
+`@media only screen`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 600px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which CSS property is used to create a layout that adjusts based on screen size without media queries?
 
 #### --distractors--
 
-Placeholder distractor 1
+`float`
 
 ---
 
-Placeholder distractor 2
+`display: block`
 
 ---
 
-Placeholder distractor 3
+`width: 100%`
 
 #### --answer--
 
-Placeholder answer
+`flex`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you prevent a flex container from shrinking smaller than its content?
 
 #### --distractors--
 
-Placeholder distractor 1
+`flex-shrink: 1;`
 
 ---
 
-Placeholder distractor 2
+`flex-direction: column;`
 
 ---
 
-Placeholder distractor 3
+`align-items: flex-start;`
 
 #### --answer--
 
-Placeholder answer
+`flex-shrink: 0;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you create a responsive image that scales with the width of its container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`max-height: 100%;`
 
 ---
 
-Placeholder distractor 2
+`object-fit: contain;`
 
 ---
 
-Placeholder distractor 3
+`min-width: 100%;`
 
 #### --answer--
 
-Placeholder answer
+`max-width: 100%;`
 
diff --git a/curriculum/challenges/korean/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md b/curriculum/challenges/korean/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
index 47b4ceeba0..4d67427ccc 100644
--- a/curriculum/challenges/korean/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
+++ b/curriculum/challenges/korean/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+Which of the following is a common issue with the `datetime-local` input type?
 
 #### --distractors--
 
-Placeholder distractor 1
+It cannot be used with CSS variables.
 
 ---
 
-Placeholder distractor 2
+It automatically submits the form upon value selection.
 
 ---
 
-Placeholder distractor 3
+It does not support real-time updates.
 
 #### --answer--
 
-Placeholder answer
+The input format is different across browsers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why is it important to use `box-sizing: border-box;` when styling text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the text input focusable with a keyboard.
 
 ---
 
-Placeholder distractor 2
+It hides the input’s placeholder text.
 
 ---
 
-Placeholder distractor 3
+It removes the default browser styling for inputs.
 
 #### --answer--
 
-Placeholder answer
+It ensures padding and borders are included in the element’s width and height.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a benefit of setting a max-width for text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It prevents users from entering long text.
 
 ---
 
-Placeholder distractor 2
+It makes the input unresponsive on larger screens.
 
 ---
 
-Placeholder distractor 3
+It automatically adjusts the font size.
 
 #### --answer--
 
-Placeholder answer
+It ensures the input doesn’t stretch too wide on larger screens.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should you add `:focus` styles to text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It hides the input’s border.
 
 ---
 
-Placeholder distractor 2
+It disables user input.
 
 ---
 
-Placeholder distractor 3
+It forces the browser to ignore default styles.
 
 #### --answer--
 
-Placeholder answer
+It improves accessibility by making the input easier to identify when focused.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you prevent text inputs from being cut off when resized?
 
 #### --distractors--
 
-Placeholder distractor 1
+By adding `overflow: hidden;`.
 
 ---
 
-Placeholder distractor 2
+By setting a fixed height and width.
 
 ---
 
-Placeholder distractor 3
+By removing padding from the input.
 
 #### --answer--
 
-Placeholder answer
+By using padding and line-height with flexible units like `em` or `rem`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why is it important to use descriptive placeholder text in form inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It helps to pre-fill the form for the user.
 
 ---
 
-Placeholder distractor 2
+It automatically validates the input as the user types.
 
 ---
 
-Placeholder distractor 3
+It hides the input label, reducing visual clutter.
 
 #### --answer--
 
-Placeholder answer
+It provides users with guidance on the expected input format without cluttering the interface.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should you avoid using `outline: none;` without adding a custom focus style?
 
 #### --distractors--
 
-Placeholder distractor 1
+It reduces the size of the text input.
 
 ---
 
-Placeholder distractor 2
+It hides the input from assistive technology users.
 
 ---
 
-Placeholder distractor 3
+It makes the input read-only.
 
 #### --answer--
 
-Placeholder answer
+It removes the focus outline, which may confuse users about which field is selected.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of using Flexbox or Grid for form layout?
 
 #### --distractors--
 
-Placeholder distractor 1
+To make form controls appear in random positions.
 
 ---
 
-Placeholder distractor 2
+To make the form smaller on mobile devices.
 
 ---
 
-Placeholder distractor 3
+To hide form controls on large screens.
 
 #### --answer--
 
-Placeholder answer
+To create a well-structured and responsive form layout.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should input elements be styled with a solid border?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the form look more colorful.
 
 ---
 
-Placeholder distractor 2
+It automatically increases form field size.
 
 ---
 
-Placeholder distractor 3
+It forces users to zoom in on mobile devices.
 
 #### --answer--
 
-Placeholder answer
+To ensure input fields are clearly visible and easily recognizable as form controls.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does increasing the margin between form elements affect form usability?
 
 #### --distractors--
 
-Placeholder distractor 1
+It decreases accessibility on mobile devices.
 
 ---
 
-Placeholder distractor 2
+It prevents users from submitting the form.
 
 ---
 
-Placeholder distractor 3
+It hides form labels.
 
 #### --answer--
 
-Placeholder answer
+It improves readability by helping users see the grouping of related form elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary reason for using `appearance: none` in form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+To add new default styles to form elements.
 
 ---
 
-Placeholder distractor 2
+To enable form elements to appear larger on mobile devices.
 
 ---
 
-Placeholder distractor 3
+To disable form validation for specific elements.
 
 #### --answer--
 
-Placeholder answer
+To remove the default browser styling from form elements and apply custom styles.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which type of form elements is commonly styled using `appearance: none` to remove their default look?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<label>` elements
 
 ---
 
-Placeholder distractor 2
+`<div>` elements
 
 ---
 
-Placeholder distractor 3
+`<span>` elements
 
 #### --answer--
 
-Placeholder answer
+`<input>` and `<select>` elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When should you avoid using `appearance: none` on form controls?
 
 #### --distractors--
 
-Placeholder distractor 1
+When you want to fully customize the form control's style.
 
 ---
 
-Placeholder distractor 2
+When the browser’s default styles are hard to override.
 
 ---
 
-Placeholder distractor 3
+When you are building a mobile-first responsive form.
 
 #### --answer--
 
-Placeholder answer
+When relying on the accessibility and familiarity of native form control appearances.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can using `appearance: none` improve the design of radio buttons and checkboxes?
 
 #### --distractors--
 
-Placeholder distractor 1
+It increases the size of radio buttons and checkboxes.
 
 ---
 
-Placeholder distractor 2
+It automatically creates animation effects for radio buttons and checkboxes.
 
 ---
 
-Placeholder distractor 3
+It prevents users from interacting with radio buttons and checkboxes.
 
 #### --answer--
 
-Placeholder answer
+It removes the browser's default appearance, allowing you to fully customize the design.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a common issue that arises when using `appearance: none` on a select element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the `select` element invisible.
 
 ---
 
-Placeholder distractor 2
+It disables the dropdown functionality.
 
 ---
 
-Placeholder distractor 3
+It breaks form validation.
 
 #### --answer--
 
-Placeholder answer
+It removes the dropdown arrow, requiring you to add a custom arrow or indicator.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can occur when using HTML5 validation attributes like `required` without custom messaging?
 
 #### --distractors--
 
-Placeholder distractor 1
+It automatically validates all inputs without user interaction.
 
 ---
 
-Placeholder distractor 2
+It prevents the form from being submitted if all fields are filled.
 
 ---
 
-Placeholder distractor 3
+It allows users to see detailed error messages for each input.
 
 #### --answer--
 
-Placeholder answer
+Users may not understand why their submission fails, leading to frustration if no helpful feedback is provided.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can arise when no margin is added between the header and the content?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the content load faster.
 
 ---
 
-Placeholder distractor 2
+It improves the overall readability of the content.
 
 ---
 
-Placeholder distractor 3
+It automatically centers the content under the header.
 
 #### --answer--
 
-Placeholder answer
+The content may appear cramped or overlap with the header, making it difficult to read and reducing visual clarity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue may arise with custom fonts when used in form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+They may not display correctly on all browsers.
 
 ---
 
-Placeholder distractor 2
+They always load faster than system fonts.
 
 ---
 
-Placeholder distractor 3
+They prevent the use of responsive design.
 
 #### --answer--
 
-Placeholder answer
+Custom fonts may not be accessible to users if they are not properly loaded or fallback fonts are not specified.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can arise when using `overflow: hidden;` on form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+It improves the form’s overall accessibility.
 
 ---
 
-Placeholder distractor 2
+It automatically adjusts the form to fit within smaller screens.
 
 ---
 
-Placeholder distractor 3
+It ensures that all text content is always visible.
 
 #### --answer--
 
-Placeholder answer
+It can cause content, such as text or labels, to be cut off if the element is resized or if padding is used incorrectly.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What common problem arises when submitting form data that includes `color` input?
 
 #### --distractors--
 
-Placeholder distractor 1
+The `color` value gets automatically converted to grayscale.
 
 ---
 
-Placeholder distractor 2
+The browser displays an alert before submitting the form.
 
 ---
 
-Placeholder distractor 3
+It replaces the `color` value with a default value.
 
 #### --answer--
 
-Placeholder answer
+The `color` input value is submitted as a hexadecimal string, which may require formatting on the server.
 
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
new file mode 100644
index 0000000000..8931930aa3
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
@@ -0,0 +1,61 @@
+---
+id: 61fd5a93fd62bb35968adeab
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Begin your project by giving your `head` element a `link` element for your stylesheet.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert(/<link/.test(code))
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i))
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
new file mode 100644
index 0000000000..ae59503cca
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
@@ -0,0 +1,48 @@
+---
+id: 61fd6343fb42013d99bcd7f3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Within your `body` element, nest a `section` element within a `main` element.
+
+# --hints--
+
+The first element inside the `body` element should be your `main` element.
+
+```js
+assert(document.querySelector('body')?.children?.[0]?.localName === 'main');
+```
+
+You should have a `section` element within your `main` element.
+
+```js
+assert(document.querySelector('main')?.children?.[0]?.localName === 'section');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
new file mode 100644
index 0000000000..345621fb1d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
@@ -0,0 +1,52 @@
+---
+id: 61fd66c687e610436494c6f1
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `section` element, add an `h1` element with a nested `span` element.
+
+# --hints--
+
+Your `section` element should have an `h1` element.
+
+```js
+assert(document.querySelector('section')?.children?.[0]?.localName === 'h1');
+```
+
+Your `h1` element should have a `span` element.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.localName === 'span');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+--fcc-editable-region--
+      <section>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
new file mode 100644
index 0000000000..0be766dccc
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
@@ -0,0 +1,78 @@
+---
+id: 61fd67a656743144844941cb
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Screen readers announce HTML elements based on the document flow. We will eventually want the balance sheet to have a heading of "Balance Sheet" and a subheading of "AcmeWidgetCorp". However, this order does not make sense if announced by a screen reader.
+
+Give your existing `span` the `class` attribute set to `flex`, and add two `span` elements within it. Give the first the text `AcmeWidgetCorp`. Give the second the text `Balance Sheet`. You will use CSS to reverse the order of the text on the page, but the HTML order will make more sense for a screen reader.
+
+# --hints--
+
+Your existing `span` element should have the `class` attribute set to `flex`.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
+```
+
+Your existing `span` element should have two new `span` elements within it.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
+assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
+```
+
+Your new `span` elements should not have a `class` attribute.
+
+```js
+assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
+assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
+```
+
+Your first new `span` element should have the text `AcmeWidgetCorp`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
+```
+
+Your second new `span` element should have the text `Balance Sheet`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+--fcc-editable-region--
+          <span>
+          </span>
+--fcc-editable-region--
+        </h1>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
new file mode 100644
index 0000000000..2d5052298f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
@@ -0,0 +1,65 @@
+---
+id: 61fd6ab779390f49148773bb
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Below your `h1` element, create a `div` element. Give it an `id` attribute set to `years`. You want this particular element to be hidden from screen readers, so give it the `aria-hidden` attribute set to `true`.
+
+# --hints--
+
+You should create a new `div` element after your `h1` element.
+
+```js
+assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div');
+```
+
+Your new `div` element should have an `id` attribute set to `years`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('id') === 'years');
+```
+
+Your new `div` element should have the `aria-hidden` attribute set to `true`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
new file mode 100644
index 0000000000..f01ff5c2b6
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
@@ -0,0 +1,79 @@
+---
+id: 61fd6b7c83dbf54a08cf0498
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within your `div` element, add three `span` elements. Give each of them a `class` attribute set to `year`, and add the following text (in order): `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Your `div` element should have three `span` elements.
+
+```js
+assert(document.querySelector('div')?.children?.length === 3);
+```
+
+Each `span` element should have a `class` attribute set to `year`.
+
+```js
+const spans = [...document.querySelector('div')?.children];
+spans.forEach(span => assert(span?.classList?.contains('year')));
+```
+
+Your first `span` should have the text `2019`.
+
+```js
+assert(document.querySelector('div')?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` should have the text `2020`.
+
+```js
+assert(document.querySelector('div')?.children?.[1]?.textContent === '2020');
+```
+
+Your third `span` should have the text `2021`.
+
+```js
+assert(document.querySelector('div')?.children?.[2]?.textContent === '2021');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+        <div id="years" aria-hidden="true">
+        </div>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
new file mode 100644
index 0000000000..b8ccec8b81
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
@@ -0,0 +1,80 @@
+---
+id: 61fd6cc9475a784b7776233e
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Below your existing `div` element, add a new `div` element with a `class` set to `table-wrap`. This will be the container for your tables.
+
+Within that, add three `table` elements. You will be using CSS to style these into a single table, but using separate tables will help screen readers understand the document flow.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+Your new `div` element should have the `class` set to `table-wrap`.
+
+```js
+assert(document.querySelector('.table-wrap')?.localName === 'div');
+```
+
+Your `.table-wrap` element should come after your existing `div`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap'));
+```
+
+Your `.table-wrap` element should have three `table` elements.
+
+```js
+const children = [...(document.querySelector('.table-wrap')?.children ?? [])];
+assert(children?.length === 3);
+children.forEach(child => assert(child?.localName === 'table'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
new file mode 100644
index 0000000000..630d13d656
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
@@ -0,0 +1,73 @@
+---
+id: 61fd70336ebb3e4f62ee81ba
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+HTML tables use the `caption` element to describe what the table is about. The `caption` element should always be the first child of a `table`, but can be positioned with the `caption-side` CSS property.
+
+Add a `caption` element to your first `table`, and give it the text `Assets`.
+
+# --hints--
+
+Your first `table` element should have a `caption` element.
+
+```js
+assert(document.querySelector('table')?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Assets`.
+
+```js
+assert(document.querySelector('caption')?.textContent === 'Assets');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
new file mode 100644
index 0000000000..2e0c363fd1
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
@@ -0,0 +1,86 @@
+---
+id: 61fd719788899952e67692b9
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+The `thead` and `tbody` elements are used to indicate which portion of your table is the header, and which portion contains the primary data or content.
+
+Add a `thead` and `tbody` to your first `table`, below the `caption` element.
+
+# --hints--
+
+Your first `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('thead'));
+```
+
+Your first `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+            <caption>Assets</caption>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
new file mode 100644
index 0000000000..083e60b9e9
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
@@ -0,0 +1,86 @@
+---
+id: 61fd71d596e8f253b9408b39
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+The `tr` element is used to indicate a table row. Add a `tr` element within your `thead` element. In your new `tr` element, add a `td` element, followed by three `th` elements.
+
+The `td` element indicates a data cell, while the `th` element indicates a header cell.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
new file mode 100644
index 0000000000..2bb7733877
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
@@ -0,0 +1,125 @@
+---
+id: 61fd75ea7f663457612dba02
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Within each of your new `th` elements, nest a `span` element with the `class` set to `sr-only year`. Give them the following text (in order): `2019`, `2020`, and `2021`.
+
+Give your third `th` element the `class` attribute set to `current`.
+
+Leave the `td` element empty. This element exists only to ensure your table has a four-column layout and associate the headers with the correct columns.
+
+# --hints--
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only year`.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+  assert(th?.children?.[0]?.classList?.contains('year'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your third `th` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current'));
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
new file mode 100644
index 0000000000..e45bc92ba6
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
@@ -0,0 +1,96 @@
+---
+id: 61fd7648a7ba2e5882436831
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Within your `tbody` element, add four `tr` elements. Give the first three a `class` attribute set to `data`, and the fourth a `class` attribute set to `total`.
+
+# --hints--
+
+Your `tbody` element should have four `tr` elements.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+Your first three `tr` elements should have the `class` attribute set to `data`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+Your fourth `tr` element should have the `class` attribute set to `total`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+--fcc-editable-region--
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
new file mode 100644
index 0000000000..413771781f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
@@ -0,0 +1,134 @@
+---
+id: 61fd778081276b59d59abad6
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+In your first `tr`, add a `th` element with the text `Cash This is the cash we currently have on hand.`. Wrap all of that text except `Cash` in a `span` element with the `class` set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$25`, `$30`, `$28`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your first `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Cash This is the cash we currently have on hand.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.');
+```
+
+You should wrap the text `This is the cash we currently have on hand.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$25`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$25');
+```
+
+Your second `td` element should have the text `$30`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$30');
+```
+
+Your third `td` element should have the text `$28`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$28');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
new file mode 100644
index 0000000000..65782d0b1e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
@@ -0,0 +1,138 @@
+---
+id: 61fd77f7ad2aeb5ae34d07d6
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In your second `tr` element, add a `th` element with the text `Checking Our primary transactional account.`. Wrap that text, except for `Checking`, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$54`, `$56`, `$53`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your second `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Checking Our primary transactional account.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.');
+```
+
+You should wrap the text `Our primary transactional account.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$54`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$54');
+```
+
+Your second `td` element should have the text `$56`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$56');
+```
+
+Your third `td` element should have the text `$53`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$53');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
new file mode 100644
index 0000000000..e0aef0b407
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
@@ -0,0 +1,142 @@
+---
+id: 61fd78621573aa5e8b512f5e
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In your third `tr` element, add a `th` element with the text `Savings Funds set aside for emergencies.`. Wrap that text, except for `Savings`, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$500`, `$650`, `$728`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your third `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Savings Funds set aside for emergencies.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.');
+```
+
+You should wrap the text `Funds set aside for emergencies.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$500`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+Your second `td` element should have the text `$650`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650');
+```
+
+Your third `td` element should have the text `$728`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
new file mode 100644
index 0000000000..2f7c60f29f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
@@ -0,0 +1,146 @@
+---
+id: 61fd7a160ed17960e971f28b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+In your fourth `tr` element, add a `th` element with the text `Total Assets`. Wrap the text `Assets` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$579`, `$736`, `$809`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your fourth `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Assets`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets');
+```
+
+You should wrap the text `Assets` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Assets');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$579`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579');
+```
+
+Your second `td` element should have the text `$736`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736');
+```
+
+Your third `td` element should have the text `$809`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
+```
+
+Your third `td` element should have the `class` attribute set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
new file mode 100644
index 0000000000..184f5dee82
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
@@ -0,0 +1,130 @@
+---
+id: 61fd7b3fcaa5406257abc5d1
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Time to move on to your second table. Start by giving it a `caption` element set to `Liabilities`. Then add your `thead` and `tbody`.
+
+# --hints--
+
+Your second `table` element should have a `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities');
+```
+
+Your second `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead'));
+```
+
+Your second `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
new file mode 100644
index 0000000000..40f7da84cd
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
@@ -0,0 +1,119 @@
+---
+id: 61fd8e491324ce717da97ffe
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Within your `thead`, add a `tr`. Inside that, add a `td` and three `th` elements.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
new file mode 100644
index 0000000000..55c85fb133
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
@@ -0,0 +1,149 @@
+---
+id: 61fd8fd08af43372f02952d0
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Give each `th` element a `span` element with the class set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
new file mode 100644
index 0000000000..abec451e89
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
@@ -0,0 +1,131 @@
+---
+id: 61fd9126aa72a474301fc49f
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Within the `tbody` element, add four `tr` elements. Give the first three the `class` attribute set to `data`, and the fourth the `class` attribute set to `total`.
+
+# --hints--
+
+Your `tbody` element should have four `tr` elements.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+Your first three `tr` elements should have the `class` attribute set to `data`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+Your fourth `tr` element should have the `class` attribute set to `total`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
new file mode 100644
index 0000000000..58a2b1e9bc
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
@@ -0,0 +1,169 @@
+---
+id: 61fd933ba685de776a94997e
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Within the first `tr`, add a `th` element with the text `Loans The outstanding balance on our startup loan.`. Wrap that text, except for `Loans`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$500`, `$250`, and `$0`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your first `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Loans The outstanding balance on our startup loan.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.');
+```
+
+You should wrap the text `The outstanding balance on our startup loan.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$500`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+Your second `td` element should have the text `$250`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$250');
+```
+
+Your third `td` element should have the text `$0`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$0');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
new file mode 100644
index 0000000000..1f8839c68a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
@@ -0,0 +1,173 @@
+---
+id: 61fd94056e0355785fbba4d3
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Within the second `tr`, add a `th` element with the text `Expenses Annual anticipated expenses, such as payroll.`. Wrap that text, except for `Expenses`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$200`, `$300`, and `$400`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your second `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Expenses Annual anticipated expenses, such as payroll.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.');
+```
+
+You should wrap the text `Annual anticipated expenses, such as payroll.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$200`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$200');
+```
+
+Your second `td` element should have the text `$300`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$300');
+```
+
+Your third `td` element should have the text `$400`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$400');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
new file mode 100644
index 0000000000..a7289e5738
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
@@ -0,0 +1,177 @@
+---
+id: 61fd986ddbcbd47ba8fbc5ec
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Within the third `tr`, add a `th` element with the text `Credit The outstanding balance on our credit card.`. Wrap that text, except for `Credit`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$50`, `$50`, and `$75`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your third `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Credit The outstanding balance on our credit card.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.');
+```
+
+You should wrap the text `The outstanding balance on our credit card.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$50');
+```
+
+Your second `td` element should have the text `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$50');
+```
+
+Your third `td` element should have the text `$75`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$75');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
new file mode 100644
index 0000000000..630afca73e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -0,0 +1,181 @@
+---
+id: 61fd990577d8227dd93fbeeb
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In your fourth `tr` element, add a `th` element with the text `Total Liabilities`. Wrap the text `Liabilities` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$750`, `$600`, `$475`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your fourth `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities');
+```
+
+You should wrap the text `Liabilities` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$750`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750');
+```
+
+Your second `td` element should have the text `$600`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600');
+```
+
+Your third `td` element should have the text `$475`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
new file mode 100644
index 0000000000..e2d2e4f80e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
@@ -0,0 +1,165 @@
+---
+id: 61fd9a4ff2fc4481b9157bd7
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+For your third table, add a `caption` with the text `Net Worth`, and set up a table header and table body.
+
+# --hints--
+
+Your third `table` element should have a `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth');
+```
+
+Your third `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead'));
+```
+
+Your third `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
new file mode 100644
index 0000000000..a6d495c907
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
@@ -0,0 +1,198 @@
+---
+id: 61fd9ad665a4a282c8106be3
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Within your `thead`, create a `tr` element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
new file mode 100644
index 0000000000..d0c5452488
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
@@ -0,0 +1,208 @@
+---
+id: 61fd9b7285bde783ad5b8aac
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Within the `tbody`, add a `tr` with the `class` set to `total`. In that, add a `th` with the text `Total Net Worth`, and wrap `Net Worth` in a `span` with the `class` set to `sr-only`.
+
+Then add three `td` elements, giving the third a `class` set to `current`, and giving each the following text: `$-171`, `$136`, `$334`.
+
+# --hints--
+
+Your `tbody` element should have one `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
+```
+
+Your `tr` element should have the `class` set to `total`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total'));
+```
+
+Your `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth');
+```
+
+You should wrap the text `Net Worth` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$-171`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171');
+```
+
+Your second `td` element should have the text `$136`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136');
+```
+
+Your third `td` element should have the text `$334`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
new file mode 100644
index 0000000000..a48fc24190
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
@@ -0,0 +1,158 @@
+---
+id: 61fd9d9fbdfe078800317055
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Time to style your table. Start by resetting the box model. Create an `html` selector and give it a `box-sizing` property set to `border-box`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have a `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
new file mode 100644
index 0000000000..2830b424ad
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
@@ -0,0 +1,168 @@
+---
+id: 61fda307bde0b091cf7d884a
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Create a `body` selector and give it a `font-family` property set to `sans-serif` and a `color` set to `#0a0a23`.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `font-family` property set to `sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family') === 'sans-serif');
+```
+
+Your `body` selector should have a `color` property set to `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
new file mode 100644
index 0000000000..fb2d7e6f93
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
@@ -0,0 +1,171 @@
+---
+id: 61fda339eadcfd92a6812bed
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Before you get too far into your styling, you should make use of the `sr-only` class. You can use CSS to make elements with this class completely hidden from the visual page, but still be announced by screen readers.
+
+The CSS you are about to write is a common set of properties used to ensure elements are completely hidden visually.
+
+The `span[class~="sr-only"]` selector will select any `span` element whose `class` *includes* `sr-only`. Create that selector, and give it a `border` property set to `0`.
+
+# --hints--
+
+You should have an `span[class~="sr-only"]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]'));
+```
+
+Your `span[class~="sr-only"]` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
new file mode 100644
index 0000000000..546bcc8998
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
@@ -0,0 +1,172 @@
+---
+id: 61fdac1e31692f9a9ad97295
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The CSS `clip` property is used to define the visible portions of an element. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
+
+The `clip-path` property determines the shape the `clip` property should take. Set the `clip-path` property to the value of `inset(50%)`, forming the clip-path into a rectangle within the element.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `clip` property set to `rect(1px, 1px, 1px, 1px)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)');
+```
+
+Your `span[class~="sr-only"]` selector should have a `clip-path` property set to `inset(50%)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
new file mode 100644
index 0000000000..e964962f3f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
@@ -0,0 +1,172 @@
+---
+id: 61fdaea3999cb19d76ce717b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Now you need to size these elements down. Give your `span[class~="sr-only"]` selector a `width` and `height` property set to `1px`.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `width` property set to `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px');
+```
+
+Your `span[class~="sr-only"]` selector should have a `height` property set to `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
new file mode 100644
index 0000000000..2865fbb968
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
@@ -0,0 +1,174 @@
+---
+id: 61fdaf9ff894b6a084ecdc1b
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+To prevent the text content from overflowing, give your `span[class~="sr-only"]` selector an `overflow` property set to `hidden` and a `white-space` property set to `nowrap`.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have an `overflow` property set to `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden');
+```
+
+Your `span[class~="sr-only"]` selector should have a `white-space` property set to `nowrap`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
new file mode 100644
index 0000000000..5a05cb1e81
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
@@ -0,0 +1,182 @@
+---
+id: 61fdafe6f07fd7a1c6785bc2
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Finally, you need to take these hidden elements out of the document flow. Give the `span[class~="sr-only"]` selector a `position` property set to `absolute`, a `padding` property set to `0`, and a `margin` property set to `-1px`. This will ensure that not only are they no longer visible, but they are not even within the page view.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute');
+```
+
+Your `span[class~="sr-only"]` selector should have a `padding` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px');
+```
+
+Your `span[class~="sr-only"]` selector should have a `margin` property set to `-1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
new file mode 100644
index 0000000000..f23a9e5e35
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
@@ -0,0 +1,192 @@
+---
+id: 61fdb04d9939f0a26ca51c2b
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Time to style your table heading. Create an `h1` selector. Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`.
+
+# --hints--
+
+You should have an `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+Your `h1` selector should have a `max-width` property set to `37.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width') === '37.25rem');
+```
+
+Your `h1` selector should have a `margin` property set to `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin') === '0px auto');
+```
+
+Your `h1` selector should have a `padding` property set to `1.5rem 1.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding') === '1.5rem 1.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
new file mode 100644
index 0000000000..04dd430379
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
@@ -0,0 +1,198 @@
+---
+id: 620159cd5431aa34bc6a4c9c
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Target your flex container with an `h1 .flex` selector. Give it a `display` property set to `flex` to enable the flexbox layout. Then set the `flex-direction` property to `column-reverse` - this will display the nested elements from bottom to top. Finally, set the `gap` property to `1rem` to create some space between the elements.
+
+# --hints--
+
+You should have an `h1 .flex` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex'));
+```
+
+Your `h1 .flex` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('display') === 'flex');
+```
+
+Your `h1 .flex` selector should have a `flex-direction` property set to `column-reverse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('flex-direction') === 'column-reverse');
+```
+
+Your `h1 .flex` selector should have a `gap` property set to `1rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
new file mode 100644
index 0000000000..c376c6a27a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
@@ -0,0 +1,194 @@
+---
+id: 62015a5da1c95c358f079ebb
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+The `:first-of-type` pseudo-selector is used to target the first element that matches the selector. Create an `h1 .flex span:first-of-type` selector to target the first `span` element in your `.flex` container. Remember that your `span` elements are reversed, visually, so this will appear to be the second element on the page.
+
+Give your new selector a `font-size` property of `0.7em` to make it look like a sub-heading.
+
+# --hints--
+
+You should have an `h1 .flex span:first-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type'));
+```
+
+Your `h1 .flex span:first-of-type` selector should have a `font-size` property set to `0.7em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.getPropertyValue('font-size') === '0.7em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
new file mode 100644
index 0000000000..988875664f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
@@ -0,0 +1,196 @@
+---
+id: 62015cd2654a1139321a89d2
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+The `:last-of-type` pseudo-selector does the exact opposite - it targets the last element that matches the selector. Create an `h1 .flex span:last-of-type` selector to target the last `span` in your flex container, and give it a `font-size` property set to `1.2em` to make it look like a header.
+
+# --hints--
+
+You should have an `h1 .flex span:last-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type'));
+```
+
+Your `h1 .flex span:last-of-type` selector should have a `font-size` property set to `1.2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.getPropertyValue('font-size') === '1.2em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
new file mode 100644
index 0000000000..bea49bb7f9
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
@@ -0,0 +1,212 @@
+---
+id: 62015d8942384c3aed48329e
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+You wrapped your table in a section element - now you can style that to give your table a border. Create a `section` selector, and give it a `max-width` property set to `40rem` for responsive design. Set the `margin` property to `0 auto` to center it, and set the `border` property to `2px solid #d0d0d5`.
+
+# --hints--
+
+You should have a `section` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section'));
+```
+
+Your `section` selector should have a `max-width` property set to `40rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('max-width') === '40rem');
+```
+
+Your `section` selector should have a `margin` property set to `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('margin') === '0px auto');
+```
+
+Your `section` selector should have a `border` property set to `2px solid #d0d0d5`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('border') === '2px solid rgb(208, 208, 213)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
new file mode 100644
index 0000000000..ec97094732
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
@@ -0,0 +1,224 @@
+---
+id: 620167374bb8b4455cd11125
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+The last part of your table heading is your years. Create a `#years` selector, and enable flexbox. Justify the content to the end of the flex direction, and make the element sticky. Fix it to the top of its container with `top: 0`.
+
+# --hints--
+
+You should have a `#years` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years'));
+```
+
+Your `#years` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex');
+```
+
+Your `#years` selector should have a `justify-content` property set to `flex-end`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('justify-content') === 'flex-end');
+```
+
+Your `#years` selector should have a `position` property set to `sticky`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('position') === 'sticky');
+```
+
+Your `#years` selector should have a `top` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
new file mode 100644
index 0000000000..be6eec61b2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
@@ -0,0 +1,212 @@
+---
+id: 620174ed519dd7506c1a4b61
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Now apply some color to your `#years`. Make the text `#fff` and the background `#0a0a23`.
+
+# --hints--
+
+Your `#years` should have a `color` property set to `#fff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)');
+```
+
+Your `#years` should have a `background-color` property set to `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
new file mode 100644
index 0000000000..9067889bef
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
@@ -0,0 +1,223 @@
+---
+id: 620175b3710a0951cfa86edf
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+The `calc()` function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:
+
+```css
+.example {
+  margin: 10px;
+  width: calc(100% - 20px);
+}
+```
+
+Give `#years` a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+# --hints--
+
+Your `#years` selector should have a `margin` property set to `0 -2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
+```
+
+Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+```js
+const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding');
+assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5rem 0px'].includes(padding));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
new file mode 100644
index 0000000000..bf3e0d8e19
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
@@ -0,0 +1,232 @@
+---
+id: 6201782cc420715562f36271
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Style the text within your `#years` element by creating a `#years span[class]` selector. The `span[class]` syntax will target any `span` element that has a `class` attribute set, regardless of the attribute's value.
+
+Give your new selector a `bold` font, a width of `4.5rem`, and text aligned to the right.
+
+# --hints--
+
+You should have a `#years span[class]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]'));
+```
+
+Your `#years span[class]` selector should have a `font-weight` property set to `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+Your `#years span[class]` selector should have a `width` property set to `4.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('width') === '4.5rem');
+```
+
+Your `#years span[class]` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('text-align') === 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
new file mode 100644
index 0000000000..4c0ab4ab20
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
@@ -0,0 +1,224 @@
+---
+id: 620179bc0a6a2358c72b90ad
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+You wrapped your tables in a container with the `table-wrap` class. Create a selector for that class, and give it a `padding` set to `0 0.75rem 1.5rem 0.75rem`.
+
+# --hints--
+
+You should have a `.table-wrap` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap'));
+```
+
+Your `.table-wrap` selector should have a `padding` property set to `0 0.75rem 1.5rem 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
new file mode 100644
index 0000000000..df7a3d561d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
@@ -0,0 +1,230 @@
+---
+id: 62017b6f47454059bf2d3bd1
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Before you start diving in to the table itself, your `span` elements are currently bolded. Create a `span:not(.sr-only)` selector and give it a `font-weight` property set to `normal`.
+
+The `:not()` pseudo-selector is used to target all elements that do not match the selector - in this case, any of your `span` elements that do not have the `sr-only` class. This ensures that your earlier rules for the `span[class~="sr-only"]` selector are not overwritten.
+
+# --hints--
+
+You should have a `span:not(.sr-only)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
+```
+
+Your `span:not(.sr-only)` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
new file mode 100644
index 0000000000..6563d6a1d2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
@@ -0,0 +1,291 @@
+---
+id: 62017f47c87be96457c49f46
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Rather than having to constantly double-check you are not overwriting your earlier properties, you can use the `!important` keyword to ensure these properties are always applied, regardless of order or specificity.
+
+Give each property in your `span[class~="sr-only"]` selector an `!important` keyword. Do not change any of the values.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have the `border` property set to `0 !important`.
+
+```js
+// log it
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `clip` property set to `rect(1px, 1px, 1px, 1px) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `clip-path` property set to `inset(50%) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip-path: inset(50%) !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `height` property set to `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('height: 1px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `width` property set to `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('width: 1px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `position` property set to `absolute !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('position: absolute !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `overflow` property set to `hidden !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('overflow: hidden !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `white-space` property set to `nowrap !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('white-space: nowrap !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `padding` property set to `0 !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('padding: 0px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `margin` property set to `-1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('margin: -1px !important;'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span:not(.sr-only) {
+  font-weight: normal;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
new file mode 100644
index 0000000000..131df23ce9
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
@@ -0,0 +1,236 @@
+---
+id: 62017fa5bbef406580ceb44f
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Now that you have added the `!important` keyword, you can remove the `:not(.sr-only)` from your `span` selector.
+
+# --hints--
+
+You should not have a `span:not(.sr-only)` selector.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')));
+```
+
+You should have a `span` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span'));
+```
+
+You should not change the `font-weight`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span:not(.sr-only) {
+  font-weight: normal;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
new file mode 100644
index 0000000000..68b9ddf74a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
@@ -0,0 +1,238 @@
+---
+id: 62018243f046a368fab8ffb6
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Create a `table` selector to target your tables. Set the `border-collapse` property to `collapse`, which will allow cell borders to collapse into a single border, instead of a border around each cell. Also set the `border` property to `0` to hide the borders themselves.
+
+# --hints--
+
+You should have a `table` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table'));
+```
+
+Your `table` selector should have a `border-collapse` property set to `collapse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-collapse') === 'collapse');
+```
+
+Your `table` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
new file mode 100644
index 0000000000..37746c9d7e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
@@ -0,0 +1,242 @@
+---
+id: 6201830cb0c74b69f1b41635
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Ensure your table fills its container with a `width` property set to `100%`, then position it relatively and give it a top margin of `3rem`.
+
+# --hints--
+
+Your `table` selector should have a `width` property set to `100%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%');
+```
+
+Your `table` selector should have a `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('position') === 'relative');
+```
+
+Your `table` selector should have a `margin-top` property set to `3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('margin-top') === '3rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+table {
+  border-collapse: collapse;
+  border: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
new file mode 100644
index 0000000000..a59b2617ab
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
@@ -0,0 +1,252 @@
+---
+id: 620186f4b6b8356d2def576b
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Next you need to style your `caption` elements to look more like headers. Create a `table caption` selector. Set the text to have a color of `#356eaf`, a size of `1.3em`, and a normal weight.
+
+# --hints--
+
+You should have a `table caption` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption'));
+```
+
+Your `table caption` selector should have a `color` property set to `#356eaf`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('color') === 'rgb(53, 110, 175)');
+```
+
+Your `table caption` selector should have a `font-size` property set to `1.3em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-size') === '1.3em');
+```
+
+Your `table caption` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
new file mode 100644
index 0000000000..c3938b04ac
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
@@ -0,0 +1,251 @@
+---
+id: 62018ba1aa263770c953be66
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Now give the captions an absolute position, and shift them `-2.25rem` from the top and `0.5rem` from the left.
+
+# --hints--
+
+Your `table caption` selector should have the `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute');
+```
+
+Your `table caption` selector should have the `top` property set to `-2.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('top') === '-2.25rem');
+```
+
+Your `table caption` selector should have the `left` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
new file mode 100644
index 0000000000..5d92ebdef9
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
@@ -0,0 +1,261 @@
+---
+id: 62018c3e94434a71af1d5eaa
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Create a selector to target your `td` elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container.
+
+# --hints--
+
+You should have a `tbody td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td'));
+```
+
+Your `tbody td` selector should have a `width` property set to `100vw`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('width') === '100vw');
+```
+
+Your `tbody td` selector should have a `min-width` property set to `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('min-width') === '4rem');
+```
+
+Your `tbody td` selector should have a `max-width` property set to `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('max-width') === '4rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
new file mode 100644
index 0000000000..842e7f51b6
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
@@ -0,0 +1,255 @@
+---
+id: 62018ec29b3ae674f40bef31
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Now target the `th` elements within your table body, and give them a width of the entire container, less `12rem`.
+
+# --hints--
+
+You should have a `tbody th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th'));
+```
+
+Your `tbody th` selector should have a `width` property set to `calc(100% - 12rem)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('width') === 'calc(100% - 12rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
new file mode 100644
index 0000000000..f20111ca92
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
@@ -0,0 +1,265 @@
+---
+id: 62019093fe30e278e797d2f6
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+The `[attribute="value"]` selector targets any element that has an attribute with a specific value. Create a `tr[class="total"]` selector to target specifically your `tr` elements with the `total` class. Give it a bottom border of `4px double #0a0a23` and make the font bold.
+
+# --hints--
+
+You should have a `tr[class="total"]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]'));
+```
+
+Your `tr[class="total"]` selector should have a `border-bottom` property set to `4px double #0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('border-bottom') === '4px double rgb(10, 10, 35)');
+```
+
+Your `tr[class="total"]` selector should have a `font-weight` property set to `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
new file mode 100644
index 0000000000..da1b2b6db3
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
@@ -0,0 +1,270 @@
+---
+id: 620191707bc65579ddd3ce15
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Using the same selector syntax, target the `th` elements within your table rows where the `class` is `total`. Align the text to the left, and give them a padding of `0.5rem 0 0.25rem 0.5rem`.
+
+# --hints--
+
+You should have a `tr[class="total"] th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th'));
+```
+
+Your `tr[class="total"] th` selector should have a `text-align` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left');
+```
+
+Your `tr[class="total"] th` selector should have a `padding` property set to `0.5rem 0 0.25rem 0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
new file mode 100644
index 0000000000..7b947bb3ee
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
@@ -0,0 +1,277 @@
+---
+id: 620192a767533a7ad19d96d7
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+The key difference between `tr[class="total"]` and `tr.total` is that the first will select `tr` elements where the *only* class is `total`. The second will select `tr` elements where the class *includes* `total`.
+
+In your case, `tr.total` will work. You can use this selector to target all `td` elements within your `.total` rows. Align the text to the right, and give them a padding of `0 0.25rem`.
+
+# --hints--
+
+You should have a `tr.total td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td'));
+```
+
+Your `tr.total td` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('text-align') === 'right');
+```
+
+Your `tr.total td` selector should have a `padding` property set to `0 0.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('padding') === '0px 0.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
new file mode 100644
index 0000000000..40864c9312
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
@@ -0,0 +1,274 @@
+---
+id: 6201995d9ab88e80f1989dce
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+The `:nth-of-type()` pseudo-selector is used to target specific elements based on their order among siblings of the same type. Use this pseudo-selector to target the third `td` element within your `total` table rows. Give it a right padding of `0.5rem`.
+
+# --hints--
+
+You should have a `tr.total td:nth-of-type(3)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)'));
+```
+
+Your `tr.total td:nth-of-type(3)` selector should have a `padding-right` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
new file mode 100644
index 0000000000..d0ec48a16c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
@@ -0,0 +1,278 @@
+---
+id: 620199c7a7a32c81d4db3410
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Give your `tr.total` elements a hover effect that changes the background to `#99c9ff`.
+
+# --hints--
+
+You should have a `tr.total:hover` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover'));
+```
+
+Your `tr.total:hover` selector should have the `background-color` property set to `#99c9ff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyValue('background-color') === 'rgb(153, 201, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
new file mode 100644
index 0000000000..8446e4d528
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
@@ -0,0 +1,284 @@
+---
+id: 6201a1a7af32c287bd6b8183
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Select your `td` elements with the `class` value of `current`, and make the font italic.
+
+# --hints--
+
+You should have a `td.current` selector.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('td.current') || def('td[class="current"]'));
+```
+
+Your `td.current` selector should have the `font-style` property set to `italic`.
+
+```js
+const font = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style');
+assert((font('td.current') || font('td[class="current"]')) === 'italic');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
new file mode 100644
index 0000000000..a1ea3f0dcd
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
@@ -0,0 +1,288 @@
+---
+id: 6201a1cc668a34888f5b2f52
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Select the `tr` elements with the `class` set to `data`. Give them a background image of `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+# --hints--
+
+You should have a `tr.data` selector.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('tr.data') || def('tr[class="data"]'));
+```
+
+Your `tr.data` selector should have the `background-image` property set to `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+```js
+const bg = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('background-image');
+assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
new file mode 100644
index 0000000000..0853021d6c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
@@ -0,0 +1,302 @@
+---
+id: 6201a20d742f5c89736c8cfb
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Select the `th` elements within your `tr.data` elements. Align the text to the left, and give them a top padding of `0.3rem` and a left padding of `0.5rem`.
+
+# --hints--
+
+You should have a `tr.data th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th'));
+```
+
+Your `tr.data th` selector should have a `text-align` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('text-align') === 'left');
+```
+
+Your `tr.data th` selector should have a `padding-top` property set to `0.3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-top') === '0.3rem');
+```
+
+Your `tr.data th` selector should have a `padding-left` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
new file mode 100644
index 0000000000..66cc4c45f6
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
@@ -0,0 +1,320 @@
+---
+id: 6201a42e39bf3b95b6a33bf3
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Create a `tr.data th .description` selector to target the elements with the `class` set to `description` that are within your `th` elements in your `.data` table rows. Give them a block display, make the text italic with a normal weight, and position them with a `padding` set to `1rem 0 0.75rem` and a right margin of `-13.5rem`.
+
+# --hints--
+
+You should have a `tr.data th .description` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description'));
+```
+
+Your `tr.data th .description` selector should have a `display` property set to `block`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('display') === 'block');
+```
+
+Your `tr.data th .description` selector should have a `font-style` property set to `italic`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-style') === 'italic');
+```
+
+Your `tr.data th .description` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-weight') === 'normal');
+```
+
+Your `tr.data th .description` selector should have a `padding` property set to `1rem 0 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('padding') === '1rem 0px 0.75rem');
+```
+
+Your `tr.data th .description` selector should have a `margin-right` property set to `-13.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('margin-right') === '-13.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
new file mode 100644
index 0000000000..55d65268a3
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
@@ -0,0 +1,296 @@
+---
+id: 6201a4adcc6414968b391592
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Your `span` elements now all have more specific styling, which means you can remove your `span` rule.
+
+# --hints--
+
+You should not have a `span` selector.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span {
+  font-weight: normal;
+}
+--fcc-editable-region--
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
new file mode 100644
index 0000000000..74ca4c192b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
@@ -0,0 +1,312 @@
+---
+id: 6201a5258af7b398b030bfaf
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Your dollar amounts are currently misaligned. Create a selector to target the `td` elements within your `tr.data` elements. Vertically align the text to the top, horizontally align the text to the right, and set the padding to `0.3rem 0.25rem 0`.
+
+# --hints--
+
+You should have a `tr.data td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td'));
+```
+
+Your `tr.data td` selector should have a `vertical-align` property set to `top`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('vertical-align') === 'top');
+```
+
+Your `tr.data td` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('text-align') === 'right');
+```
+
+Your `tr.data td` selector should have a `padding` property set to `0.3rem 0.25rem 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('padding') === '0.3rem 0.25rem 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
new file mode 100644
index 0000000000..672e43ac9c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
@@ -0,0 +1,589 @@
+---
+id: 6201a59be346d399c21d10b1
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Create another selector for the `td` elements within your `tr.data` element, but specifically select the last one. Give this a right padding of `0.5rem`.
+
+With this, your balance sheet is complete!
+
+# --hints--
+
+You should have a `tr.data td:last-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type'));
+```
+
+Your `tr.data td:last-of-type` selector should have a `padding-right` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+tr.data td:last-of-type {
+  padding-right: 0.5rem;
+}
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
new file mode 100644
index 0000000000..71388718e0
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
@@ -0,0 +1,209 @@
+---
+id: 64076bbeba941114b0027b6a
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Adding position `sticky` moved the element into its own stack. To ensure your `#years` element does not get hidden by different stacks, add a `z-index` property set to `999` in the `#years` rule.
+
+# --hints--
+
+Your `#years` selector should have a `z-index` property set to `999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index'), '999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
new file mode 100644
index 0000000000..6295eb77a1
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
@@ -0,0 +1,76 @@
+---
+id: 5d822fd413a79914d39e98cc
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Welcome to the CSS Variables Skyline project! Start by adding a `link` element that links your `styles.css` file within the `head` element.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.isNotNull(document.querySelector('link'));
+```
+
+You should not change your existing `head` tags. Make sure you did not delete the closing tag.
+
+```js
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
+```
+
+You should have one void `link` element.
+
+```js
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>    
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
new file mode 100644
index 0000000000..866b58f80c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
@@ -0,0 +1,56 @@
+---
+id: 5d822fd413a79914d39e98cd
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick that helps visualize where elements are and their size. You will remove this later.
+
+# --hints--
+
+You should use the `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+You should use the `border` property to style all the elements.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('border'));
+```
+
+All elements should have a `1px solid black` border.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles?.border, '1px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
new file mode 100644
index 0000000000..1ea4cc4156
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
@@ -0,0 +1,61 @@
+---
+id: 5d822fd413a79914d39e98ce
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements.
+
+# --hints--
+
+You should use the `box-sizing` property.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing'));
+```
+
+You should make use of the existing `*` selector.
+
+```js
+// Two selectors create two CSSStyleRule objects
+assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1);
+```
+
+All elements should have a `box-sizing` of `border-box`.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles.boxSizing, 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+}
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
new file mode 100644
index 0000000000..90efe5f935
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
@@ -0,0 +1,69 @@
+---
+id: 5d822fd413a79914d39e98cf
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport.
+
+# --hints--
+
+You should use the `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` should have a `height` of `100vh`.
+
+```js
+const bodyStyles = new __helpers.CSSHelp(document).getStyle('body');
+assert.equal(bodyStyles?.height, '100vh');
+```
+
+Your `body` should have a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+Your `body` should have the `overflow` property set to `hidden`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
new file mode 100644
index 0000000000..a49b3f5dff
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
@@ -0,0 +1,65 @@
+---
+id: 5d822fd413a79914d39e98d0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+Your `div` element should be within the `body`.
+
+```js
+assert(document.querySelector('div')?.parentElement?.localName === 'body');
+```
+
+Your `div` element should have a class of `background-buildings`
+
+```js
+assert([...document.querySelector('div')?.classList]?.includes('background-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
new file mode 100644
index 0000000000..56eebc0924
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
@@ -0,0 +1,68 @@
+---
+id: 5d822fd413a79914d39e98d1
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Give your `.background-buildings` element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`.
+
+# --hints--
+
+You should use the `background-buildings` class to select the correct element.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings'));
+```
+
+Your `.background-buildings` element should have a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%');
+```
+
+Your `.background-buildings` element should have a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
new file mode 100644
index 0000000000..fe650ce0a4
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
@@ -0,0 +1,83 @@
+---
+id: 5d822fd413a79914d39e98d2
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Nest a `div` with a class of `bb1` in the background buildings container. Open your `styles.css` file, and give `.bb1` a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div').length, 2);
+```
+
+You should give the new `div` a class of `bb1`.
+
+```js
+assert.exists(document.querySelector('div.bb1'));
+```
+
+You should use a `.bb1` class selector to style the element.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1'));
+```
+
+You should give the `.bb1` element a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%');
+```
+
+You should give the `.bb1` element a `height` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
new file mode 100644
index 0000000000..34ef10accb
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
@@ -0,0 +1,105 @@
+---
+id: 5d822fd413a79914d39e98d3
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections.
+
+# --hints--
+
+You should create four new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 6);
+```
+
+You should give one of the new `div` elements a class of `bb1a`.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+You should give one of the new `div` elements a class of `bb1b`.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+You should give one of the new `div` elements a class of `bb1c`.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+You should give one of the new `div` elements a class of `bb1d`.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+```
+
+You should place the new `div` elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d'));
+```
+
+You should place the new `div` elements within the `.bb1` element.
+
+```js
+assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+--fcc-editable-region--
+      <div class="bb1"></div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
new file mode 100644
index 0000000000..cae117f39b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
@@ -0,0 +1,138 @@
+---
+id: 5d822fd413a79914d39e98d4
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container.
+
+# --hints--
+
+You should use a class selector to style `.bb1a`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a'));
+```
+
+You should give `.bb1a` a `width` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%');
+```
+
+You should give `.bb1a` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1b`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b'));
+```
+
+You should give `.bb1b` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%');
+```
+
+You should give `.bb1b` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1c`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c'));
+```
+
+You should give `.bb1c` a `width` of `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%');
+```
+
+You should give `.bb1c` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1d`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d'));
+```
+
+You should give `.bb1d` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%');
+```
+
+You should give `.bb1d` a `height` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
new file mode 100644
index 0000000000..8f84d629f0
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
@@ -0,0 +1,112 @@
+---
+id: 5d822fd413a79914d39e98d5
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Center the parts of your building by turning the `.bb1` element into a flexbox parent. Use the `flex-direction` and `align-items` properties to center the children.
+
+# --hints--
+
+You should not change the `.bb1` `width` or `height` properties.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.width, '10%');
+assert.equal(bb1Style?.height, '70%');
+```
+
+You should give the `.bb1` element a `display` of `flex`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.display, 'flex');
+```
+
+You should give the `.bb1` element a `flex-direction` of `column`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.flexDirection, 'column');
+```
+
+You should give the `.bb1` element a `align-items` of `center`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.alignItems, 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
new file mode 100644
index 0000000000..f08fd7a1d9
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
@@ -0,0 +1,103 @@
+---
+id: 5d822fd413a79914d39e98d6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Now you have something that is resembling a building. You are ready to create your first variable. In the previous lecture videos you learned that variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the rule for the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`.
+
+# --hints--
+
+You should create a new variable named `--building-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1'));
+```
+
+You should define the `--building-color1` variable within `.bb1`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+```
+
+You should give `--building-color1` a value of `#999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
new file mode 100644
index 0000000000..7f714196cb
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
@@ -0,0 +1,100 @@
+---
+id: 5d822fd413a79914d39e98d7
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Whatever value you gave the variable will be applied to whatever property you use it on.
+
+Add the variable `--building-color1` you created in the previous step as the value of the `background-color` property of the `.bb1a` class.
+
+# --hints--
+
+The `background-color` of the `.bb1a` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
new file mode 100644
index 0000000000..01335d8d2d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98d8
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building.
+
+# --hints--
+
+The `background-color` of the `.bb1b` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+The `background-color` of the `.bb1c` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+The `background-color` of the `.bb1d` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
new file mode 100644
index 0000000000..3690866c53
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
@@ -0,0 +1,99 @@
+---
+id: 5d822fd413a79914d39e98d9
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable.
+
+# --hints--
+
+You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+--fcc-editable-region--
+  --building-color1: #999;
+--fcc-editable-region--
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
new file mode 100644
index 0000000000..a614918d18
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98da
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Your first building looks pretty good now. Nest three new `div` elements in the `.background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background.
+
+# --hints--
+
+You should create a `div` with a class of `bb2`.
+
+```js
+assert.exists(document.querySelector('div.bb2'));
+```
+
+You should create a `div` with a class of `bb3`.
+
+```js
+assert.exists(document.querySelector('div.bb3'));
+```
+
+You should create a `div` with a class of `bb4`.
+
+```js
+assert.exists(document.querySelector('div.bb4'));
+```
+
+You should create 3 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 9);
+```
+
+You should place these `div` elements within the `.background-buildings` element.
+
+```js
+assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4);
+```
+
+You should place the elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
new file mode 100644
index 0000000000..b90a51c1f5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98db
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive.
+
+# --hints--
+
+You should give `.bb2` a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%');
+```
+
+You should give `.bb2` a `height` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%');
+```
+
+You should give `.bb3` a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%');
+```
+
+You should give `.bb3` a `height` of `55%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%');
+```
+
+You should give `.bb4` a `width` of `11%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%');
+```
+
+You should give `.bb4` a `height` of `58%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
new file mode 100644
index 0000000000..43c97e479e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
@@ -0,0 +1,127 @@
+---
+id: 5d822fd413a79914d39e98dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+The buildings are currently stacked on top of each other. Align the buildings by turning the `.background-buildings` element into a flexbox parent. Use the `align-items` and `justify-content` properties to evenly space the buildings across the bottom of the element.
+
+# --hints--
+
+You should add a `display` of `flex` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex');
+```
+
+You should add an `align-items` of `flex-end` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end');
+```
+
+You should add a `justify-content` of `space-evenly` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
new file mode 100644
index 0000000000..45cde3a259
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98dd
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+The buildings are too spaced out. Squeeze them together by adding two empty `div` elements to the top of the `.background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center.
+
+# --hints--
+
+You should add two new `div` elements before the `.bb1` element.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('bb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('bb1'));
+```
+
+You should add one new `div` element between the `.bb3` and `.bb4` element.
+
+```js
+assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling);
+```
+
+You should add two new `div` elements after the `.bb4` element.
+
+```js
+const bb4 = document.querySelector('.bb4');
+assert.exists(bb4?.nextElementSibling);
+assert.exists(bb4?.nextElementSibling?.nextElementSibling);
+```
+
+You should add 5 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 14);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
new file mode 100644
index 0000000000..a7617deb09
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
@@ -0,0 +1,140 @@
+---
+id: 5d822fd413a79914d39e98de
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a new variable below your `--building-color1` variable. Name your new variable `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`.
+
+# --hints--
+
+You should define a new property variable called `--building-color2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2'));
+```
+
+You should give `--building-color2` a value of `#66cc99` within the `.bb1` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99');
+```
+
+You should set the `background-color` of `.bb2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor);
+```
+
+You should set the `background-color` using the `--building-color2` variable.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
new file mode 100644
index 0000000000..aa97fc4df8
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98df
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+That didn't work. You should add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`.
+
+# --hints--
+
+You should add a fallback value of `green` to the `background-color` property.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2,green)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
new file mode 100644
index 0000000000..cc38315c42
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98e0
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create a new variable below the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`.
+
+# --hints--
+
+You should define a new property variable called `--building-color3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3'));
+```
+
+You should give `--building-color3` a value of `#cc6699`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+You should set the `background-color` of `.bb3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor);
+```
+
+You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3,pink)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
new file mode 100644
index 0000000000..b146a3017d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
@@ -0,0 +1,155 @@
+---
+id: 5d822fd413a79914d39e98e1
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+That didn't work, because the variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there.
+
+# --hints--
+
+You should declare a `:root` selector at the top of the stylesheet.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root'));
+```
+
+You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff');
+```
+
+You should define `--building-color2` with a value of `#66cc99` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99');
+```
+
+You should define `--building-color3` with a value of `#cc6699` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+You should remove the custom property variables from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
new file mode 100644
index 0000000000..0d71f94d0c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
@@ -0,0 +1,135 @@
+---
+id: 5d822fd413a79914d39e98e2
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now.
+
+# --hints--
+
+You should remove the fallback in the `background-color` from `.bb2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+You should remove the fallback in the `background-color` from `.bb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
new file mode 100644
index 0000000000..9434a0ce33
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
@@ -0,0 +1,144 @@
+---
+id: 5d822fd413a79914d39e98e3
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building.
+
+# --hints--
+
+You should define a new property variable called `--building-color4`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4'));
+```
+
+You should give `--building-color4` a value of `#538cc6` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6');
+```
+
+You should add `background-color: var(--building-color4)` in the `.bb4` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.getPropVal('background-color', true), 'var(--building-color4)')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
new file mode 100644
index 0000000000..7aeec907b2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
@@ -0,0 +1,147 @@
+---
+id: 5d822fd413a79914d39e98e4
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+The background buildings are starting to look pretty good. Create a new `div` below the `.background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 15);
+```
+
+The new `div` should come after the `div.background-buildings` element.
+
+```js
+assert.exists(document.querySelector('div.background-buildings + div'));
+```
+
+Your new `div` should have a class of `foreground-buildings`.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
new file mode 100644
index 0000000000..d1b7b83393
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
@@ -0,0 +1,161 @@
+---
+id: 5d822fd413a79914d39e98e5
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+You want the `.foreground-buildings` container to sit directly on top of the `.background-buildings` element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner.
+
+# --hints--
+
+You should use a `.foreground-buildings` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+You should give the `.foreground-buildings` element a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%');
+```
+
+You should give the `.foreground-buildings` element a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%');
+```
+
+You should give the `.foreground-buildings` element a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute');
+```
+
+You should give the `.foreground-buildings` element a `top` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
new file mode 100644
index 0000000000..dc1a0644b0
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
@@ -0,0 +1,192 @@
+---
+id: 5d822fd413a79914d39e98e6
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground.
+
+# --hints--
+
+You should create a new `div` with a class of `fb1`.
+
+```js
+assert.exists(document.querySelector('div.fb1'));
+```
+
+You should create a new `div` with a class of `fb2`.
+
+```js
+assert.exists(document.querySelector('div.fb2'));
+```
+
+You should create a new `div` with a class of `fb3`.
+
+```js
+assert.exists(document.querySelector('div.fb3'));
+```
+
+You should create a new `div` with a class of `fb4`.
+
+```js
+assert.exists(document.querySelector('div.fb4'));
+```
+
+You should create a new `div` with a class of `fb5`.
+
+```js
+assert.exists(document.querySelector('div.fb5'));
+```
+
+You should create a new `div` with a class of `fb6`.
+
+```js
+assert.exists(document.querySelector('div.fb6'));
+```
+
+You should place these new `div` elements within the `.foreground-buildings` element.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings > div.fb1'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb2'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb3'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb4'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb5'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb6'));
+```
+
+You should place the new `div` elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
new file mode 100644
index 0000000000..215b44f2f3
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e98e7
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`.
+
+# --hints--
+
+You should create a `.fb1` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1'));
+```
+
+You should give the `.fb1` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%');
+```
+
+You should give the `.fb1` selector a `height` of `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%');
+```
+
+You should create a `.fb2` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2'));
+```
+
+You should give the `.fb2` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%');
+```
+
+You should give the `.fb2` selector a `height` of `40%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%');
+```
+
+You should create a `.fb3` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3'));
+```
+
+You should give the `.fb3` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%');
+```
+
+You should give the `.fb3` selector a `height` of `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%');
+```
+
+You should create a `.fb4` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4'));
+```
+
+You should give the `.fb4` selector a `width` of `8%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%');
+```
+
+You should give the `.fb4` selector a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%');
+```
+
+You should create a `.fb5` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5'));
+```
+
+You should give the `.fb5` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%');
+```
+
+You should give the `.fb5` selector a `height` of `33%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%');
+```
+
+You should create a `.fb6` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6'));
+```
+
+You should give the `.fb6` selector a `width` of `9%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%');
+```
+
+You should give the `.fb6` selector a `height` of `38%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
new file mode 100644
index 0000000000..dcfbd1726e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
@@ -0,0 +1,190 @@
+---
+id: 5d822fd413a79914d39e98e8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Add the same `display`, `align-items`, and `justify-content` properties and values to `.foreground-buildings` that you used on `.background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container.
+
+# --hints--
+
+You should give `.foreground-buildings` a `display` property of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex');
+```
+
+You should give `.foreground-buildings` an `align-items` property of `flex-end`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end');
+```
+
+You should give `.foreground-buildings` a `justify-content` property of `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
new file mode 100644
index 0000000000..2e1047c628
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98e9
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+You should optimize your code. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`.
+
+# --hints--
+
+You should not remove the `.foreground-buildings` declaration.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+You should remove the `position` property from `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position);
+```
+
+You should remove the `top` property from `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
+```
+
+You should add the `position` property of `absolute` to `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.position, 'absolute');
+```
+
+You should add the `top` property of `0` to `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.top, '0px');
+```
+
+You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.exists(eitherOr());
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
new file mode 100644
index 0000000000..1147503597
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
@@ -0,0 +1,181 @@
+---
+id: 5d822fd413a79914d39e98ea
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore.
+
+# --hints--
+
+You should delete the whole `.foreground-buildings` style declaration.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
new file mode 100644
index 0000000000..79fd7a2246
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98eb
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`.
+
+# --hints--
+
+You should give `.fb1` a `background-color` using `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.getPropVal('background-color', true), 'var(--building-color4)');
+```
+
+You should give `.fb2` a `background-color` using `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+You should give `.fb3` a `background-color` using `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+You should give `.fb4` a `background-color` using `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+You should give `.fb5` a `background-color` using `--building-color2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+You should give `.fb6` a `background-color` using `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
new file mode 100644
index 0000000000..bb4a29f503
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98ec
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`.
+
+# --hints--
+
+You should add two `div` elements as the first children of `.foreground-buildings`.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('fb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('fb1'));
+```
+
+You should add one `div` element between `.fb2` and `.fb3`.
+
+```js
+assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling);
+```
+
+
+You should add two `div` elements as the last children of `.foreground-buildings`.
+
+```js
+const fb6 = document.querySelector('.fb6');
+assert.exists(fb6?.nextElementSibling);
+assert.exists(fb6?.nextElementSibling?.nextElementSibling);
+```
+
+You should have added 5 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 26);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
new file mode 100644
index 0000000000..288de384a8
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
@@ -0,0 +1,202 @@
+---
+id: 5d822fd413a79914d39e98ed
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings.
+
+# --hints--
+
+You should give `.fb4` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative');
+```
+
+You should give `.fb4` a `left` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%');
+```
+
+You should give `.fb5` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative');
+```
+
+You should give `.fb5` a `right` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
new file mode 100644
index 0000000000..1b950d244f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
@@ -0,0 +1,196 @@
+---
+id: 5d822fd413a79914d39e98ee
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`.
+
+# --hints--
+
+You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector.
+
+```js
+assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code));
+```
+
+You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector.
+
+```js
+assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
new file mode 100644
index 0000000000..022722b6a3
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
@@ -0,0 +1,197 @@
+---
+id: 5d822fd413a79914d39e98ef
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings.
+
+# --hints--
+
+You should create a new variable in `:root` called `--window-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1'));
+```
+
+You should give the property variable `--window-color1` a value of `black`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
new file mode 100644
index 0000000000..d4e4ca6565
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
@@ -0,0 +1,218 @@
+---
+id: 5d822fd413a79914d39e98f0
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+In a previous module you learned that gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this:
+
+```css
+gradient-type(
+  color1,
+  color2
+);
+```
+
+In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a `background` property below the `background-color` property. Set it as a gradient of type `linear-gradient` that uses `--building-color1` as the first color and `--window-color1` as the second.
+
+# --hints--
+
+You should apply a `background` to `.bb1a` right after the `background-color`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+```
+
+You should give the `background` a `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
+```
+
+You should give the `background` a `linear-gradient` starting from `var(--building-color1)`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
+```
+
+You should give the `background` a `linear-gradient` ending at `var(--window-color1)`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
new file mode 100644
index 0000000000..13c9235203
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98f1
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+You want to add the same gradient to the next two sections. Instead of doing that, create a new class selector called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class selector.
+
+# --hints--
+
+You should create a new class selector called `bb1-window`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window'));
+```
+
+You should move the `height` property and value from `.bb1a` to `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%');
+```
+
+You should move the `background` property and value from `.bb1a` to `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+You should not move the `background-color` property from `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+You should not move the `width` property from `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
new file mode 100644
index 0000000000..d2c82337a1
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
@@ -0,0 +1,237 @@
+---
+id: 5d822fd413a79914d39e98f2
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them.
+
+# --hints--
+
+You should not remove the `bb1a` class.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+You should add the `bb1-window` class to the `.bb1a` element.
+
+```js
+assert.exists(document.querySelector('div.bb1a.bb1-window'));
+```
+
+You should not remove the `bb1b` class.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+You should add the `bb1-window` class to the `.bb1b` element.
+
+```js
+assert.exists(document.querySelector('div.bb1b.bb1-window'));
+```
+
+You should not remove the `bb1c` class.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+You should add the `bb1-window` class to the `.bb1c` element.
+
+```js
+assert.exists(document.querySelector('div.bb1c.bb1-window'));
+```
+
+You should not change the `.bb1d` element.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+assert.notExists(document.querySelector('div.bb1d.bb1-window'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
new file mode 100644
index 0000000000..5f4c0d8e10
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
@@ -0,0 +1,222 @@
+---
+id: 5d822fd413a79914d39e98f3
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them.
+
+# --hints--
+
+You should remove the `background-color` from `.bb1a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+You should remove the `height` property from `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height);
+```
+
+You should remove the `background-color` property from `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor);
+```
+
+You should remove the `height` property from `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height);
+```
+
+You should remove the `background-color` property from `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
new file mode 100644
index 0000000000..523c35e8e6
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e98f4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Gradients can use as many colors as you want like this:
+
+```css
+gradient-type(
+  color1,
+  color2,
+  color3
+);
+```
+
+Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property.
+
+# --hints--
+
+You should use the `background` on `.bb1d`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background);
+```
+
+You should give the `background` property a `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient');
+```
+
+You should use `orange` as the first color in the `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange');
+```
+
+You should use `--building-color1` as the second color in the `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)');
+```
+
+You should use `--window-color1` as the third color in the `linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
new file mode 100644
index 0000000000..457fe4acaf
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
@@ -0,0 +1,198 @@
+---
+id: 5d822fd413a79914d39e98f5
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`.
+
+# --hints--
+
+You should remove the `background-color` property and value from `.bb1d`
+
+```js
+assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
new file mode 100644
index 0000000000..d1f3fdc799
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f6
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+You can specify where you want a gradient transition to complete by adding it to the color like this:
+
+```css
+gradient-type(
+  color1,
+  color2 20%,
+  color3
+);
+```
+
+Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action.
+
+# --hints--
+
+You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
new file mode 100644
index 0000000000..0533f06214
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98f7
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half.
+
+# --hints--
+
+You should remove `orange` from the `linear-gradient`.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange');
+```
+
+You should change the now first `linear-gradient` color to transition at `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1) 80%,
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
new file mode 100644
index 0000000000..6bf8b3fe84
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
@@ -0,0 +1,210 @@
+---
+id: 5d822fd413a79914d39e98f8
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building.
+
+# --hints--
+
+You should add two `div` elements to `.bb2`.
+
+```js
+assert.equal(document.querySelector('div.bb2')?.children?.length, 2);
+```
+
+You should give the first `div` a class of `bb2a`.
+
+```js
+assert.exists(document.querySelector('div.bb2a'));
+```
+
+You should give the second `div` a class of `bb2b`.
+
+```js
+assert.exists(document.querySelector('div.bb2b'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+--fcc-editable-region--
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
new file mode 100644
index 0000000000..6fb4f46152
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f9
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later.
+
+# --hints--
+
+You should give `.bb2b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%');
+```
+
+You should give `.bb2b` a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
new file mode 100644
index 0000000000..3a67baddad
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fa
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building.
+
+# --hints--
+
+You should create a new property variable called `window-color2` within `:root`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2'));
+```
+
+You should give `window-color2` a value of `#8cd9b3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
new file mode 100644
index 0000000000..d1924b7bd4
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
@@ -0,0 +1,240 @@
+---
+id: 5d822fd413a79914d39e98fb
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Gradient transitions often gradually change from one color to another. When a more abrupt change is required, the transition can be made with a hard stop like this:
+
+```css
+linear-gradient(
+  var(--first-color) 0%,
+  var(--first-color) 40%,
+  var(--second-color) 40%,
+  var(--second-color) 80%
+);
+```
+
+Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`.
+
+# --hints--
+
+You should give `.bb2b` a `background` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background);
+```
+
+You should use a `linear-gradient` on the `background`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient");
+```
+
+You should use `--building-color2` from `0%` to `6%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/);
+```
+
+You should use `--window-color2` from `6%` to `9%`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%");
+```
+
+`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
new file mode 100644
index 0000000000..d11cd08f03
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fc
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them.
+
+# --hints--
+
+You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
new file mode 100644
index 0000000000..ff29e839ca
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
@@ -0,0 +1,209 @@
+---
+id: 5d822fd413a79914d39e98fd
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore.
+
+# --hints--
+
+You should remove the `background-color` from `.bb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
new file mode 100644
index 0000000000..b11ad202cd
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
@@ -0,0 +1,260 @@
+---
+id: 5d822fd413a79914d39e98fe
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Create and add the following properties to `.bb2a`:
+
+```css
+margin: auto;
+width: 5vw;
+height: 5vw;
+border-top: 1vw solid #000;
+border-bottom: 1vw solid #000;
+border-left: 1vw solid #999;
+border-right: 1vw solid #999;
+```
+
+After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building.
+
+# --hints--
+
+You should give `.bb2a` a `margin` of `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto");
+```
+
+You should give `.bb2a` a `width` of `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw");
+```
+
+You should give `.bb2a` a `height` of `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw");
+```
+
+You should give `.bb2a` a `border-top` of `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)");
+```
+
+You should give `.bb2a` a `border-bottom` of `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)");
+```
+
+You should give `.bb2a` a `border-left` of `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)");
+```
+
+You should give `.bb2a` a `border-right` of `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
new file mode 100644
index 0000000000..162a47660b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
@@ -0,0 +1,238 @@
+---
+id: 5d822fd413a79914d39e98ff
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle.
+
+# --hints--
+
+You should remove the `width` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width);
+```
+
+You should remove the `height` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height);
+```
+
+You should change the `border-left` to use `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)");
+```
+
+You should change the `border-right` to use `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  width: 5vw;
+  height: 5vw;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 1vw solid #999;
+  border-right: 1vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
new file mode 100644
index 0000000000..c5fec5174a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9900
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible.
+
+# --hints--
+
+You should change the `border-left` to use `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent");
+```
+
+You should change the `border-right` to use `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid #999;
+  border-right: 5vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
new file mode 100644
index 0000000000..6bbdfc4dd9
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9901
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building.
+
+# --hints--
+
+You should remove the `margin` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin);
+```
+
+You should remove the `border-top` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
new file mode 100644
index 0000000000..b4ade49d2f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e9902
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end.
+
+# --hints--
+
+You should change `border-bottom` to use `5vh`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh");
+```
+
+You should change `border-bottom` to use `--building-color2`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)");
+```
+
+`border-bottom` should be `5vh solid var(--building-color2)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
new file mode 100644
index 0000000000..860d5af5d1
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9903
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings.
+
+# --hints--
+
+You should define a new property variable `--window-color3`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3"));
+```
+
+You should give `--window-color3` a value of `#d98cb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
new file mode 100644
index 0000000000..7898c0a157
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9904
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this:
+
+```css
+gradient-type(
+  direction,
+  color1,
+  color2
+);
+```
+
+Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`.
+
+# --hints--
+
+You should give `.bb3` a `background` using `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
+```
+
+You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should use `--building-color3` for the first two colors.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)");
+```
+
+You should use `--window-color3` at `15%` for the third color.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
new file mode 100644
index 0000000000..e54093892a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9905
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now.
+
+# --hints--
+
+You should remove the `background-color` from `.bb3`.
+
+```js
+assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
new file mode 100644
index 0000000000..ecd54aa637
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
@@ -0,0 +1,249 @@
+---
+id: 5d822fd413a79914d39e9906
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order.
+
+# --hints--
+
+You should add three `div` elements within `.bb4`.
+
+```js
+assert.equal(document.querySelector("div.bb4")?.children?.length, 3);
+```
+
+You should give the first new `div` a class of `bb4a`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should give the second new `div` a class of `bb4b`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should give the third new `div` a class of `bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4a + div.bb4b"));
+assert.exists(document.querySelector("div.bb4b + div.bb4c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb4"></div>
+--fcc-editable-region--
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
new file mode 100644
index 0000000000..230af5f23f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9907
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`.
+
+# --hints--
+
+You should give `.bb4a` a `width` of `3%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%");
+```
+
+You should give `.bb4a` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%");
+```
+
+You should give `.bb4b` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%");
+```
+
+You should give `.bb4b` a `height` of `5%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%");
+```
+
+You should give `.bb4c` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%");
+```
+
+You should give `.bb4c` a `height` of `85%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
new file mode 100644
index 0000000000..b4bce92acb
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9908
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled.
+
+# --hints--
+
+You should remove the `background-color` from `.bb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor);
+```
+
+You should give `.bb4a` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+You should give `.bb4b` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+You should give `.bb4c` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+}
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
new file mode 100644
index 0000000000..80590e7dcf
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9909
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding.
+
+# --hints--
+
+You should create a new class declaration called `building-wrap`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
new file mode 100644
index 0000000000..9649bd40b5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
@@ -0,0 +1,277 @@
+---
+id: 5d822fd413a79914d39e990a
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class.
+
+# --hints--
+
+You should remove `display` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display);
+```
+
+You should move `display` with a value of `flex` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex");
+```
+
+You should remove `flex-direction` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection);
+```
+
+You should move `flex-direction` with a value of `column` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column");
+```
+
+You should remove `align-items` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems);
+```
+
+You should move `align-items` with a value of `center` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.building-wrap {
+
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
new file mode 100644
index 0000000000..6df3d6c40c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
@@ -0,0 +1,254 @@
+---
+id: 5d822fd413a79914d39e990b
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it.
+
+# --hints--
+
+You should add `building-wrap` to the `.bb1` element.
+
+```js
+assert.exists(document.querySelector("div.bb1.building-wrap"));
+```
+
+You should add `building-wrap` to the `.bb4` element.
+
+```js
+assert.exists(document.querySelector("div.bb4.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+--fcc-editable-region--
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
new file mode 100644
index 0000000000..ccaa99d42b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e990c
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building.
+
+# --hints--
+
+You should define a new property variable `--window-color4`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4"));
+```
+
+You should give `--window-color4` a value of `#8cb3d9`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
new file mode 100644
index 0000000000..a4de0a094a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
@@ -0,0 +1,255 @@
+---
+id: 5d822fd413a79914d39e990d
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building.
+
+# --hints--
+
+You should add four `div` elements to `.bb4c`.
+
+```js
+assert.equal(document.querySelector(".bb4c")?.children?.length, 4);
+```
+
+You should give each new `div` a class of `bb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
new file mode 100644
index 0000000000..f9c206b5ae
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
@@ -0,0 +1,265 @@
+---
+id: 5d822fd413a79914d39e990e
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`.
+
+# --hints--
+
+You should give `.bb4-window` a `width` of `18%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%");
+```
+
+You should give `.bb4-window` a `height` of `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%");
+```
+
+You should give `.bb4-window` a `background-color` of `--window-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
new file mode 100644
index 0000000000..26d3ed042d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
@@ -0,0 +1,279 @@
+---
+id: 5d822fd413a79914d39e990f
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+
+The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `window-wrap`. Make `.window-wrap` a flexbox container, and use the `align-items` and `justify-content` properties to center its child elements vertically and evenly space them in their parent, respectively.
+
+# --hints--
+
+You should create a `.window-wrap` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap"));
+```
+
+You should give `.window-wrap` a `display` of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex");
+```
+
+You should give `.window-wrap` an `align-items` of `center`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center");
+```
+
+You should give `.window-wrap` a `justify-content` of `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
new file mode 100644
index 0000000000..07de740896
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
@@ -0,0 +1,266 @@
+---
+id: 5d822fd413a79914d39e9910
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Add the new `window-wrap` class to the `.bb4c` element.
+
+# --hints--
+
+You should add a class of `window-wrap` to `.bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4c.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
new file mode 100644
index 0000000000..f229fafb01
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
@@ -0,0 +1,291 @@
+---
+id: 5d822fd413a79914d39e9911
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order.
+
+# --hints--
+
+You should add three `div` elements within `.fb1`.
+
+```js
+assert.equal(document.querySelector("div.fb1")?.children?.length, 3);
+```
+
+You should give the first new `div` a class of `fb1a`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1a"));
+```
+
+You should give the second new `div` a class of `fb1b`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1b"));
+```
+
+You should give the third new `div` a class of `fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1c"));
+```
+
+You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1a + div.fb1b"));
+assert.exists(document.querySelector("div.fb1b + div.fb1c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1"></div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
new file mode 100644
index 0000000000..6ad5fc43f3
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
@@ -0,0 +1,287 @@
+---
+id: 5d822fd413a79914d39e9912
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`.
+
+# --hints--
+
+You should give `.fb1b` a `width` of `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%");
+```
+
+You should give `.fb1b` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%");
+```
+
+You should give `.fb1c` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%");
+```
+
+You should give `.fb1c` a `height` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
new file mode 100644
index 0000000000..ea0469fd67
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
@@ -0,0 +1,280 @@
+---
+id: 5d822fd413a79914d39e9913
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Add the `building-wrap` class to the `.fb1` element to center the sections.
+
+# --hints--
+
+You should add the class `building-wrap` to `.fb1`.
+
+```js
+assert.exists(document.querySelector("div.fb1.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
new file mode 100644
index 0000000000..5b271b0f99
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
@@ -0,0 +1,284 @@
+---
+id: 5d822fd413a79914d39e9914
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Move the `background-color` property and value from `.fb1` to `.fb1b`.
+
+# --hints--
+
+You should remove `background-color` from `.fb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor);
+```
+
+You should add a `background-color` of `--building-color4` to `.fb1b`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
new file mode 100644
index 0000000000..e914af1b32
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
@@ -0,0 +1,391 @@
+---
+id: 5d822fd413a79914d39e9915
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+You don't need the `background-color` for this building anymore so you can remove that property.
+
+# --hints--
+
+You should remove the `background-color` of `.fb5`.
+
+```js
+assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
new file mode 100644
index 0000000000..4f6ab3e002
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
@@ -0,0 +1,297 @@
+---
+id: 5d822fd413a79914d39e9916
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building.
+
+Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`.
+
+# --hints--
+
+You should give `.fb1c` a `background` with a `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient");
+```
+
+You should use a direction of `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should use a first color of `--building-color4` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+You should use a second color of `transparent` from `10%` to `15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(transparent10%,transparent15%\)|transparent10%15%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
new file mode 100644
index 0000000000..aea76037d0
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
@@ -0,0 +1,307 @@
+---
+id: 5d822fd413a79914d39e9917
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+You can add multiple gradients to an element by separating them with a comma (`,`) like this:
+
+```css
+gradient1(
+  colors
+),
+gradient2(
+  colors
+);
+```
+
+Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last.
+
+# --hints--
+
+You should not alter the first `repeating-linear-gradient`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/);
+```
+
+You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+You should use a second color of `--window-color4` from `10%` to `90%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(var\(--window-color4\)10%,var\(--window-color4\)90%\)|var\(--window-color4\)10%90%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    )
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
new file mode 100644
index 0000000000..849d448b9a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
@@ -0,0 +1,298 @@
+---
+id: 5d822fd413a79914d39e9918
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements.
+
+# --hints--
+
+You should give `.fb1a` a `border-bottom`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom);
+```
+
+You should use a `border-bottom` of `7vh solid var(--building-color4)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
new file mode 100644
index 0000000000..089b59b3cf
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
@@ -0,0 +1,301 @@
+---
+id: 5d822fd413a79914d39e9919
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide.
+
+# --hints--
+
+You should give `.fb1a` a `border-left` of `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent");
+```
+
+You should give `.fb1a` a `border-right` of `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+}
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
new file mode 100644
index 0000000000..99fb0d6368
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
@@ -0,0 +1,312 @@
+---
+id: 5d822fd413a79914d39e991a
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order.
+
+# --hints--
+
+You should add two `div` elements within `.fb2`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2);
+```
+
+You should give the first new `div` a class of `fb2a`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2a"));
+assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild);
+```
+
+You should give the second new `div` a class of `fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+--fcc-editable-region--
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
new file mode 100644
index 0000000000..a021e0bafe
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
@@ -0,0 +1,314 @@
+---
+id: 5d822fd413a79914d39e991b
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`.
+
+# --hints--
+
+You should give `.fb2a` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%");
+```
+
+You should give `.fb2b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%");
+```
+
+You should give `.fb2b` a `height` of `75%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b"></div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
new file mode 100644
index 0000000000..f050e5dec8
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
@@ -0,0 +1,317 @@
+---
+id: 5d822fd413a79914d39e991c
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building.
+
+# --hints--
+
+You should add three `div` elements within `.fb2b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3);
+```
+
+You should give the three new `div` elements each a class of `fb2-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
new file mode 100644
index 0000000000..fdeac5d1d1
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
@@ -0,0 +1,315 @@
+---
+id: 5d822fd413a79914d39e991d
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Add your `window-wrap` class to `.fb2b` to position the new window elements.
+
+# --hints--
+
+You should add the class `window-wrap` to `.fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2b.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
new file mode 100644
index 0000000000..32508c44ee
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
@@ -0,0 +1,326 @@
+---
+id: 5d822fd413a79914d39e991e
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable.
+
+# --hints--
+
+You should give the `.fb2-window` elements a `width` of `22%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%");
+```
+
+You should give the `.fb2-window` elements a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%");
+```
+
+You should give the `.fb2-window` elements a `background-color` of `--window-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
new file mode 100644
index 0000000000..51ec85b766
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
@@ -0,0 +1,324 @@
+---
+id: 5d822fd413a79914d39e991f
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container.
+
+# --hints--
+
+You should remove the `background-color` property from `.fb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor);
+```
+
+You should give `.fb2b` a `background-color` of `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
new file mode 100644
index 0000000000..309d57ea7c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
@@ -0,0 +1,330 @@
+---
+id: 5d822fd413a79914d39e9920
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape.
+
+# --hints--
+
+You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)");
+```
+
+You should give `.fb2a` a `border-left` of `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent");
+```
+
+You should give `.fb2a` a `border-right` of `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+--fcc-editable-region--
+.fb2a {
+  width: 100%;
+}
+--fcc-editable-region--
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
new file mode 100644
index 0000000000..0347b2e840
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9921
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two.
+
+# --hints--
+
+You should add four `div` elements within `.fb3`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4);
+```
+
+You should give the first new `div` a class of `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a"));
+```
+
+You should give the second new `div` a class of `fb3b`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b"));
+```
+
+You should give the third new `div` a class of `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a"));
+```
+
+You should give the fourth new `div` a class of `fb3b`.
+
+```js
+assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3"></div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
new file mode 100644
index 0000000000..6d78586a55
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
@@ -0,0 +1,347 @@
+---
+id: 5d822fd413a79914d39e9922
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`.
+
+# --hints--
+
+You should give `.fb3a` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%");
+```
+
+You should give `.fb3a` a `height` of `15%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%");
+```
+
+You should give `.fb3b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%");
+```
+
+You should give `.fb3b` a `height` of `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--  
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
new file mode 100644
index 0000000000..9d484855c3
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9923
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`.
+
+# --hints--
+
+You should remove the `background-color` from `.fb3`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor);
+```
+
+You should give `.fb3a` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+You should give `.fb3b` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
new file mode 100644
index 0000000000..9849c03bbc
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
@@ -0,0 +1,340 @@
+---
+id: 5d822fd413a79914d39e9924
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Add your `building-wrap` class to the `.fb3` element to center the sections.
+
+# --hints--
+
+You should add the class `building-wrap` to `.fb3`.
+
+```js
+assert.exists(document.querySelector("div.fb3.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
new file mode 100644
index 0000000000..777990a363
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
@@ -0,0 +1,346 @@
+---
+id: 5d822fd413a79914d39e9925
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section.
+
+# --hints--
+
+You should add three `div` elements within the first `.fb3a` element.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3);
+```
+
+You should give each new `div` a class of `fb3-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a"></div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
new file mode 100644
index 0000000000..2bdf0e99db
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
@@ -0,0 +1,355 @@
+---
+id: 5d822fd413a79914d39e9926
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value.
+
+# --hints--
+
+You should give `.fb3-window` a `width` of `25%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%");
+```
+
+You should give `.fb3-window` a `height` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%");
+```
+
+You should give `.fb3-window` a `background-color` of `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
new file mode 100644
index 0000000000..98bb84bfe6
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
@@ -0,0 +1,350 @@
+---
+id: 5d822fd413a79914d39e9927
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+Add your `window-wrap` class to the `.fb3a` element to center and space the windows.
+
+# --hints--
+
+You should give `.fb3a` a class of `window-wrap`.
+
+```js
+assert.exists(document.querySelector("div.fb3a.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
new file mode 100644
index 0000000000..ed19c0331b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
@@ -0,0 +1,349 @@
+---
+id: 5d822fd413a79914d39e9928
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+With CSS variables you can change values without searching everywhere in the stylesheet. Change the `--window-color1` value to `#bb99ff`.
+
+# --hints--
+
+You should change the value of `--window-color1` to `#bb99ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
new file mode 100644
index 0000000000..cc5626304a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
@@ -0,0 +1,362 @@
+---
+id: 5d822fd413a79914d39e9929
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Only three more buildings to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now.
+
+# --hints--
+
+You should add two `div` elements within `.fb4`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2);
+```
+
+You should give the first new `div` a class of `fb4a`.
+
+```js
+assert.exists(document.querySelector("div.fb4a"));
+```
+
+You should give the second new `div` a class of `fb4b`.
+
+```js
+assert.exists(document.querySelector("div.fb4b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+--fcc-editable-region--
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
new file mode 100644
index 0000000000..e5fef28c8c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
@@ -0,0 +1,359 @@
+---
+id: 5d822fd413a79914d39e992a
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Give `.fb4b` a `width` of `100%` and `height` of `89%`.
+
+# --hints--
+
+You should give `.fb4b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%");
+```
+
+You should give `.fb4b` a `height` of `89%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
new file mode 100644
index 0000000000..544a93886a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
@@ -0,0 +1,361 @@
+---
+id: 5d822fd413a79914d39e992b
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`.
+
+# --hints--
+
+You should remove the `background-color` from `.fb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor);
+```
+
+You should give `.fb4b` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
new file mode 100644
index 0000000000..ce604acaff
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
@@ -0,0 +1,364 @@
+---
+id: 5d822fd413a79914d39e992c
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`.
+
+# --hints--
+
+You should add six `div` elements within `.fb4b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6);
+```
+
+You should give each new `div` a class of `fb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+--fcc-editable-region--
+        <div class="fb4b"></div>
+--fcc-editable-region--
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
new file mode 100644
index 0000000000..3f062a2400
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992d
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building.
+
+# --hints--
+
+You should give `.fb4-window` a `width` of `30%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%");
+```
+
+You should give `.fb4-window` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%");
+```
+
+You should give `.fb4-window` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
new file mode 100644
index 0000000000..d39b2877ef
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
@@ -0,0 +1,374 @@
+---
+id: 5d822fd413a79914d39e992e
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space.
+
+# --hints--
+
+You should give `.fb4-window` a `background-color` of `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+You should give `.fb4-window` a `margin` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
new file mode 100644
index 0000000000..c006f27898
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992f
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+The windows are stacked on top of each other on the rightmost purple building. Turn the building into a flexbox parent, and use the `flex-wrap` property to put the windows side by side, and push them down to a new row when they don't fit.
+
+# --hints--
+
+You should give `.fb4b` a `display` of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex");
+```
+
+You should give `.fb4b` a `flex-wrap` of `wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
new file mode 100644
index 0000000000..6a95d78f33
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
@@ -0,0 +1,381 @@
+---
+id: 5d822fd413a79914d39e9930
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color.
+
+# --hints--
+
+You should give `.fb4a` a `border-top` of `5vh solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent")
+```
+
+You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
new file mode 100644
index 0000000000..cf534fc4d5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
@@ -0,0 +1,404 @@
+---
+id: 5d822fd413a79914d39e9931
+title: Step 106
+challengeType: 0
+dashedName: step-106
+---
+
+# --description--
+
+You can remove the `background-color` for this building now, since it isn't needed.
+
+# --hints--
+
+You should remove the `background-color` of `.fb6`.
+
+```js
+assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
new file mode 100644
index 0000000000..659058a647
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
@@ -0,0 +1,396 @@
+---
+id: 5d822fd413a79914d39e9932
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`.
+
+# --hints--
+
+You should give `.fb5` a `background` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background);
+```
+
+You should give the `background` a `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient");
+```
+
+You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/);
+```
+
+You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
new file mode 100644
index 0000000000..25ba879145
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9933
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows.
+
+# --hints--
+
+You should give `.fb5` a second `repeating-linear-gradient` in the `background` property.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/);
+```
+
+You should give the second `repeating-linear-gradient` a direction of `90deg`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/);
+```
+
+You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/);
+```
+
+You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    )
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
new file mode 100644
index 0000000000..9d6a5a5b02
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9934
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`.
+
+# --hints--
+
+You should add a `repeating-linear-gradient` to `.fb6` in the `background` property.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient");
+```
+
+You should give the `repeating-linear-gradient` a direction of `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
new file mode 100644
index 0000000000..4f27e41fc9
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9935
+title: Step 105
+challengeType: 0
+dashedName: step-105
+---
+
+# --description--
+
+Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors.
+
+# --hints--
+
+You should give `.fb6` a second `repeating-linear-gradient` in the `background` property.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/);
+```
+
+You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+    90deg,
+    var(--building-color3),
+    var(--building-color3) 10%,
+    transparent 10%,
+    transparent 30%
+  )
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
new file mode 100644
index 0000000000..7bd61afd38
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9936
+title: Step 107
+challengeType: 0
+dashedName: step-107
+---
+
+# --description--
+
+Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together.
+
+# --hints--
+
+You should remove the `border` from the `*` selector.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
new file mode 100644
index 0000000000..029d1e069c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
@@ -0,0 +1,403 @@
+---
+id: 5d822fd413a79914d39e9937
+title: Step 108
+challengeType: 0
+dashedName: step-108
+---
+
+# --description--
+
+Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline.
+
+# --hints--
+
+You should add a class of `sky` to `.background-buildings`.
+
+```js
+assert.exists(document.querySelector("div.background-buildings.sky"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
new file mode 100644
index 0000000000..56759e1359
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
@@ -0,0 +1,421 @@
+---
+id: 5d822fd413a79914d39e9938
+title: Step 109
+challengeType: 0
+dashedName: step-109
+---
+
+# --description--
+
+Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun.
+
+# --hints--
+
+You should give `.sky` a `radial-gradient` in the `background` property.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient");
+```
+
+You should give the `radial-gradient` a first color of `#ffcf33`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/);
+```
+
+You should give the `radial-gradient` a second color of `#ffff66` at `21%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/);
+```
+
+You should give the `radial-gradient` a third color of `#bbeeff` at `100%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
new file mode 100644
index 0000000000..80e000e8b6
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
@@ -0,0 +1,410 @@
+---
+id: 5d822fd413a79914d39e9939
+title: Step 110
+challengeType: 0
+dashedName: step-110
+---
+
+# --description--
+
+At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves.
+
+# --hints--
+
+You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.sky {
+  background: radial-gradient(
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
new file mode 100644
index 0000000000..d2ce95a6e6
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
@@ -0,0 +1,422 @@
+---
+id: 5d822fd413a79914d39e993a
+title: Step 111
+challengeType: 0
+dashedName: step-111
+---
+
+# --description--
+
+In the previous module you learned that media queries can be used to change styles based on certain conditions, and they look like this:
+
+```css
+@media (condition) {
+
+}  
+```
+
+Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less.
+
+# --hints--
+
+You should add an empty media query with `max-width: 1000px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
new file mode 100644
index 0000000000..3d0bf68b6e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
@@ -0,0 +1,424 @@
+---
+id: 5d822fd413a79914d39e993b
+title: Step 112
+challengeType: 0
+dashedName: step-112
+---
+
+# --description--
+
+Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night.
+
+Note: You are going to need to scroll past the editable region to copy the class.
+
+# --hints--
+
+You should not delete the existing `.sky` declaration.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/);
+```
+
+You should copy the existing `.sky` declaration into the media query.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+@media (max-width: 1000px) {
+
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
new file mode 100644
index 0000000000..ce748ba40e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
@@ -0,0 +1,437 @@
+---
+id: 5d822fd413a79914d39e993c
+title: Step 113
+challengeType: 0
+dashedName: step-113
+---
+
+# --description--
+
+In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors.
+
+# --hints--
+
+You should change the first color values from `#ffcf33` to `#ccc`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/);
+```
+
+You should change the second color value from `#ffff66` to `#445`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/);
+```
+
+You should change the third color value from `#bbeeff` to `#223`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+closest-corner circle at 15% 15%,
+#ffcf33,
+#ffcf33 20%,
+#ffff66 21%,
+#bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3),
+var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color4),
+var(--building-color4) 10%,
+transparent 10%,
+transparent 15%
+    ),
+    repeating-linear-gradient(
+var(--building-color4),
+var(--building-color4) 10%,
+var(--window-color4) 10%,
+var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 5%,
+transparent 5%,
+transparent 10%
+    ),
+    repeating-linear-gradient(
+90deg,
+var(--building-color2),
+var(--building-color2) 12%,
+var(--window-color2) 12%,
+var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3) 10%,
+transparent 10%,
+transparent 30%
+    ),
+    repeating-linear-gradient(
+var(--building-color3),
+var(--building-color3) 10%,
+var(--window-color3) 10%,
+var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+  closest-corner circle at 15% 15%,
+  #ffcf33,
+  #ffcf33 20%,
+  #ffff66 21%,
+  #bbeeff 100%
+);
+  }
+--fcc-editable-region--
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
new file mode 100644
index 0000000000..57b5bb2de1
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
@@ -0,0 +1,450 @@
+---
+id: 5d822fd413a79914d39e993d
+title: Step 114
+challengeType: 0
+dashedName: step-114
+---
+
+# --description--
+
+Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there.
+
+# --hints--
+
+You should add a `:root` selector to the media query.
+
+```js
+assert.notDeepEqual(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root"), undefined);
+```
+
+You should add `--building-color1` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000");
+```
+
+You should add `--building-color2` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000");
+```
+
+You should add `--building-color3` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000");
+```
+
+You should add `--building-color4` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
new file mode 100644
index 0000000000..2b670dee03
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
@@ -0,0 +1,862 @@
+---
+id: 5d822fd413a79914d39e993e
+title: Step 115
+challengeType: 0
+dashedName: step-115
+---
+
+# --description--
+
+Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night.
+
+Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great!
+
+# --hints--
+
+You should add `--window-color1` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777");
+```
+
+You should add `--window-color2` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777");
+```
+
+You should add `--window-color3` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777");
+```
+
+You should add `--window-color4` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+  }
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+    --window-color1: #777;
+    --window-color2: #777;
+    --window-color3: #777;
+    --window-color4: #777;
+  }
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
new file mode 100644
index 0000000000..6a1bfc5b2b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
@@ -0,0 +1,65 @@
+---
+id: 619665c9abd72906f3ad30f9
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You will be building a happy Flappy Penguin, and further practicing CSS transforms and animations in the process.
+
+Begin with linking your stylesheet to the page.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.exists(document.querySelector('link'));
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
new file mode 100644
index 0000000000..2572b413a4
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
@@ -0,0 +1,56 @@
+---
+id: 61967e74a8e3690ab6292daa
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`.
+
+# --hints--
+
+You should use the `body` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+You should use the `background` property in the `body` selector.
+
+```js
+assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background'));
+```
+
+You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
new file mode 100644
index 0000000000..67e0a51de0
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
@@ -0,0 +1,53 @@
+---
+id: 61968df2acd5550bf1616c34
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Normalize your page's sizing, by removing the `body` element's `margin` and `padding`.
+
+# --hints--
+
+You should give `body` a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+You should give `body` a `padding` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
new file mode 100644
index 0000000000..ec42f16803
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
@@ -0,0 +1,51 @@
+---
+id: 61968e9243a4090cc805531c
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Remove both the horizontal and vertical scrollbars, using only one property.
+
+# --hints--
+
+You should give `body` an `overflow` of `--fcc-expected--`. But found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
new file mode 100644
index 0000000000..75b3097c34
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
@@ -0,0 +1,64 @@
+---
+id: 61968f8877c6720d6d61aaf5
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within the `body`, add a `div` with a `class` of `ground`.
+
+# --hints--
+
+You should add a new `div`.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+You should give the `div` a `class` of `ground`.
+
+```js
+assert.include(document.querySelector('div')?.className, 'ground');
+```
+
+You should place the `div` within the `body`.
+
+```js
+assert.exists(document.querySelector('body > div.ground'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
new file mode 100644
index 0000000000..2e20bd3589
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
@@ -0,0 +1,66 @@
+---
+id: 619691693bc14b0e528f5a20
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`.
+
+# --hints--
+
+You should use the `.ground` selector.
+
+```js
+assert.match(code, /\.ground\s*\{/);
+```
+
+You should give the `.ground` element a `width` of `100vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw');
+```
+
+You should give the `.ground` element a `height` of `400px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
new file mode 100644
index 0000000000..afa5d6f94b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
@@ -0,0 +1,58 @@
+---
+id: 6196928658b6010f28c39484
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`.
+
+# --hints--
+
+You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
new file mode 100644
index 0000000000..606e749c43
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
@@ -0,0 +1,73 @@
+---
+id: 619692ff79f5770fc6d8c0b4
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin.
+
+# --hints--
+
+You should add a new `div` within the `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 2);
+```
+
+You should give the `div` a `class` of `penguin`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin');
+```
+
+You should place `div.penguin` before `div.ground`.
+
+```js
+assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
new file mode 100644
index 0000000000..46ebd08c10
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
@@ -0,0 +1,75 @@
+---
+id: 6196990f966e8f10a40094f6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Target the `.penguin` element, and set its `width` and `height` to `300px`.
+
+# --hints--
+
+You should use the `.penguin` selector.
+
+```js
+assert.match(code, /\.penguin\s*\{/);
+```
+
+You should give `.penguin` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
+```
+
+You should give `.penguin` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
new file mode 100644
index 0000000000..860cde3323
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
@@ -0,0 +1,74 @@
+---
+id: 619699c10a0f6e11591d73c4
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`.
+
+# --hints--
+
+You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto');
+```
+
+You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
new file mode 100644
index 0000000000..3fa5992f53
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
@@ -0,0 +1,83 @@
+---
+id: 61969aa6acef5b12200f672e
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To create some scenery in the background, you will add two mountains.
+
+Above the `.penguin` element, add a `div` with a `class` of `left-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `left-mountain`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain');
+```
+
+You should place `.left-mountain` before `.penguin`.
+
+```js
+assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
new file mode 100644
index 0000000000..3568d09eeb
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
@@ -0,0 +1,89 @@
+---
+id: 61969c487ced6f12db8fef94
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`.
+
+# --hints--
+
+You should use the `.left-mountain` selector.
+
+```js
+assert.match(code, /\.left-mountain\s*\{/);
+```
+
+You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
+```
+
+You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
+```
+
+You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
new file mode 100644
index 0000000000..e8eba6e4ec
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
@@ -0,0 +1,76 @@
+---
+id: 61969d66cfcdba137d021558
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
new file mode 100644
index 0000000000..a182060c6c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
@@ -0,0 +1,91 @@
+---
+id: 61969e7451455614217e901b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by.
+
+Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis.
+
+# --hints--
+
+You should give `.left-mountain` a `transform` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
+```
+
+You should use the `skew` function on `transform`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
+```
+
+You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
new file mode 100644
index 0000000000..dc15f9983e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
@@ -0,0 +1,90 @@
+---
+id: 6196adc17f77a714d51485f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Set the stack level of the mountain element such that it remains directly behind the `.ground` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+You should not change the `z-index` of the `.ground` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
new file mode 100644
index 0000000000..870ce25dc1
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
@@ -0,0 +1,86 @@
+---
+id: 6196aead7ac7bf1584b17a7f
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`.
+
+# --hints--
+
+You should give `.left-mountain` a `margin-top` of `100px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px');
+```
+
+You should give `.ground` a `margin-top` of `-58px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
new file mode 100644
index 0000000000..b6ddd5cad7
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
@@ -0,0 +1,92 @@
+---
+id: 6196ce0415498d2463989e84
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 4);
+```
+
+You should give the `div` a `class` of `back-mountain`.
+
+```js
+assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain');
+```
+
+You should place `.back-mountain` after `.left-mountain`.
+
+```js
+assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
new file mode 100644
index 0000000000..bcbe4d3e9d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
@@ -0,0 +1,100 @@
+---
+id: 6196cee94c6da1253809dff9
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`.
+
+# --hints--
+
+You should use the `.back-mountain` selector.
+
+```js
+assert.match(code, /\.back-mountain\s*\{/);
+```
+
+You should give `.back-mountain` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px');
+```
+
+You should give `.back-mountain` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px');
+```
+
+You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
new file mode 100644
index 0000000000..4bb9ea8634
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
@@ -0,0 +1,87 @@
+---
+id: 6196d00a5d7292262bc02f4c
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.back-mountain` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
new file mode 100644
index 0000000000..d3fd004502
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
@@ -0,0 +1,100 @@
+---
+id: 6196d0cda039d026f7f78d1e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1');
+```
+
+You should not change the `z-index` of the `.left-mountain` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
new file mode 100644
index 0000000000..cdd348db03
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
@@ -0,0 +1,131 @@
+---
+id: 6196d1ac33c68d27dcda5796
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`.
+
+# --hints--
+
+You should use the `transform` property to rotate the element.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.notEmpty(backMountain?.transform);
+} else {
+  assert.notEmpty(backMountain?.rotate);
+}
+```
+
+You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.equal(backMountain?.transform, 'rotate(45deg)');
+} else {
+  assert.equal(backMountain?.rotate, '45deg');
+}
+```
+
+You should give `.back-mountain` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
+```
+
+You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
+```
+
+You should give `.back-mountain` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
+```
+
+You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
new file mode 100644
index 0000000000..151831dbd7
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
@@ -0,0 +1,104 @@
+---
+id: 6196d213d99f16287bff22ae
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`.
+
+# --hints--
+
+You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 5);
+```
+
+You should give the new `div` element a `class` of `sun`.
+
+```js
+assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun');
+```
+
+You should place the new `div` element immediately after the `.back-mountain` element.
+
+```js
+assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
new file mode 100644
index 0000000000..61cf99cfee
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
@@ -0,0 +1,112 @@
+---
+id: 6196d2c0f22ca0293107c048
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`.
+
+# --hints--
+
+You should use the `.sun` selector.
+
+```js
+assert.match(code, /\.sun\s*\{/);
+```
+
+You should give `.sun` a `width` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px');
+```
+
+You should give `.sun` a `height` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px');
+```
+
+You should give `.sun` a `background-color` of `yellow`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
new file mode 100644
index 0000000000..f924e1d525
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
@@ -0,0 +1,105 @@
+---
+id: 6196d32d1340d829f0f6f57d
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle.
+
+# --hints--
+
+You should give `.sun` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute');
+```
+
+You should give `.sun` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
new file mode 100644
index 0000000000..969618185d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
@@ -0,0 +1,107 @@
+---
+id: 6196d41d40bf9b2aaea5d520
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen.
+
+# --hints--
+
+You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px');
+```
+
+You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
new file mode 100644
index 0000000000..1253455f06
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
@@ -0,0 +1,118 @@
+---
+id: 6197cff995d03905b0cca8ad
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Your penguin will consist of two main sections: the head, and the body.
+
+Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`.
+
+# --hints--
+
+You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `penguin-head`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head');
+```
+
+You should give the second `div` a `class` of `penguin-body`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+--fcc-editable-region--
+    <div class="penguin">
+
+    </div>
+--fcc-editable-region--
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
new file mode 100644
index 0000000000..5256d40e7d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
@@ -0,0 +1,125 @@
+---
+id: 6197f40a16afea068c7e60c8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex);
+```
+
+You should give the `.penguin` element a `z-index` of `4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4');
+```
+
+You should give `.penguin` a `position` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position);
+```
+
+You should give `.penguin` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
new file mode 100644
index 0000000000..c34e5dc0b5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
@@ -0,0 +1,65 @@
+---
+id: 6197f667297bb30a552ce017
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`.
+
+# --hints--
+
+You should give `.ground` a `z-index` of `3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+You should give `.ground` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
new file mode 100644
index 0000000000..4f42960c10
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
@@ -0,0 +1,128 @@
+---
+id: 61993b72e874e709b8dfd666
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`.
+
+# --hints--
+
+You should use the `.penguin-head` selector.
+
+```js
+assert.match(code, /\.penguin-head\s*\{/);
+```
+
+You should give `.penguin-head` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%');
+```
+
+You should give `.penguin-head` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`.
+
+```js
+assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
new file mode 100644
index 0000000000..837b66e7b8
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
@@ -0,0 +1,122 @@
+---
+id: 61993cf26a8e0f0a553db223
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+_Most_ penguins do not have a square head.
+
+Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`.
+
+# --hints--
+
+You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`.
+
+```js
+// Maybe check for individual border-radius properties?
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
new file mode 100644
index 0000000000..42992c942d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
@@ -0,0 +1,139 @@
+---
+id: 61993dbb35adf30b10d49e38
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.
+
+# --hints--
+
+You should use the `.penguin-body` selector.
+
+```js
+assert.match(code, /\.penguin-body\s*\{/);
+```
+
+You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
+```
+
+You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
+```
+
+You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
new file mode 100644
index 0000000000..1304f820e2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
@@ -0,0 +1,133 @@
+---
+id: 61993e9adc9e9a0bb4d28fff
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Another interesting fact about penguins is that they do not have square bodies.
+
+Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body.
+
+# --hints--
+
+You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
new file mode 100644
index 0000000000..177fa37ed7
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
@@ -0,0 +1,139 @@
+---
+id: 6199409834ccaf0d10736596
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`.
+
+# --hints--
+
+You should use the `.penguin *` selector.
+
+```js
+assert.match(code, /\.penguin\s*\*\s*\{/);
+```
+
+You should give `.penguin *` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
new file mode 100644
index 0000000000..39d2becaa7
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
@@ -0,0 +1,154 @@
+---
+id: 6199429802b7c10dc79ff871
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-head` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
+```
+
+You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
+```
+
+You should give `.penguin-head` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
+```
+
+You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
new file mode 100644
index 0000000000..06adbcbaed
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
@@ -0,0 +1,156 @@
+---
+id: 619943285a41720e6370d985
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top);
+```
+
+You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%');
+```
+
+You should give `.penguin-body` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left);
+```
+
+You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
new file mode 100644
index 0000000000..841e0fac70
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
@@ -0,0 +1,146 @@
+---
+id: 619943876b706d0f35c01dbc
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex);
+```
+
+You should give the `.penguin-head` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
new file mode 100644
index 0000000000..71620d485d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
@@ -0,0 +1,148 @@
+---
+id: 6199442866286d0ff421a4fc
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string.
+
+# --hints--
+
+You should use the `.penguin-body::before` selector.
+
+```js
+assert.match(code, /\.penguin-body::before\s*\{/);
+```
+
+You should give `.penguin-body::before` a `content` of `""`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
new file mode 100644
index 0000000000..95939a0a79
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
@@ -0,0 +1,145 @@
+---
+id: 619bcf239fc15905ecd66fce
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Position the pseudo-element relative to its closest positioned ancestor.
+
+# --hints--
+
+You should give `.penguin-body::before` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
new file mode 100644
index 0000000000..144a263043
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
@@ -0,0 +1,158 @@
+---
+id: 619be73b3c806006ccc00bb0
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`.
+
+# --hints--
+
+You should give `.penguin-body::before` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
+```
+
+You should give `.penguin-body::before` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%');
+```
+
+You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
new file mode 100644
index 0000000000..32e8d7967e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Position the pseudo-element `10%` from the top and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
new file mode 100644
index 0000000000..f22f0e3944
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
@@ -0,0 +1,160 @@
+---
+id: 619be80062551a080e32c821
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`.
+
+# --hints--
+
+You should use the `border-radius` property to round off the crest.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
+```
+
+You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
new file mode 100644
index 0000000000..1c9a12db86
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
@@ -0,0 +1,152 @@
+---
+id: 619be8ce4ea49008c5bfbc30
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Increase the pseudo-element's transparency by `30%`.
+
+# --hints--
+
+You should give `.penguin-body::before` an `opacity` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
new file mode 100644
index 0000000000..088e47ba55
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
@@ -0,0 +1,166 @@
+---
+id: 619be946958c6009844f1dee
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`.
+
+# --hints--
+
+You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
+```
+
+You should give the second `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
new file mode 100644
index 0000000000..e25cfd80ce
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
@@ -0,0 +1,193 @@
+---
+id: 619c155df0063a0a3fec0e32
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`.
+
+# --hints--
+
+You should use the `.face` selector.
+
+```js
+assert.match(code, /\.face\s*\{/);
+```
+
+You should give `.face` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
+```
+
+You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
+```
+
+You should give `.face` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
+```
+
+You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
+```
+
+You should give `.face` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
+```
+
+You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
new file mode 100644
index 0000000000..999faf2cd7
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
@@ -0,0 +1,165 @@
+---
+id: 619c16debd0c270b01c5ce38
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`.
+
+# --hints--
+
+You should give `.face` a `border-radius` of `70% 70% 60% 60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
new file mode 100644
index 0000000000..1204286781
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
@@ -0,0 +1,169 @@
+---
+id: 619cfdf2e63ddf05feab86ad
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Position the `.face` elements so that they are `15%` from the top.
+
+# --hints--
+
+You should give `.face` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top);
+```
+
+You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
new file mode 100644
index 0000000000..3529e08289
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
@@ -0,0 +1,171 @@
+---
+id: 619d019488f98c06acbbb71a
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Currently, the two `.face` elements are on top of each other.
+
+Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element.
+
+# --hints--
+
+You should give a `class` of `left` to the first `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left');
+```
+
+You should give a `class` of `right` to the second `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
new file mode 100644
index 0000000000..cdb0268e02
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
@@ -0,0 +1,177 @@
+---
+id: 619d022dc8400c0763829a17
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Target the `.face` element with the `left` class, and position it `5%` left of its parent.
+
+# --hints--
+
+You should use the `.face.left` selector.
+
+```js
+assert.match(code, /\.face\.left\s*\{/);
+```
+
+You should give `.face.left` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left);
+```
+
+You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
new file mode 100644
index 0000000000..c81e359b35
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
@@ -0,0 +1,181 @@
+---
+id: 619d02c7bc95bf0827a5d296
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Target the `.face` element with the `right` class, and position it `5%` right of its parent.
+
+# --hints--
+
+You should use the `.face.right` selector.
+
+```js
+assert.match(code, /\.face\.right\s*\{/);
+```
+
+You should give `.face.right` a `right` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
+```
+
+You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+.face.left {
+  left: 5%;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
new file mode 100644
index 0000000000..7101cc6218
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
@@ -0,0 +1,184 @@
+---
+id: 619d033915012509031f309a
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Below the `.face.right` element, add a `div` element with a `class` of `chin`.
+
+# --hints--
+
+You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `chin`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.chin'));
+```
+
+You should place the `div` element below the `.face.right` element.
+
+```js
+assert.exists(document.querySelector('.face.right + .chin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
new file mode 100644
index 0000000000..8ff7447615
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
@@ -0,0 +1,210 @@
+---
+id: 619d03dadadb6509a16f4f5f
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`.
+
+# --hints--
+
+You should use the `.chin` selector.
+
+```js
+assert.match(code, /\.chin\s*\{/);
+```
+
+You should give `.chin` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width);
+```
+
+You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%');
+```
+
+You should give `.chin` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height);
+```
+
+You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%');
+```
+
+You should give `.chin` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor);
+```
+
+You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
new file mode 100644
index 0000000000..9177d13254
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
@@ -0,0 +1,206 @@
+---
+id: 619d0503e03a790a4179d463
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`.
+
+# --hints--
+
+You should give `.chin` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top);
+```
+
+You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%');
+```
+
+You should give `.chin` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left);
+```
+
+You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%');
+```
+
+You should give `.chin` a `border-radius` of `70% 70% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
new file mode 100644
index 0000000000..ca096090f1
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
@@ -0,0 +1,197 @@
+---
+id: 619d05c54dabca0b10058235
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+So far, the `.face` and `.chin` elements have the same `background-color`.
+
+Create a custom CSS property called `--penguin-face`, and set it to `white`.
+
+# --hints--
+
+You should use the `:root` selector.
+
+```js
+assert.match(code, /:root\s*\{/);
+```
+
+You should give `:root` a `--penguin-face` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face'));
+```
+
+You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
new file mode 100644
index 0000000000..207c0664d1
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
@@ -0,0 +1,197 @@
+---
+id: 619d0882f54bf40bdc4671ed
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Where relevant, replace property values with your `--penguin-face` variable.
+
+# --hints--
+
+You should give `.face` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should give `.chin` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should not use `var(--penguin-face)` in the `.penguin-body` selector.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
new file mode 100644
index 0000000000..a7caac10b5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
@@ -0,0 +1,222 @@
+---
+id: 619d090cd8d6db0c93dc5087
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5);
+```
+
+You should give the first new `div` a `class` of `eye`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye'));
+```
+
+You should give the second new `div` a `class` of `eye`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.right'));
+```
+
+You should place `div.eye.left` after `div.chin`.
+
+```js
+assert.exists(document.querySelector('.chin + .eye.left'));
+```
+
+You should place `div.eye.right` after `div.eye.left`.
+
+```js
+assert.exists(document.querySelector('.eye.left + .eye.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
new file mode 100644
index 0000000000..e2f3ce9e93
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
@@ -0,0 +1,207 @@
+---
+id: 619d0b51ca42ed0d74582186
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`.
+
+# --hints--
+
+You should use the `.eye` selector.
+
+```js
+assert.match(code, /\.eye\s*\{/);
+```
+
+You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%');
+```
+
+You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%');
+```
+
+You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
new file mode 100644
index 0000000000..a4e7d18c12
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
@@ -0,0 +1,200 @@
+---
+id: 619d0bc9cb05360e1bf549c3
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%');
+```
+
+You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
new file mode 100644
index 0000000000..b567a24805
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
@@ -0,0 +1,215 @@
+---
+id: 619d0c1594c38c0ebae75878
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent.
+
+# --hints--
+
+You should use the `.eye.left` selector.
+
+```js
+assert.match(code, /\.eye\.left\s*\{/);
+```
+
+You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%');
+```
+
+You should use the `.eye.right` selector.
+
+```js
+assert.match(code, /\.eye\.right\s*\{/);
+```
+
+You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
new file mode 100644
index 0000000000..2d324e7251
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
@@ -0,0 +1,225 @@
+---
+id: 619d0d18ca99870f884a7bff
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Within each `.eye` element, add a `div` with a `class` of `eye-lid`.
+
+# --hints--
+
+You should add one `div` element within `.eye.left`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
+```
+
+You should add one `div` element within `.eye.right`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
+```
+
+You should give the first new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.left > div.eye-lid'));
+```
+
+You should give the second new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.right > div.eye-lid'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+
+        </div>
+        <div class="eye right">
+
+        </div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
new file mode 100644
index 0000000000..224cfce88b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
@@ -0,0 +1,227 @@
+---
+id: 619d0daf214542102739b0da
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`.
+
+# --hints--
+
+You should use the `.eye-lid` selector.
+
+```js
+assert.match(code, /\.eye-lid\s*\{/);
+```
+
+You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%');
+```
+
+You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%');
+```
+
+You should give `.eye-lid` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
new file mode 100644
index 0000000000..e779df5c2d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
@@ -0,0 +1,226 @@
+---
+id: 619d0e56f9ca9710fcb974e3
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%');
+```
+
+You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%');
+```
+
+You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
new file mode 100644
index 0000000000..ed405abe92
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
@@ -0,0 +1,247 @@
+---
+id: 619d0eec0ac40611b41e2ccc
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7);
+```
+
+You should give the first new `div` a `class` of `blush`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush'));
+```
+
+You should give the second new `div` a `class` of `blush`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.right'));
+```
+
+You should place `.blush.right` after `.blush.left`.
+
+```js
+assert.exists(document.querySelector('.blush.left + .blush.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
new file mode 100644
index 0000000000..a346767374
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
@@ -0,0 +1,238 @@
+---
+id: 619d0fc9825c271253df28d4
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`.
+
+# --hints--
+
+You should use the `.blush` selector.
+
+```js
+assert.match(code, /\.blush\s*\{/);
+```
+
+You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%');
+```
+
+You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%');
+```
+
+You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
new file mode 100644
index 0000000000..78310b8e23
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
@@ -0,0 +1,231 @@
+---
+id: 619d102d786c3d13124c37c6
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%');
+```
+
+You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
new file mode 100644
index 0000000000..9431c4764e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
@@ -0,0 +1,246 @@
+---
+id: 619d107edf7ddf13cc77106a
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent.
+
+# --hints--
+
+You should use the `.blush.left` selector.
+
+```js
+assert.match(code, /\.blush\.left\s*\{/);
+```
+
+You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%');
+```
+
+You should use the `.blush.right` selector.
+
+```js
+assert.match(code, /\.blush\.right\s*\{/);
+```
+
+You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
new file mode 100644
index 0000000000..39348186b5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
@@ -0,0 +1,271 @@
+---
+id: 619d10cc98145f14820399c5
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9);
+```
+
+You should give the first new `div` a `class` of `beak`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak'));
+```
+
+You should give the second new `div` a `class` of `beak`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `top`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.top'));
+```
+
+You should give the second new `div` a `class` of `bottom`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.bottom'));
+```
+
+You should place `div.beak.top` after `div.blush.right`.
+
+```js
+assert.exists(document.querySelector('.blush.right + .beak.top'));
+```
+
+You should place `div.beak.bottom` after `div.beak.top`.
+
+```js
+assert.exists(document.querySelector('.beak.top + .beak.bottom'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
new file mode 100644
index 0000000000..ea381856af
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
@@ -0,0 +1,256 @@
+---
+id: 619d115e2adcd71538e82ebb
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should use the `.beak` selector.
+
+```js
+assert.match(code, /\.beak\s*\{/);
+```
+
+You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%');
+```
+
+You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange');
+```
+
+You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
new file mode 100644
index 0000000000..d1617d8dce
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
@@ -0,0 +1,262 @@
+---
+id: 619d11e6d5ef9515d2a16033
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent.
+
+# --hints--
+
+You should use the `.beak.top` selector.
+
+```js
+assert.match(code, /\.beak\.top\s*\{/);
+```
+
+You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%');
+```
+
+You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%');
+```
+
+You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
new file mode 100644
index 0000000000..e580633578
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
@@ -0,0 +1,267 @@
+---
+id: 619d129a417d0716a94de913
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`.
+
+# --hints--
+
+You should use the `.beak.bottom` selector.
+
+```js
+assert.match(code, /\.beak\.bottom\s*\{/);
+```
+
+You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%');
+```
+
+You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%');
+```
+
+You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
new file mode 100644
index 0000000000..4773a10cef
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
@@ -0,0 +1,267 @@
+---
+id: 619d1340361095175f4b5115
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element.
+
+# --hints--
+
+You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
+```
+
+You should give the new `div` a `class` of `shirt`.
+
+```js
+assert.exists(document.querySelector('.penguin > div.shirt'));
+```
+
+You should place the new `div` before `.penguin-body`.
+
+```js
+assert.exists(document.querySelector('.shirt + .penguin-body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
new file mode 100644
index 0000000000..ff117fcdd8
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
@@ -0,0 +1,263 @@
+---
+id: 619d15797b580c1828b05426
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Within the `.shirt` element, add a `div` with the following emoji as content: 💜
+
+# --hints--
+
+You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
+```
+
+You should give the new `div` a content of `💜`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > div')?.textContent, '💜');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
new file mode 100644
index 0000000000..b0330c317b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
@@ -0,0 +1,264 @@
+---
+id: 619d15d955d9d418c4487bbc
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS`
+
+# --hints--
+
+You should add one `p` element within `.shirt`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > p')?.length, 1);
+```
+
+You should give the `p` element the content `I CSS`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+        <div>💜</div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
new file mode 100644
index 0000000000..2ca7d6a5d8
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
@@ -0,0 +1,278 @@
+---
+id: 619d1629a8adc61960ca8b40
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`.
+
+# --hints--
+
+You should use the `.shirt` selector.
+
+```js
+assert.match(code, /\.shirt\s*\{/);
+```
+
+You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px');
+```
+
+You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif');
+```
+
+You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
new file mode 100644
index 0000000000..c21bb0f24d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
@@ -0,0 +1,272 @@
+---
+id: 619d1c5fc9f8941a400955da
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+In some browsers, the _heart_ emoji may look slightly different from the previous step. This is because some of the character's properties were overridden by the `font-weight` style of `bold`.
+
+Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value.
+
+# --hints--
+
+You should use the `.shirt div` selector to target the `div` with the heart emoji.
+
+```js
+assert.match(code, /\.shirt div\s*\{/);
+```
+
+You should give the `.shirt div` a `font-weight` of `initial` or `normal`.
+
+```js
+assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
new file mode 100644
index 0000000000..79b1e394fb
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
@@ -0,0 +1,273 @@
+---
+id: 619d1dab9ff3421ae1976991
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent.
+
+# --hints--
+
+You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px');
+```
+
+You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+.shirt div {
+  font-weight: initial;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
new file mode 100644
index 0000000000..0c23ce14f1
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
@@ -0,0 +1,281 @@
+---
+id: 619d1deb8b04811b8839ffe4
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element.
+
+# --hints--
+
+You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px');
+```
+
+You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px');
+```
+
+You should give the `.shirt` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
new file mode 100644
index 0000000000..e650139f7e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
@@ -0,0 +1,272 @@
+---
+id: 619d1e7a8e81a61c5a819dc4
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+For the shirt's final touch, set the `color` to `#6a6969`.
+
+# --hints--
+
+You should give `.shirt` a `color` of `#6a6969`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
new file mode 100644
index 0000000000..a3dc1fdbf5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
@@ -0,0 +1,306 @@
+---
+id: 619d1ed33c9a071cf657a0d6
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Fun fact: Penguins cannot stand without at least two feet.
+
+Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `foot`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot'));
+```
+
+You should give the second new `div` a `class` of `foot`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.right'));
+```
+
+You should place `.foot.right` after `.foot.left`.
+
+```js
+assert.exists(document.querySelector('.foot.left + .foot.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
new file mode 100644
index 0000000000..f685b84cb6
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
@@ -0,0 +1,295 @@
+---
+id: 619d1fb5d244c31db8a7fdb7
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`.
+
+# --hints--
+
+You should use the `.foot` selector.
+
+```js
+assert.match(code, /\.foot\s*\{/);
+```
+
+You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%');
+```
+
+You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%');
+```
+
+You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
new file mode 100644
index 0000000000..e26cf4e13a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
@@ -0,0 +1,288 @@
+---
+id: 619d204bd73ae51e743b8e94
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%');
+```
+
+You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
new file mode 100644
index 0000000000..b4d5cd859d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
@@ -0,0 +1,304 @@
+---
+id: 619d20b12996101f430920fb
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+The penguin's beak and feet share the same `color`.
+
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-picorna` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna'));
+```
+
+You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange');
+```
+
+You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+  top: 85%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
new file mode 100644
index 0000000000..d2083801b8
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
@@ -0,0 +1,304 @@
+---
+id: 619d21fe6a3f9b2016be9d9d
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent.
+
+# --hints--
+
+You should use the `.foot.left` selector.
+
+```js
+assert.match(code, /\.foot\.left\s*\{/);
+```
+
+You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%');
+```
+
+You should use the `.foot.right` selector.
+
+```js
+assert.match(code, /\.foot\.right\s*\{/);
+```
+
+You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
new file mode 100644
index 0000000000..003b9709c0
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
@@ -0,0 +1,312 @@
+---
+id: 619d229b0e542520cd91c685
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`.
+
+# --hints--
+
+You should give `.foot.left` a `transform` of `rotate(80deg)`.
+
+```js
+const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left');
+
+if (leftFoot?.transform) {
+  assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)');
+} else {
+  assert.equal(leftFoot.getPropVal('rotate', true), '80deg');
+}
+```
+
+You should give `.foot.right` a `transform` of `rotate(-80deg)`.
+
+```js
+const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right');
+
+if (rightFoot?.transform) {
+  assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)');
+} else {
+  assert.equal(rightFoot.getPropVal('rotate', true), '-80deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.foot.left {
+  left: 25%;
+
+}
+
+.foot.right {
+  right: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
new file mode 100644
index 0000000000..ef45038dbc
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
@@ -0,0 +1,295 @@
+---
+id: 619d23089e787e216a7043d6
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element.
+
+# --hints--
+
+You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
new file mode 100644
index 0000000000..906076ce8b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
@@ -0,0 +1,328 @@
+---
+id: 619d237a107c10221ed743fa
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Fun fact: Penguins cannot fly without wings.
+
+Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4);
+```
+
+You should give the first new `div` a `class` of `arm`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm'));
+```
+
+You should give the second new `div` a `class` of `arm`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.right'));
+```
+
+You should place `.arm.right` after `.arm.left`.
+
+```js
+assert.exists(document.querySelector('.arm.left + .arm.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
new file mode 100644
index 0000000000..94dcb78521
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
@@ -0,0 +1,317 @@
+---
+id: 619d26b12e651022d80cd017
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`.
+
+# --hints--
+
+You should use the `.arm` selector.
+
+```js
+assert.match(code, /\.arm\s*\{/);
+```
+
+You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%');
+```
+
+You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
+
+```js
+assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
new file mode 100644
index 0000000000..a3333bcfba
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
@@ -0,0 +1,332 @@
+---
+id: 619d2712853306238f41828e
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-skin` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin'));
+```
+
+You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))');
+```
+
+You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    gray,
+    rgb(209, 210, 199)
+  );
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
new file mode 100644
index 0000000000..b897e4cc61
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
@@ -0,0 +1,340 @@
+---
+id: 619d2b7a84e78b246f2d17a2
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent.
+
+# --hints--
+
+You should use the `.arm.left` selector.
+
+```js
+assert.match(code, /\.arm\.left\s*\{/);
+```
+
+You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%');
+```
+
+You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%');
+```
+
+You should use the `.arm.right` selector.
+
+```js
+assert.match(code, /\.arm\.right\s*\{/);
+```
+
+You should give `.arm.right` a `top` of `0%`.
+
+```js
+assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top);
+```
+
+You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
new file mode 100644
index 0000000000..a677c9a443
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
@@ -0,0 +1,325 @@
+---
+id: 619d2bd9c1d43c2526e96f1f
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent.
+
+# --hints--
+
+You should use the `transform-origin` property to do this.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`.
+
+```js
+assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
new file mode 100644
index 0000000000..ce148c7f62
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
@@ -0,0 +1,326 @@
+---
+id: 619d2d4e80400325ff89664a
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis.
+
+# --hints--
+
+You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left');
+
+if (leftArm?.rotate && leftArm?.transform) {
+  assert.equal(leftArm.getPropVal('rotate', true), '130deg');
+  assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)');
+} else {
+  assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
new file mode 100644
index 0000000000..7b8d308ed3
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
@@ -0,0 +1,326 @@
+---
+id: 619d2ebc81ba81271460850d
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+Rotate the right arm by `45deg` counterclockwise.
+
+# --hints--
+
+You should give `.arm.right` a `transform` of `rotate(-45deg)`.
+
+```js
+const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right');
+
+if (rightArm?.transform) {
+  assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)');
+} else {
+  assert.equal(rightArm?.getPropVal('rotate', true), '-45deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+--fcc-editable-region--
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
new file mode 100644
index 0000000000..cb6dc37d62
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
@@ -0,0 +1,327 @@
+---
+id: 619d2f0e9440bc27caee1cec
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Fun fact: Most, if not all, flippers are not naturally rectangles.
+
+Give the `.arm` elements' top-left, top-right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`.
+
+# --hints--
+
+You should give `.arm` a `border-radius` of `30% 30% 30% 120%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
new file mode 100644
index 0000000000..81854db2b7
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
@@ -0,0 +1,323 @@
+---
+id: 619d2fd3ff4f772882e3d998
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element.
+
+# --hints--
+
+You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
new file mode 100644
index 0000000000..f11d2a97f4
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
@@ -0,0 +1,333 @@
+---
+id: 619d30350883802921bfcccc
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Now, you are going to use CSS animations to make the penguin wave.
+
+Define a new `@keyframes` named `wave`.
+
+# --hints--
+
+You should define a new `@keyframes` rule.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes'));
+```
+
+You should give the `@keyframes` rule a name of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
new file mode 100644
index 0000000000..3294c31569
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
@@ -0,0 +1,351 @@
+---
+id: 619d324f5915c929f36ae91d
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Give `wave` four waypoints starting at `10%`, and incrementing by `10%`.
+
+# --hints--
+
+You should add a `10%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
+```
+
+You should add a `20%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
+```
+
+You should add a `30%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
+```
+
+You should add a `40%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
+```
+
+You should have 4 waypoints in your keyframe.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
new file mode 100644
index 0000000000..74235426b5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
@@ -0,0 +1,347 @@
+---
+id: 619d32c7fa21f32aaa91d499
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%');
+const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, '');
+const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
new file mode 100644
index 0000000000..ac97b33ea2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
@@ -0,0 +1,347 @@
+---
+id: 619d333b738e3c2b5d58b095
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%');
+const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
new file mode 100644
index 0000000000..fd1c9193d0
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
@@ -0,0 +1,362 @@
+---
+id: 619d337765b9f02c10e93722
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+For the third and fourth waypoints, repeat the `transform` pattern once more.
+
+# --hints--
+
+You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%');
+const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%');
+const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
new file mode 100644
index 0000000000..caa7a1fe0a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
@@ -0,0 +1,357 @@
+---
+id: 619d33c51140292cc5a21742
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function.
+
+# --hints--
+
+You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave');
+```
+
+You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s');
+```
+
+You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite');
+```
+
+You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
new file mode 100644
index 0000000000..e8ab0952d4
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
@@ -0,0 +1,347 @@
+---
+id: 619d3482f505452d861d0f62
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions.
+
+# --hints--
+
+You should use the `.penguin:active` selector.
+
+```js
+assert.match(code, /\.penguin:active\s*\{/);
+```
+
+You should give `.penguin:active` a `transform` of `scale(1.5)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
new file mode 100644
index 0000000000..3530454295
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
@@ -0,0 +1,346 @@
+---
+id: 619d3561a951bf2e41a24f10
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+When you activate the `.penguin` element, it might look as though you can drag it around. This is not true.
+
+Indicate this to users, by giving the active element a `cursor` property of `not-allowed`.
+
+# --hints--
+
+You should give `.penguin:active` a `cursor` property of `not-allowed`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin:active {
+  transform: scale(1.5);
+
+}
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
new file mode 100644
index 0000000000..b2fd620c1f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
@@ -0,0 +1,357 @@
+---
+id: 619d36103839c82efa95dd34
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`.
+
+# --hints--
+
+You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s');
+```
+
+You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out');
+```
+
+You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+
+}
+--fcc-editable-region--
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
new file mode 100644
index 0000000000..18d3c26b52
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
@@ -0,0 +1,670 @@
+---
+id: 619d3711d04d623000013e9e
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element.
+
+Congratulations! You have completed the Flappy Penguin Workshop.
+
+# --hints--
+
+You should give `.ground` a `height` of `calc(100vh - 300px)`.
+
+```js
+assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: calc(100vh - 300px);
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
new file mode 100644
index 0000000000..9d306c557a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Normalize your page, by setting the `width` to `100%`, and `height` to `100vh`.
+
+# --hints--
+
+You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
new file mode 100644
index 0000000000..2de5a239c2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
@@ -0,0 +1,43 @@
+---
+id: 61537bb9b1a29430ac15ad38
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Start this project by linking your `styles.css` file to the page.
+
+# --hints--
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
new file mode 100644
index 0000000000..ae7572fa05
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
@@ -0,0 +1,62 @@
+---
+id: 61537c5f81f0cf325b4a854c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Add a `header` element within the `body` element and assign a class of `header` to it.
+
+Inside the `header`, create an `h1` with `css flexbox photo gallery` as the text.
+
+# --hints--
+
+You should have a `header` element within your `body` element.
+
+```js
+assert.exists(document.querySelector('body')?.querySelector('header'));
+```
+
+Your `header` element should have a `class` with `header` as the value.
+
+```js
+assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
+```
+
+Your `header` element should have an `h1` element inside it.
+
+```js
+assert.exists(document.querySelector('.header')?.querySelector('h1'));
+```
+
+Your `h1` element should have the text `css flexbox photo gallery` inside it.
+
+```js
+assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html>
+  <head lang="en">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
new file mode 100644
index 0000000000..7461f43485
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
@@ -0,0 +1,65 @@
+---
+id: 61537c9eecea6a335db6da79
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Below your `.header` element, create a new `div` element and assign it a `class` of `gallery`. This `div` will act as a container for the gallery images.
+
+Inside that `.gallery` element, create nine `img` elements.
+
+# --hints--
+
+You should create a `div` element in your `body` element.
+
+```js
+assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1);
+```
+
+Your new `div` element should have a `class` with `gallery` set as the value.
+
+```js
+assert(document.querySelector('body')?.querySelector('.gallery'));
+```
+
+Your new `div` element should come after your `.header` element.
+
+```js
+assert(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery'));
+```
+
+Your `.gallery` element should have nine `img` elements.
+
+```js
+assert(document.querySelector('.gallery')?.querySelectorAll('img')?.length === 9);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
new file mode 100644
index 0000000000..6766539792
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
@@ -0,0 +1,111 @@
+---
+id: 61537d86bdc3dd343688fceb
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Next, give each `img` a `src` attribute according to its order in the document. The first `img` should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. The rest should be the same, except replace the `1` with the number the `img` is in the document.
+
+# --hints--
+
+All nine of your `img` elements should have a `src` attribute.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('src')));
+```
+
+Your first `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
+```
+
+Your second `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
+```
+
+Your third `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
+```
+
+Your fourth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
+```
+
+Your fifth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
+```
+
+Your sixth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
+```
+
+Your seventh `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
+```
+
+Your eighth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
+```
+
+Your ninth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+--fcc-editable-region--
+    <div class="gallery">
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
new file mode 100644
index 0000000000..c3de674b58
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
@@ -0,0 +1,83 @@
+---
+id: 615380dff67172357fcf0425
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Now your images are too big.
+
+Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`.
+
+Also set the `height` property to `300px` to keep your images a uniform size.
+
+# --hints--
+
+You should have a `.gallery img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
+```
+
+Your `.gallery img` selector should have a `width` property set to `100%` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
+```
+
+Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth, '350px');
+```
+
+Your `.gallery img` selector should have a `height` property set to `300px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height, '300px');
+```
+
+# --seed--
+
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
new file mode 100644
index 0000000000..e3bb0d435b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
@@ -0,0 +1,112 @@
+---
+id: 6153893900438b4643590367
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
+
+Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values.
+
+Add a `border-bottom` with `4px solid #fdb347` as the value.
+
+# --hints--
+
+You should have a `.header` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
+```
+
+Your `.header` selector should have a `text-align` property set to `center` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center');
+```
+
+Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase');
+```
+
+Your `.header` selector should have a `padding` property set to `32px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.padding, '32px');
+```
+
+Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor, 'rgb(10, 10, 35)');
+```
+
+Your `.header` selector should have a `color` property set to `#fff` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.color, 'rgb(255, 255, 255)');
+```
+
+Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom, '4px solid rgb(253, 179, 71)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+body  {
+  margin: 0;
+  font-family: sans-serif;
+  background-color: #f5f6f7;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
new file mode 100644
index 0000000000..3b04a4b69a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
@@ -0,0 +1,93 @@
+---
+id: 6153897c27f6334716ee5abe
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
+
+To use it, give an element a `display` property of `flex`. This will make the element a <em>flex container</em>. Any direct children of a flex container are called <em>flex items</em>.
+
+Create a `.gallery` selector and make it a flex container.
+
+
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `display` property set to `flex` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
new file mode 100644
index 0000000000..7f754c701b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
@@ -0,0 +1,94 @@
+---
+id: 6153908a366afb4d57185c8d
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Flexbox has a main and cross axis. The main axis is defined by the `flex-direction` property, which has four possible values:
+
+- `row` (default): horizontal axis with flex items from left to right
+- `row-reverse`: horizontal axis with flex items from right to left
+- `column`: vertical axis with flex items from top to bottom
+- `column-reverse`: vertical axis with flex items from bottom to top
+
+**Note**: The axes and directions will be different depending on the text direction. The values shown are for a left-to-right text direction.
+
+Try the different values to see how they affect the layout.
+
+When you are done, set an explicit `flex-direction` of `row` on the `.gallery` element.
+
+# --hints--
+
+Your `.gallery` selector should have a `flex-direction` property set to `row` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
new file mode 100644
index 0000000000..60f0140aab
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
@@ -0,0 +1,88 @@
+---
+id: 615392916d83fa4f02f7e2cf
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+
+The `flex-wrap` property determines how your flex items behave when the flex container is too small. Setting it to `wrap` will allow the items to wrap to the next row or column. `nowrap` (default) will prevent your items from wrapping and shrink them if needed.
+
+
+Make it so your flex items wrap to the next row when they run out of space.
+
+# --hints--
+
+Your `.gallery` selector should have a `flex-wrap` property set to `wrap` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap === 'wrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
new file mode 100644
index 0000000000..6f8a34d276
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
@@ -0,0 +1,87 @@
+---
+id: 6153938dce8b294ff8f5a4e9
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.
+
+Give your `.gallery` selector a `justify-content` property with `center` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have a `justify-content` property set to `center` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
new file mode 100644
index 0000000000..8803a6b2e2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
@@ -0,0 +1,88 @@
+---
+id: 6153947986535e5117e60615
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+The `align-items` property positions the flex content along the cross axis. In this case, with your `flex-direction` set to `row`, your cross axis would be vertical.
+
+To vertically center your images, give your `.gallery` selector an `align-items` property with `center` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have an `align-items` property set to `center` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
new file mode 100644
index 0000000000..1994f1565a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
@@ -0,0 +1,104 @@
+---
+id: 61539e07e7430b528fbffe21
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Give your `.gallery` selector a `padding` property set to `20px 10px` to create some space around the container.
+
+Then, give it a `max-width` of `1400px` and add a `margin` of `0 auto` to center it.
+
+# --hints--
+
+Your `.gallery` selector should have a `padding` property set to `20px 10px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingTop, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingBottom, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingLeft, '10px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingRight, '10px');
+```
+
+Your `.gallery` selector should have a `max-width` property set to `1400px` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth === '1400px');
+```
+
+Your `.gallery` element should be centered using a `margin` with `0 auto` as the value.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.gallery').cssText, 'margin: 0px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
new file mode 100644
index 0000000000..fa88f83ba5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
@@ -0,0 +1,92 @@
+---
+id: 61539f32a206bd53ec116465
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Notice how some of your images have become distorted. This is because the images have different aspect ratios. Rather than setting each aspect ratio individually, you can use the `object-fit` property to determine how images should behave.
+
+Give your `.gallery img` selector the `object-fit` property and set it to `cover`. This will tell the image to fill the `img` container while maintaining aspect ratio, resulting in cropping to fit.
+
+# --hints--
+
+Your `.gallery img` selector should have an `object-fit` property set to `cover` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
new file mode 100644
index 0000000000..23268a5f38
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
@@ -0,0 +1,95 @@
+---
+id: 6153a04847abee57a3a406ac
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Your images need some space between them.
+
+The `gap` CSS shorthand property sets the gaps, also known as gutters, between rows and columns. The `gap` property and its `row-gap` and `column-gap` sub-properties provide this functionality for flex, grid, and multi-column layout. You apply the property to the container element.
+
+Give your `.gallery` flex container a `gap` property with `16px` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have a `gap` property with `16px` set as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
new file mode 100644
index 0000000000..639e9b7cb6
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
@@ -0,0 +1,92 @@
+---
+id: 6153a3485f0b20591d26d2a1
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Smooth out your images a bit by giving the `.gallery img` selector a `border-radius` property with `10px` set as the value.
+
+# --hints--
+
+Your `.gallery img` selector should have a `border-radius` property with `10px` set as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
new file mode 100644
index 0000000000..44bec2cf27
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
@@ -0,0 +1,112 @@
+---
+id: 6153a3952facd25a83fe8083
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `::after` pseudo-element creates an element that is the last child of the selected element. You can use it to add an empty element after the last image. If you give it the same `width` as the images it will push the last image to the left when the gallery is in a two-column layout. Right now, it is in the center because you set `justify-content: center` on the flex container.
+
+Example:
+
+```CSS
+.container::after {
+  content: "";
+  width: 860px;
+}
+```
+
+Create a new selector using an `::after` pseudo-element on the `.gallery` element. Add a `content` property set to an empty string `""` and `350px` set for the `width` property.
+
+# --hints--
+
+Your `.gallery::after` selector should have an empty string `""` set for the `content` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\"");
+```
+
+Your `.gallery::after` selector should have `350px` set for the `width` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
new file mode 100644
index 0000000000..971b0ddd65
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
@@ -0,0 +1,181 @@
+---
+id: 6153a3ebb4f7f05b8401b716
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+
+The `alt` image attribute should describe the image content. Screen readers announce the alternative text in place of images. If the image can't be loaded, this text is presented in place of the image.
+
+To complete the project, add an `alt` attribute to all nine of your cat images to describe them. Use a value at least five characters long for each.
+
+
+# --hints--
+
+All nine of your `img` elements should have a `alt` attribute with text describing each image, with each description using at least `5` letters.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('alt')));
+assert(images.every(image => image.getAttribute('alt').length >= 5));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      --fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="Gallery">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
new file mode 100644
index 0000000000..9765d1e93b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
@@ -0,0 +1,92 @@
+---
+id: 615f171d05def3218035dc85
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Remove the margin from your body element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.
+
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `margin` property set to 0 as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
+```
+
+Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
+```
+
+Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
new file mode 100644
index 0000000000..4b6ce33d27
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
@@ -0,0 +1,75 @@
+---
+id: 6493bc0d99879635209565aa
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `border-box` sizing model does the opposite of `content-box`. The total width of the element, including padding and border, will be the explicit width set. The content of the element will shrink to make room for the padding and border.
+
+Change the `box-sizing` property to `border-box`. Notice how your blue image borders now fit within your red gallery border.
+
+# --hints--
+
+
+Your * selector should have a `box-sizing` property set to `border-box` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+--fcc-editable-region--
+ * {
+  box-sizing: content-box;
+}
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
new file mode 100644
index 0000000000..11895a275c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
@@ -0,0 +1,83 @@
+---
+id: 6494da0daf5df5197963671d
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
+
+The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
+
+Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
+
+# --hints--
+
+You should have a `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
+```
+
+Your `*` selector should have its `box-sizing` property set to `content-box`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+  ```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
new file mode 100644
index 0000000000..40a707dd74
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
@@ -0,0 +1,126 @@
+---
+id: 64dd076a1b33c86d84b4232f
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+In order to better visualize how your elements are sized, adding a border can be helpful.
+
+Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
+
+Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
+```
+
+Your `.gallery` selector should have a `width` property set to `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
+```
+
+Your `.gallery` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
+```
+
+Your `.gallery` selector should have a `border` property set to `5px solid red`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
+```
+
+You should have an `img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+Your `img` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
+```
+
+Your `img` selector should have a `width` property set to `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
+```
+
+Your `img` selector should have a `padding` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
+```
+
+Your `img` selector should have a `padding` property set to `5px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
+```
+
+Your `img` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
+```
+
+Your `img` selector should have a `border` property set to `5px solid blue`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
new file mode 100644
index 0000000000..92603787c3
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
@@ -0,0 +1,79 @@
+---
+id: 64dd136e4e8b0894f9c70d86
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.
+
+Remove your `.gallery` and `img` selectors, and all rules within.
+
+# --hints--
+
+You should not have a `.gallery` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+You should not have an `img` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+ * {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md b/curriculum/challenges/korean/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
index 82a29d7cd9..8bf67da5e2 100644
--- a/curriculum/challenges/korean/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
@@ -7,7 +7,7 @@ dashedName: step-3
 
 # --description--
 
-To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropraite message in the block of each condition.
+To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropriate message in the block of each condition.
 
 Starting with the duplex loan, check if `annualIncome` is greater than or equal to `minIncomeForDuplex` AND if `creditScore` is greater than `minCreditScoreForDuplex`.
 
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
new file mode 100644
index 0000000000..10c2147f74
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
@@ -0,0 +1,58 @@
+---
+id: 615f2abbe7d18d49a1e0e1c8
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You've been provided with a basic HTML boilerplate.
+
+Create an `h1` element within your `body` element and give it the text `Nutrition Facts`.
+
+# --hints--
+
+You should add a new `h1` element.
+
+```js
+assert.exists(document.querySelector('h1'));
+```
+
+Your `h1` element should be within your `body` element.
+
+```js
+assert(document.querySelector('h1')?.parentElement?.localName === 'body');
+```
+
+Your `h1` element should have the text `Nutrition Facts`.
+
+```js
+assert(document.querySelector('h1')?.innerText === 'Nutrition Facts');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
new file mode 100644
index 0000000000..272ccd55ff
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
@@ -0,0 +1,62 @@
+---
+id: 615f2d4150fe0d4cbd0f2628
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Below your `h1` element, add a `p` element with the text `8 servings per container`.
+
+# --hints--
+
+You should add a new `p` element.
+
+```js
+assert.exists(document.querySelector('p'));
+```
+
+Your `p` element should be within your `body` element.
+
+```js
+assert(document.querySelector('p')?.parentElement?.localName === 'body');
+```
+
+Your `p` element should come after your `h1` element.
+
+```js
+assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1');
+```
+
+Your `p` element should have the text `8 servings per container`.
+
+```js
+assert(document.querySelector('p')?.innerText === '8 servings per container');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
new file mode 100644
index 0000000000..2ae877fe38
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
@@ -0,0 +1,63 @@
+---
+id: 615f34948891834dd77655a6
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Add a second `p` element with the text `Serving size 2/3 cup (55g)`.
+
+# --hints--
+
+You should have a second `p` element.
+
+```js
+assert(document.querySelectorAll('p')?.length === 2);
+```
+
+Your second `p` element should be within your `body` element.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.parentElement?.localName === 'body');
+```
+
+Your second `p` element should come after your existing `p` element.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p');
+```
+
+Your second `p` element should have the text `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
new file mode 100644
index 0000000000..986fa60763
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
@@ -0,0 +1,88 @@
+---
+id: 615f34ecc1091b4fd5a8a484
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Within your `head` element, add a `link` element with the `rel` attribute set to `stylesheet` and the `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+This will import the `Open Sans` font family, with the font weight values `400`, `700`, and `800`.
+
+Also add a `link` element to link your `styles.css` file.
+
+# --hints--
+
+Your code should have two `link` elements.
+
+```js
+assert.strictEqual(document.querySelectorAll('link').length, 2);
+```
+
+Your `link` elements should be void elements, they should not have a end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/);
+```
+
+Your two `link` elements should be inside the `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.strictEqual(headElement.querySelectorAll('link').length, 2);
+```
+
+Both of your `link` elements should have the `rel` attribute set to `stylesheet`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert.isTrue(links.every(link => link.getAttribute('rel') === 'stylesheet'));
+```
+
+One of your `link` elements should have an `href` attribute set to `styles.css`.
+
+```js
+const styleElement = document.querySelector('[data-href]');
+assert.isNotNull(styleElement);
+```
+
+One of your `link` elements should have an `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert.exists(links.find(link => link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
new file mode 100644
index 0000000000..d66790fd30
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
@@ -0,0 +1,55 @@
+---
+id: 615f357957e370510f21ea16
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `body` selector and give it a `font-family` set to `Open Sans` with a fallback of `sans-serif`.
+
+Remember that fonts with spaces in the name must be wrapped in quotes for CSS.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `font-family` property set to `"Open Sans", sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === '"Open Sans", sans-serif');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
new file mode 100644
index 0000000000..82f736ff48
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
@@ -0,0 +1,57 @@
+---
+id: 615f378014c2da526a109c81
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The font is a bit small. Create an `html` selector and set the font to have a size of `16px`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have a `font-size` property set to `16px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
new file mode 100644
index 0000000000..6ceffde047
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
@@ -0,0 +1,66 @@
+---
+id: 615f38279e5c3d53692ea441
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Wrap your `h1` and `p` elements in a `div` element. Give that `div` a `class` attribute set to `label`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelector('div'));
+```
+
+Your new `div` element should have the `class` attribute set to `label`.
+
+```js
+assert(document.querySelector('div')?.classList?.contains('label'));
+```
+
+Your `h1` and `p` elements should be within your new `.label` element.
+
+```js
+const children = [...document.querySelectorAll('h1'), ...document.querySelectorAll('p')];
+assert(children?.every(child => child?.parentElement?.classList?.contains('label')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+--fcc-editable-region--
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
new file mode 100644
index 0000000000..1ea4ac044a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
@@ -0,0 +1,65 @@
+---
+id: 615f38cabc64e3556f98cc1a
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Borders can be used to group and prioritize content.
+
+Create a `.label` selector and give it a `border` set to `2px solid black`.
+
+# --hints--
+
+You should have a `.label` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label'));
+```
+
+Your `.label` selector should have a `border` property set to `2px solid black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
new file mode 100644
index 0000000000..e436f20dcd
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
@@ -0,0 +1,61 @@
+---
+id: 615f3949f58e12577dcefb00
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Good use of white space can bring focus to the important elements of your page, and help guide your user's eyes through your text.
+
+Give your `.label` selector a `width` property set to `270px`.
+
+# --hints--
+
+Your `.label` selector should have a `width` property set to `270px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.width === '270px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
new file mode 100644
index 0000000000..ca53749464
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
@@ -0,0 +1,66 @@
+---
+id: 615f39d7da41b15851fa3fb9
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Give your `.label` selector a `margin` property set to `20px auto`, and a `padding` property set to `0 7px`.
+
+# --hints--
+
+Your `.label` selector should have a `margin` property set to `20px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.margin === '20px auto');
+```
+
+Your `.label` selector should have a `padding` property set to `0 7px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+  width: 270px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
new file mode 100644
index 0000000000..694a4e9ff3
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
@@ -0,0 +1,72 @@
+---
+id: 615f3b091162165948e1cb33
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+If you inspect your `.label` element with your browser's developer tools, you may notice that it's actually 288 pixels wide instead of 270. This is because, by default, the browser includes the border and padding when determining an element's size.
+
+To solve this, reset the box model by creating a `*` selector and giving it a `box-sizing` property of `border-box`.
+
+# --hints--
+
+You should create a `*` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
new file mode 100644
index 0000000000..84ea6cab71
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
@@ -0,0 +1,76 @@
+---
+id: 615f3cafd794015aa9547a6d
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Remember that the use of `h1`, `h2`, and similar tags determine the semantic structure of your HTML. However, you can adjust the CSS of these elements to control the visual flow and hierarchy.
+
+Create an `h1` rule and set the `font-weight` property to `800`. This will make your `h1` text bolder.
+
+# --hints--
+
+You should create an `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+Your `h1` selector should have a `font-weight` property set to `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
new file mode 100644
index 0000000000..fe53466124
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
@@ -0,0 +1,70 @@
+---
+id: 615f3d9e59db4b5b8e960762
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Give your `h1` selector a `text-align` property of `center`.
+
+# --hints--
+
+Your `h1` selector should have a `text-align` property set to `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
new file mode 100644
index 0000000000..0c437fb4e8
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
@@ -0,0 +1,71 @@
+---
+id: 615f3e1b7233ee5c7595771f
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Fine-tune the placement of your `h1` by giving it a top and bottom margin of `-4px` and a left and right margin of `0`.
+
+# --hints--
+
+Your `h1` selector should have a `margin` property set to `-4px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.margin === '-4px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
new file mode 100644
index 0000000000..2448838c5f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
@@ -0,0 +1,80 @@
+---
+id: 615f3e4af8008c5d494d3afe
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Create a `p` selector and remove all margins.
+
+# --hints--
+
+You should create a `p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p'));
+```
+
+Your `p` selector should have a `margin` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
new file mode 100644
index 0000000000..53f6d70c15
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
@@ -0,0 +1,96 @@
+---
+id: 615f3ed16592445e57941aec
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Lines can help separate and group important content, especially when space is limited.
+
+Create a `div` element below your `h1` element, and give it a `class` attribute set to `divider`.
+
+# --hints--
+
+You should create a new `div`.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('divider'));
+```
+
+Your `.divider` element should be within your `.label` element.
+
+```js
+assert(document.querySelector('.label')?.querySelector('.divider'));
+```
+
+Your `.divider` element should come after your `h1` element.
+
+```js
+assert(document.querySelector('.divider')?.previousElementSibling?.localName === 'h1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
new file mode 100644
index 0000000000..f8e43c0a29
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
@@ -0,0 +1,91 @@
+---
+id: 615f405b89a7ec5f8e2d11f4
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Create a selector for your new `.divider` and set the `border-bottom` property to `1px solid #888989`. Also give it a top and bottom margin of `2px`. It should not have any left or right margin.
+
+# --hints--
+
+You should create a `.divider` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider'));
+```
+
+Your `.divider` selector should have a `border-bottom` property set to `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+Your `.divider` selector should have a `margin` property set to `2px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.margin === '2px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
new file mode 100644
index 0000000000..aa3594ecc5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
@@ -0,0 +1,84 @@
+---
+id: 615f40b01f680e608d360ed4
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+The `letter-spacing` property can be used to adjust the space between each character of text in an element.
+
+Give your `h1` selector a `letter-spacing` property set to `0.15px` to space them out a bit more.
+
+# --hints--
+
+Your `h1` selector should have a `letter-spacing` property set to `0.15px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
new file mode 100644
index 0000000000..a1f84535ff
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
@@ -0,0 +1,91 @@
+---
+id: 615f4172e9eec061d6456221
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Nutrition labels have a lot of bold text to draw attention to important information. Rather than targeting each element that needs to be bold, it is more efficient to use a class to apply the bold styling to every element.
+
+Give your second `p` element a `class` attribute set to `bold`.
+
+# --hints--
+
+Your second `p` element should have a `class` attribute set to `bold`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.classList?.contains('bold'));
+```
+
+Your first `p` element should not have a `class` attribute set to `bold`.
+
+```js
+assert(!document.querySelector('p')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
new file mode 100644
index 0000000000..bcbaaf757a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
@@ -0,0 +1,104 @@
+---
+id: 615f41c979787462e76dab90
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Your new class does not have any styling yet. Create a `.bold` selector and give it a `font-weight` property set to `800` to make the text bold.
+
+Go ahead and remove the `font-weight` property from your `h1` selector as well.
+
+# --hints--
+
+You should have a `.bold` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold'));
+```
+
+Your `.bold` selector should have a `font-weight` property set to `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold')?.fontWeight === '800');
+```
+
+Your `h1` selector should not have a `font-weight` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === "");
+```
+
+You should not remove your `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
new file mode 100644
index 0000000000..05d8bb7562
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
@@ -0,0 +1,86 @@
+---
+id: 615f423cf65d5864132a0956
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Give your `h1` element a `class` attribute set to `bold`. This will make the text bold again.
+
+# --hints--
+
+Your `h1` element should have a `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('h1')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
new file mode 100644
index 0000000000..64189f1570
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
@@ -0,0 +1,100 @@
+---
+id: 615f42a021625f656101ef93
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Horizontal spacing between equally important elements can increase the readability of your text.
+
+Wrap the text `2/3 cup (55g)` in a `span` element.
+
+# --hints--
+
+You should create a new `span` element.
+
+```js
+assert(document.querySelector('span'));
+```
+
+Your `span` element should have the text `2/3 cup (55g)`.
+
+```js
+assert(document.querySelector('span')?.textContent?.trim() === '2/3 cup (55g)');
+```
+
+Your `p` element should still have the text `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
new file mode 100644
index 0000000000..686336b2dc
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
@@ -0,0 +1,92 @@
+---
+id: 615f4bfb9de4a16703b56eb6
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now we can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`.
+
+# --hints--
+
+Your `p` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.display === 'flex');
+```
+
+Your `p` selector should have a `justify-content` property set to `space-between`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.justifyContent === 'space-between');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+--fcc-editable-region--
+p {
+  margin: 0;
+}
+--fcc-editable-region--
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
new file mode 100644
index 0000000000..4c960b7219
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
@@ -0,0 +1,104 @@
+---
+id: 615f4ce9d877b668417c0c42
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Wrap everything within the `.label` element in a new `header` element.
+
+# --hints--
+
+You should create a new `header` element.
+
+```js
+assert(document.querySelector('header'));
+```
+
+Your `header` element should be within your `.label` element.
+
+```js
+assert(document.querySelector('header')?.parentElement?.classList?.contains('label'));
+```
+
+Your `h1`, `div`, and `p` elements should be within your new `header` element.
+
+```js
+const children = document.querySelector('header')?.children;
+assert(children?.[0]?.localName === 'h1');
+assert(children?.[1]?.localName === 'div');
+assert(children?.[2]?.localName === 'p');
+assert(children?.[3]?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
new file mode 100644
index 0000000000..ea61500923
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
@@ -0,0 +1,105 @@
+---
+id: 615f4dde9d72e3694cb9ee3b
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Now update your `h1` selector to be `header h1` to specifically target your `h1` element within your new `header`.
+
+# --hints--
+
+You should have a `header h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('header h1'));
+```
+
+You should not have an `h1` selector.
+
+```js
+assert.isNull(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+You should not change any properties in the selector.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('header h1');
+assert(style?.textAlign === 'center');
+assert(style?.margin === '-4px 0px');
+assert(style?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
new file mode 100644
index 0000000000..6830eadac2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
@@ -0,0 +1,105 @@
+---
+id: 615f4ec58334106a4170c2a8
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Create a new `div` element below your `header` element, and give it a `class` attribute set to `divider large`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 3);
+```
+
+Your new `div` element should come after your `header` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` element should have the `class` attribute set to `divider large`.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider'));
+assert(div?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
new file mode 100644
index 0000000000..4fd89a7f1f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
@@ -0,0 +1,111 @@
+---
+id: 615f4f9e4a40566b776a8f38
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Create a new `.large` selector and give it a `height` property set to `10px`. Also create an `.large, .medium` selector and set the `background-color` property to `black`.
+
+# --hints--
+
+You should have a new `.large` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large'));
+```
+
+Your `.large` selector should have a `height` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large')?.height === '10px');
+```
+
+You should have a new `.large, .medium` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium'));
+```
+
+Your `.large, .medium` selector should have a `background-color` property set to `black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.backgroundColor === 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
new file mode 100644
index 0000000000..971d93624c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
@@ -0,0 +1,101 @@
+---
+id: 615f50473cc0196c6dd3892a
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+You may notice there is still a small border at the bottom of your `.large` element. To reset this, give your `.large, .medium` selector a `border` property set to `0`.
+
+Note: the `medium`(medium) class will be utilized later for the thinner bars of the nutrition label.
+
+# --hints--
+
+Your `.large, .medium` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.borderWidth === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+--fcc-editable-region--
+.large, .medium {
+  background-color: black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
new file mode 100644
index 0000000000..47197f64cc
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
@@ -0,0 +1,113 @@
+---
+id: 615f51257a8a516d80b6c743
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Create a new `div` below your `.large` element and give it a `class` attribute set to `calories-info`.
+
+# --hints--
+
+You should create another `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 4);
+```
+
+Your new `div` should have a `class` attribute set to `calories-info`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info'));
+```
+
+Your new `div` should come after the `.large` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
new file mode 100644
index 0000000000..136c3e5dfc
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
@@ -0,0 +1,128 @@
+---
+id: 615f51e4e5b24a6e80eccce1
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Within your `.calories-info` element, create a `div` element. Give that `div` element a `class` attribute set to `left-container`. Within the newly created `div` element, create a `h2` element with the text `Amount per serving`. Give the `h2` element a `class` attribute set to `bold small-text`.
+
+# --hints--
+
+You should create a new `div` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'div');
+```
+
+Your new `div` element should have a `class` attribute set to `left-container`.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('left-container'));
+```
+
+You should create a new `h2` element within your `.left-container` element.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.localName === 'h2');
+```
+
+Your new `h2` element should have a `class` attribute set to `bold small-text`.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('bold'));
+assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('small-text'));
+```
+
+Your new `h2` element should have the text `Amount per serving`.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.innerText === 'Amount per serving');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+    <div class="calories-info">
+
+    </div>
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
new file mode 100644
index 0000000000..c71a25214c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
@@ -0,0 +1,115 @@
+---
+id: 615f522dea4f776f64dc3e91
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `rem` unit stands for `root em`, and is relative to the font size of the `html` element.
+
+Create a `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`).
+
+# --hints--
+
+You should have an `.small-text` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.small-text'));
+```
+
+Your `.small-text` selector should have a `font-size` property set to `0.85rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.small-text')?.fontSize === '0.85rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
new file mode 100644
index 0000000000..deabca353f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
@@ -0,0 +1,143 @@
+---
+id: 615f5486b8fd4b71633f69b0
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Below your `.small-text` element, create a new `p` element with the text `Calories`. Also below the `.left-container` element, create a new `span` element with the text `230`.
+
+# --hints--
+
+You should have a new `p` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.querySelector('p'))
+```
+
+You should have a new `span` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.querySelector('span'))
+```
+
+Your `p` element should come after your `.small-text` element.
+
+```js
+assert(document.querySelector('.small-text')?.nextElementSibling?.localName === 'p');
+```
+
+Your `span` element should come after your `.left-container` element.
+
+```js
+assert(document.querySelector('.left-container')?.nextElementSibling?.localName ==='span');
+```
+
+Your `p` element should have the text `Calories`.
+
+```js
+assert(document.querySelector('.small-text')?.nextElementSibling?.innerText === 'Calories');
+```
+
+Your `span` element should have the text `230`.
+
+```js
+assert(document.querySelector('.left-container')?.nextElementSibling?.innerText === '230');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
new file mode 100644
index 0000000000..14f20ffb78
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
@@ -0,0 +1,144 @@
+---
+id: 615f575b50b91e72af079480
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Create a new `.left-container p` selector setting the top and bottom margin to `-5px`, and the left and right margin to `-2px`. Also set the `font-size` to `2em` and `font-weight` to `700`.
+
+# --hints--
+
+You should have a new `.left-container p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p'));
+```
+
+Your new `.left-container p` selector should have a `margin` property set to `-5px -2px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginTop, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginBottom, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginLeft, '-2px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginRight, '-2px');
+```
+
+Your new `.left-container p` selector should have a `font-size` property set to `2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontSize === '2em');
+```
+
+Your new `.left-container p` selector should have a `font-weight` property set to `700`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontWeight === '700');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
new file mode 100644
index 0000000000..b833b5f471
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
@@ -0,0 +1,141 @@
+---
+id: 615f5af373a68e744a3c5a76
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Create a `.calories-info span` selector, set its `font-size` to `2.4em` and `font-weight` to `700`.
+
+# --hints--
+
+You should create a `.calories-info span` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span'));
+```
+
+Your `.calories-info span` selector should have a `font-size` property set to `2.4em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '2.4em');
+```
+
+Your `.calories-info span` selector should have a `font-weight` property set to `700`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontWeight === '700');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
new file mode 100644
index 0000000000..84d0ba9d98
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
@@ -0,0 +1,134 @@
+---
+id: 615f5fd85d0062761f288364
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Typography is often more art than science. You may have to tweak things like alignment until it looks correct.
+
+Give your `.calories-info span` selector a `margin` set to `-7px -2px`. This will shift your `230` text into place.
+
+# --hints--
+
+Your `.calories-info span` selector should have a `margin` set to `-7px -2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.margin === '-7px -2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+.calories-info span {
+  font-size: 2.4em;
+  font-weight: 700;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
new file mode 100644
index 0000000000..31f049fa2d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
@@ -0,0 +1,141 @@
+---
+id: 615f61338c8ca176d6445574
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider medium`.
+
+# --hints--
+
+You should create a new `div` within your `.label` element.
+
+```js
+assert(document.querySelectorAll('.label > div')?.length === 3)
+```
+
+Your new `div` should have the `class` attribute set to `divider medium`. This div should be the last element in your `.label` element.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider') && div?.classList?.contains('medium'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
new file mode 100644
index 0000000000..f074a2cf76
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
@@ -0,0 +1,142 @@
+---
+id: 615f666ac5edea782feb7e75
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Create an `.medium` selector and give it a `height` property of `5px`.
+
+# --hints--
+
+You should create an `.medium` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.medium'));
+```
+
+Your `.medium` selector should have a `height` property set to `5px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.medium')?.height === '5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
new file mode 100644
index 0000000000..0c0aa78424
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
@@ -0,0 +1,167 @@
+---
+id: 615f671b6d1919792745aa5d
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Create a new `div` element below your `.medium` element. Give it a `class` attribute set to `daily-value small-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `bold right`.
+
+# --hints--
+
+You should create a new `div` element after your `.medium` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('medium'));
+```
+
+Your new `div` should have a `class` attribute set to `daily-value small-text`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value'));
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('small-text'));
+```
+
+Your new `div` element should have a `p` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `% Daily Value *`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *');
+```
+
+Your new `p` element should have a `class` attribute set to `bold right`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    --fcc-editable-region--
+    <div class="divider medium"></div>
+
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
new file mode 100644
index 0000000000..3873e85fbf
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
@@ -0,0 +1,157 @@
+---
+id: 615f6823d0815b7a991f2a75
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Use your existing `.divider` element as an example to add a new divider after the `p` element.
+
+# --hints--
+
+You should create a new `div` within your `.daily-value` element.
+
+```js
+assert(document.querySelectorAll('.daily-value.small-text > div')?.length === 1)
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text > div')?.classList?.contains('divider'))
+```
+
+Your new `div` should come after your `p` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text > div')?.previousElementSibling?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
new file mode 100644
index 0000000000..74ebd1c18c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
@@ -0,0 +1,182 @@
+---
+id: 615f6b2d164f81809efd9bdc
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Then, wrap the text `Total Fat` in one `span` element, the text `10%` in another, and give them each a class of `bold`.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Total Fat 8g 10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g[\s|\n]+10%/));
+```
+
+Your `p` element should have two `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
+```
+
+One `span` element should wrap the text `Total Fat`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat');
+```
+
+The `span` element around `Total Fat` should have the `class` set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.className === 'bold');
+```
+
+A `span` element should wrap the text `10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span + span')?.innerText === '10%');
+```
+
+The `span` element around `10%` should have the `class` set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
new file mode 100644
index 0000000000..de2aab3150
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
@@ -0,0 +1,172 @@
+---
+id: 615f6cc778f7698258467596
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Below your element with the `Total Fat` text, create a new `p` element with the text `Saturated Fat 1g 5%`. Wrap the `5%` in a `span` with the `class` attribute set to `bold`. In this case this is enough to align the percentage to `5%`.
+
+# --hints--
+
+You should create a new `p` element below your element with the `Total Fat` text.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/));
+```
+
+Your new `p` element should have the text `Saturated Fat 1g 5%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.localName === 'span');
+```
+
+Your `span` element should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+Your `span` element should wrap the `5%` text.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === "5%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
new file mode 100644
index 0000000000..5f2aad0b62
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
@@ -0,0 +1,148 @@
+---
+id: 615f6fddaac1e083502d3e6a
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+This new `p` element will need to be indented. Give it a `class` set to `indent`.
+
+# --hints--
+
+Your `p` element with the text `Saturated Fat 1g 5%` should have a `class` attribute set to `indent`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p>Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
new file mode 100644
index 0000000000..2e1a5c3f79
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
@@ -0,0 +1,163 @@
+---
+id: 615f70077a4ff98424236c1e
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create a new `.indent` selector and give it a `margin-left` property set to `1em`.
+
+# --hints--
+
+You should have a new `.indent` selector.
+
+```js
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.indent'));
+```
+
+Your `.indent` selector should have a `margin-left` property set to `1em`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft, '1em');
+```
+
+Your `.indent` selector should only set the `margin-left` property, not other margin properties.
+
+```js
+const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.indent') ?? {};
+assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
new file mode 100644
index 0000000000..1d696789f3
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
@@ -0,0 +1,160 @@
+---
+id: 615f72a872354a850d4f533e
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Create a `.daily-value p` selector to target all of your `p` elements in the `daily-value` section. Give this new selector a `border-bottom` set to `1px solid #888989`.
+
+# --hints--
+
+You should have a new `.daily-value p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+Your `.daily-value p` selector should have a `border-bottom` property set to `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
new file mode 100644
index 0000000000..96cbc9639f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
@@ -0,0 +1,166 @@
+---
+id: 615f74a71f1e498619e38ee8
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+The bottom borders under your `% Daily Value *` and `Saturated Fat 1g 5%` elements do not extend the full width of the label. Add `no-divider` to the `class` for these two elements.
+
+# --hints--
+
+Your `p` element with the text `% Daily Value *` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.firstElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('bold'));
+```
+
+Your `p` element with the text `Saturated Fat 1g 5%` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
new file mode 100644
index 0000000000..d3d0a81e57
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
@@ -0,0 +1,181 @@
+---
+id: 615f7ad94380408d971d14f6
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+The `:not` pseudo-selector can be used to select all elements that do not match the given CSS rule.
+
+```css
+div:not(#example) {
+  color: red;
+}
+```
+
+The above selects all `div` elements without an `id` of `example`.
+
+Modify your `.daily-value p` selector to exclude the `.no-divider` elements.
+
+# --hints--
+
+You should have a `.daily-value p:not(.no-divider)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)'));
+```
+
+You should not have a `.daily-value p` selector.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+You should not change the properties in the `.daily-value p:not(.no-divider)` selector.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)');
+assert(style?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
new file mode 100644
index 0000000000..aac27eb5b6
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
@@ -0,0 +1,165 @@
+---
+id: 615f7bc680f7168ea01ebf99
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Now you will have to add separate dividers below your `.no-divider` elements.
+
+Your first `.no-divider` element has a `.divider` after it. Create another `.divider` after your second `.no-divider` element.
+
+# --hints--
+
+You should create a new `div` at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
new file mode 100644
index 0000000000..6504be1b04
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
@@ -0,0 +1,196 @@
+---
+id: 615f7c71eab8218f846e4503
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+After your last `.divider`, create another `p` element with the text `Trans Fat 0g`. Italicize the word `Trans` by wrapping it in an `i` element. Give the new `p` element the `class` attribute set to `indent no-divider`. Wrap `Trans Fat 0g` in a `span` element for alignment.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Trans Fat 0g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText === 'Trans Fat 0g');
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(p?.classList?.contains('indent'));
+assert(p?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have an `i` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i'));
+```
+
+Your `i` element should wrap the text `Trans`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i')?.innerText === 'Trans');
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span'));
+```
+
+Your `span` element should wrap the text `Trans Fat 0g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText?.match(/Trans[\s|\n]+Fat 0g/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
new file mode 100644
index 0000000000..b038b1dfc2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
@@ -0,0 +1,165 @@
+---
+id: 615f7d489a581590d1350288
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Create another `.divider` after your last `p` element.
+
+# --hints--
+
+You should create a new `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` element should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
new file mode 100644
index 0000000000..ce39f09eae
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
@@ -0,0 +1,215 @@
+---
+id: 615f7de4487b64919bb4aa5e
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Then, wrap the text `Cholesterol` in a `span` element, `0%` in another, and give each of them a class of `bold`.
+
+Finally, nest the `span` element containing the text `Cholesterol` along with the text `0mg`, in an additional `span` element for alignment.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Cholesterol 0mg 0%`.
+
+```js
+const text = document.querySelector('.daily-value.small-text')?.lastElementChild?.textContent?.trim()?.replace(/\n/g, ' ')?.replace(/\s\s+/g, ' ');
+assert(text === 'Cholesterol 0mg 0%');
+```
+
+Your new `p` element should have exactly three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+The text `Cholesterol` should be nested in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
+assert(cholesterolSpan.length === 1);
+```
+
+Your `Cholesterol` `span` should have the `class` attribute set to `bold`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
+assert(cholesterolSpan[0]?.classList?.contains('bold'));
+```
+
+The text `0%` should be nested in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
+assert(zeroPercentSpan.length === 1);
+```
+
+Your `0%` `span` should have the `class` attribute set to `bold`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
+assert(zeroPercentSpan[0]?.classList?.contains('bold'));
+```
+
+Your `Cholesterol` `span` and your `0mg` text should be wrapped in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolZeroSpan = spans.filter(span => span?.innerText === 'Cholesterol 0mg');
+assert(cholesterolZeroSpan.length === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
new file mode 100644
index 0000000000..f165c8568f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
@@ -0,0 +1,205 @@
+---
+id: 615f7e7281626a92bbd62da8
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Put `Sodium` and `7%` each in their own `span` with a class of a `bold` like you did with the others.
+
+Then, add an additional `span` element around `Sodium 160mg` for alignment again.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Sodium 160mg 7%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Sodium[\s|\n]160mg[\s|\n]+7%/));
+```
+
+Your new `p` element should have three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+A `span` element should wrap the text `Sodium 160mg`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/));
+```
+
+A `span` element should wrap the text `Sodium`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === "Sodium");
+```
+
+The `span` around `Sodium` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+A `span` element should wrap the text `7%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '7%');
+```
+
+The `span` element around `7%` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
new file mode 100644
index 0000000000..58d410f432
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
@@ -0,0 +1,210 @@
+---
+id: 615f7ecb09de9a938ef94756
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below your last `p` element, add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Then, wrap the nutrient and amount in a `span` for alignment again.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Total Carbohydrate 37g 13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g[\s|\n]+13%/));
+```
+
+Your new `p` element should have three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+One `span` element should wrap the text `Total Carbohydrate 37g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g/));
+```
+
+One `span` element should wrap the text `Total Carbohydrate`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Total Carbohydrate');
+```
+
+The `span` element around `Total Carbohydrate` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+A `span` element should wrap the text `13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
+```
+
+The `span` element around `13%` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+Your second `span` element should wrap the text `13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
new file mode 100644
index 0000000000..15003310e7
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
@@ -0,0 +1,183 @@
+---
+id: 615f7fa959ab75948f96a0d6
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Below your last `p` element, add another `p` element with the text `Dietary Fiber 4g`. Give the `p` element the `class` necessary to indent it and remove the dividing border. Then create a divider below that `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Dietary Fiber 4g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/));
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
new file mode 100644
index 0000000000..b47f77498e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
@@ -0,0 +1,185 @@
+---
+id: 615f808d85793195b0f53be9
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Create another `p` element after your last `.divider`, and give it the text `Total Sugars 12g`. Assign that `p` element the `class` values necessary to indent it and remove the bottom border. Then create another `.divider` below your new `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Total Sugars 12g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/));
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
new file mode 100644
index 0000000000..d7b411b930
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
@@ -0,0 +1,169 @@
+---
+id: 615f829d07b18f96f6f6684b
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+The advantage to creating these dividers is that you can apply specific classes to style them individually. Add `double-indent` to the `class` for your last `.divider`.
+
+# --hints--
+
+Your last `.divider` element should have `double-indent` added to the `class`. Do not remove the existing value.
+
+```js
+const last = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(last?.classList?.contains('double-indent'));
+assert(last?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      --fcc-editable-region-- 
+      <div class="divider"></div>
+      --fcc-editable-region-- 
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
new file mode 100644
index 0000000000..1c85a5b53a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
@@ -0,0 +1,182 @@
+---
+id: 615f83ef928ec9982b785b6a
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Create a `.double-indent` selector and give it a left margin of `2em`.
+
+# --hints--
+
+You should have a new `.double-indent` selector.
+
+```js
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.double-indent'));
+```
+
+Your `.double-indent` selector should have a `margin-left` property set to `2em`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.double-indent')?.marginLeft, '2em');
+```
+
+Your `.double-indent` selector should only set the `margin-left` property, not other margin properties.
+
+```js
+const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.double-indent') ?? {};
+assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region-- 
+
+--fcc-editable-region-- 
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
new file mode 100644
index 0000000000..a39f4b879c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
@@ -0,0 +1,211 @@
+---
+id: 615f84f246e8ba98e3cd97be
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Below your `.double-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. Your new `p` element should also be double indented, and have no bottom border. Use a `span` to make the `20%` bold and right aligned.
+
+Then create another divider after that `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Includes 10g Added Sugars 20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/));
+```
+
+Your new `p` element should have the `class` attribute set to `double-indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('double-indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.localName === 'span');
+```
+
+Your `span` element should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.classList?.contains('bold'));
+```
+
+Your `span` element should wrap the text `20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type span')?.innerText === '20%');
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
new file mode 100644
index 0000000000..d4af4e85bd
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
@@ -0,0 +1,208 @@
+---
+id: 615f887466db4ba14b5342cc
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+After your last divider, create another `p` element with the text `Protein 3g`. Use the necessary classes to remove the bottom border, and a `span` to make the `Protein` bold. Then wrap the text `Protein 3g` including the new `span` element, in a new `span` element.
+
+Following this element, create a large divider.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Protein 3g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/));
+```
+
+Your new `p` element should have the `class` attribute set to `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+You should have a `span` element with the class `bold` around the text `Protein`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type span.bold')?.innerText === 'Protein');
+```
+
+You should have a `span` element around the text `Protein 3g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text > p:last-of-type > span > span.bold')?.innerText === 'Protein');
+assert(document.querySelector('.daily-value.small-text > p:last-of-type > span')?.innerText === 'Protein 3g');
+```
+
+Your new `div` should have the `class` attribute set to `divider large`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
new file mode 100644
index 0000000000..0477e6cf30
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
@@ -0,0 +1,195 @@
+---
+id: 615f89e055040ba294719d2f
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`.
+
+The `p` element contains only text, you can wrap the percentage in a `span` element so that it is considered a separate entity from the rest of the text, and it's moved to the right.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Vitamin D 2mcg 10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+Your `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
new file mode 100644
index 0000000000..1f4bf4fb22
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
@@ -0,0 +1,219 @@
+---
+id: 615f8bfe0f30a1a3c340356b
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Create another `p` element, give it the text `Calcium 260mg 20%`. Align `20%` to the right. Below that, create a `p` element with the text `Iron 8mg 45%`, aligning the `45%` to the right.
+
+# --hints--
+
+You should create two new `p` elements at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+```
+
+Your first new `p` element should have the text `Calcium 260mg 20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/));
+```
+
+Your first new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span');
+```
+
+Your first `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold'));
+```
+
+Your first `span` element should wrap the text `20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%');
+```
+
+Your second new `p` element should have the text `Iron 8mg 45%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/));
+```
+
+Your second new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.localName === 'span');
+```
+
+Your second `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
new file mode 100644
index 0000000000..9734aee18e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
@@ -0,0 +1,202 @@
+---
+id: 615f8f1223601fa546e93f31
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Create the final `p` element for your `.daily-value` section. Give it the text `Potassium 235mg 6%`. Align the `6%` text to the right, and remove the bottom border of the `p` element.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the `class` attribute set to `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have the text `Potassium 235mg 6%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+Your `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+    </div>
+    --fcc-editable-region--      
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
new file mode 100644
index 0000000000..c098518ca5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
@@ -0,0 +1,211 @@
+---
+id: 615f905fbd1017a65ca224eb
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Add a medium divider after your `.daily-value` element. Below that new divider, create a `p` element with the `class` attribute set to `note`.
+
+Give the `p` element the following text:
+
+```markup
+* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
+```
+
+# --hints--
+
+You should create a new `div` after your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div');
+```
+
+Your new `div` should have the `class` set to `divider medium`.
+
+```js
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('medium'));
+```
+
+You should create a `p` element after your new `div` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the `class` set to `note`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note'));
+```
+
+Your new `p` element should have the provided text.
+
+```js
+assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    --fcc-editable-region--      
+
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
new file mode 100644
index 0000000000..0dd1ac2ee2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
@@ -0,0 +1,196 @@
+---
+id: 615f94786869e1a7fec54375
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Create a `.note` selector, and set the size of the font to `0.6rem`. Also set the top and bottom margins to `5px`, removing the left and right margins.
+
+# --hints--
+
+You should have a new `.note` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note'));
+```
+
+Your `.note` selector should have a `font-size` property set to `0.6rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem');
+```
+
+Your `.note` selector should have a `margin` property set to `5px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
new file mode 100644
index 0000000000..845b9f2d7f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
@@ -0,0 +1,365 @@
+---
+id: 615f951dff9317a900ef683f
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Give the `.note` selector a left and right padding of `8px`, removing the top and bottom padding. Also set the `text-indent` property to `-8px`.
+
+With these last changes, your nutrition label is complete!
+
+# --hints--
+
+Your `.note` selector should have a `padding` property set to `0 8px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px');
+```
+
+Your `.note` selector should have a `text-indent` property set to `-8px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+  padding: 0 8px;
+  text-indent: -8px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
new file mode 100644
index 0000000000..93d1888599
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
@@ -0,0 +1,153 @@
+---
+id: 635bde33c91c80540eae239b
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+The text `% Daily Value *` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it.
+
+# --hints--
+
+You should have a `.right` selector.
+
+```js
+const hasRight = new __helpers.CSSHelp(document).getStyle('.right');
+assert(hasRight);
+
+```
+
+The `.right` selector should have the `justify-content` property set to `flex-end`.
+
+```js
+const rightJustifyContent = new __helpers.CSSHelp(document).getStyle('.right')?.getPropertyValue('justify-content');
+assert(rightJustifyContent === 'flex-end');
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
new file mode 100644
index 0000000000..e6f009b7e0
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
@@ -0,0 +1,117 @@
+---
+id: 6395d33ab5d91bf317107c48
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Create a `.calories-info h2` selector and remove all margins.
+
+# --hints--
+
+Create a `.calories-info h2` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2'));
+```
+
+Your `.calories-info h2` selector should have a `margin` set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
new file mode 100644
index 0000000000..6a2dbb37aa
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
@@ -0,0 +1,135 @@
+---
+id: 6396e33fe478dd264ebbf278
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Create a new `.calories-info` selector and give it a `display` property set to `flex`. Also give it a `justify-content` property set to `space-between` and `align-items` property set to `flex-end`.
+
+# --hints--
+
+You should create a `.calories-info` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info'));
+```
+
+Your `.calories-info` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.display === 'flex');
+```
+
+Your `.calories-info` selector should have a `justify-content` property set to `space-between`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.justifyContent === 'space-between');
+```
+
+Your `.calories-info` selector should have a `align-items` property set to `flex-end`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.alignItems === 'flex-end');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.calories-info h2 {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
new file mode 100644
index 0000000000..170468d17b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
@@ -0,0 +1,147 @@
+---
+id: 667d1bb875f5961913176069
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Notice how the text `8g` appears centered in the preview. Nest the `span` element containing the text `Total Fat` along with the text `8g`, in an additional `span` element for alignment.
+
+# --hints--
+
+You should have a `span` element around the code `<span class="bold">Total Fat</span> 8g`.
+
+```js
+assert.match(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerHTML, /^<span class=("|')bold\1>Total Fat<\/span> 8g\s?$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+--fcc-editable-region--
+      <p><span class="bold">Total Fat</span> 8g <span class="bold">10%</span></p>
+--fcc-editable-region--
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
new file mode 100644
index 0000000000..3a5d413485
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
@@ -0,0 +1,58 @@
+---
+id: 612e78af05201622d4bab8aa
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Create a `div` element within your `body` element with the `id` set to `piano`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+const div = document.querySelector('div');
+assert.exists(div);
+```
+
+Your `div` should be within your `body` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.parentElement?.localName === 'body');
+```
+
+Your `div` should have the `id` set to `piano`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.getAttribute('id') === 'piano');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
new file mode 100644
index 0000000000..e5c80cf6b4
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
@@ -0,0 +1,60 @@
+---
+id: 612e7d1c29fb872d6384379c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Nest a second `div` within your existing `div`, and set the `class` to be `keys`.
+
+# --hints--
+
+You should create a second `div` element.
+
+```js
+const divDiv = document.querySelectorAll('div');
+assert(divDiv?.length === 2);
+```
+
+Your new `div` element should be within your existing `div` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.length === 1);
+assert(div?.children?.[0]?.localName === 'div');
+```
+
+Your new `div` element should have the `class` set to `keys`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.[0]?.className === 'keys');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="piano">
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
new file mode 100644
index 0000000000..bfbbe7748d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
@@ -0,0 +1,60 @@
+---
+id: 612e804c54d5e7308d7ebe56
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `.keys` element, add seven `div` elements, each with the class `key`.
+
+# --hints--
+
+You should create seven new `div` elements.
+
+```js
+const divDivDiv = document.querySelectorAll('div');
+assert(divDivDiv?.length === 9);
+```
+
+Your seven new `div` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].length === 7);
+assert([...keys?.children].every(child => child?.tagName === 'DIV'));
+```
+
+Your seven new `div` elements should all have the `class` set to `key`.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].every(child => child?.classList?.contains('key')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys"></div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
new file mode 100644
index 0000000000..93e60db476
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
@@ -0,0 +1,95 @@
+---
+id: 612e813b3ba67633222cbe54
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Remember, a `class` attribute can hold multiple values. To differentiate between your white and black keys, add a second `class` value of `black--key` to your second, third, fifth, sixth, and seventh `.key` elements.
+
+# --hints--
+
+Your second `.key` element should also have a `class` of `black--key`.
+
+```js
+const key = document.querySelectorAll('.key')?.[1];
+assert(key?.className?.includes('black--key'));
+```
+
+Your third `.key` should have `black--key` in the `class`.
+
+```js
+const third = document.querySelectorAll('.key')?.[2];
+assert(third?.classList?.contains('black--key'));
+```
+
+Your fifth `.key` should have `black--key` in the `class`.
+
+```js
+const fifth = document.querySelectorAll('.key')?.[4];
+assert(fifth?.classList?.contains('black--key'));
+```
+
+Your sixth `.key` should have `black--key` in the `class`.
+
+```js
+const sixth = document.querySelectorAll('.key')?.[5];
+assert(sixth?.classList?.contains('black--key'));
+```
+
+Your seventh `.key` should have `black--key` in the `class`.
+
+```js
+const seventh = document.querySelectorAll('.key')?.[6];
+assert(seventh?.classList?.contains('black--key'));
+```
+
+You should have five `.black--key` elements.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 5);
+```
+
+You should have seven `.key` elements.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 7);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
new file mode 100644
index 0000000000..d42477e30c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
@@ -0,0 +1,74 @@
+---
+id: 612e8279827a28352ce83a72
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Now, copy the set of seven `.key` elements and paste two additional sets into the `.keys` div.
+
+# --hints--
+
+You should have 21 `.key` elements.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 21);
+```
+
+You should have 15 `.black--key` elements.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 15);
+```
+
+All `.key` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.key')?.length === 21);
+```
+
+All `.black--key` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.black--key')?.length === 15);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
new file mode 100644
index 0000000000..1f4190864e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
@@ -0,0 +1,107 @@
+---
+id: 612e83ec2eca1e370f830511
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Add a `link` element inside your `head` element. Set its `rel` attribute to `stylesheet` and its `href` attribute to `styles.css`.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.isNotNull(document.querySelector('link'));
+```
+
+You should not change your existing `head` tags. Make sure you did not delete the closing tag.
+
+```js
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
+```
+
+You should have one `link` element.
+
+```js
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
+```
+
+Your `link` element should be inside your `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    --fcc-editable-region--
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    --fcc-editable-region--
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e89562043183c86df287c.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
new file mode 100644
index 0000000000..a5dad2247f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
@@ -0,0 +1,77 @@
+---
+id: 612e89562043183c86df287c
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Browsers often apply default margin and padding values to specific elements. To make sure your piano layout displays correctly, you need to reset the box model.
+
+Add an `html` rule selector to your CSS file, and set the `box-sizing` property to `border-box`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have the `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
new file mode 100644
index 0000000000..cd1ca1882c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
@@ -0,0 +1,83 @@
+---
+id: 612e89d254fe5d3df7d6693d
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you've reset the `html` box model, you need to apply this to the elements inside it as well. To do this, set the `box-sizing` property to `inherit`, which ensures that the targeted elements adopt the same value as their parent element.
+
+You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the `::before` and `::after` pseudo-elements.
+
+The `::before` selector creates a pseudo-element which is the first child of the selected element, while the `::after` selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project.
+
+For now, create a CSS selector to target all elements using `*`, and include the pseudo-elements `::before` and `::after`. Set the `box-sizing` property to `inherit`.
+
+# --hints--
+
+You should have a `*, ::before, ::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
+```
+
+Your `*, ::before, ::after` selector should have the `box-sizing` property set to `inherit`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+html {
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
new file mode 100644
index 0000000000..46f69e2b59
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
@@ -0,0 +1,95 @@
+---
+id: 612e8eebe3a6dc3fcc33a66f
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Now target your `#piano` element with an `id` selector. Set its `background-color` property to `#00471b`, the `width` property to `992px` and the `height` property to `290px`.
+
+# --hints--
+
+You should have a `#piano` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano'));
+```
+
+Your `#piano` selector should have the `background-color` property set to `#00471b`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)');
+```
+
+Your `#piano` selector should have a `width` property set to `992px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px');
+```
+
+Your `#piano` selector should have the `height` set to `290px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
new file mode 100644
index 0000000000..85c97c2924
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
@@ -0,0 +1,81 @@
+---
+id: 612e95ef2e4bdf41f69067f9
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Set the `margin` of the `#piano` to `80px auto`.
+
+# --hints--
+
+Your `#piano` selector should have the `margin` property set to `80px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
new file mode 100644
index 0000000000..26f7c9217a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
@@ -0,0 +1,102 @@
+---
+id: 612e96fc87fe8e44f69f7ec5
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Time to style the keys. Below the `#piano` rule, target the `.keys` element with a `class` selector. Give the new rule a `background-color` property of `#040404`, a `width` property of `949px` and a `height` property of `180px`.
+
+# --hints--
+
+You should have a `.keys` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys'));
+```
+
+Your `.keys` selector should have a `background-color` property set to `#040404`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
+```
+
+Your `.keys` selector should have the `width` property set to `949px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
+```
+
+Your `.keys` selector should have a `height` property set to `180px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
new file mode 100644
index 0000000000..d877f447ad
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
@@ -0,0 +1,88 @@
+---
+id: 612e98f3245c98475e49cfc6
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Give the `.keys` a `padding-left` of `2px`.
+
+# --hints--
+
+Your `.keys` selector should have a `padding-left` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
new file mode 100644
index 0000000000..01ea9f27a9
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
@@ -0,0 +1,89 @@
+---
+id: 612e9a21381a1949327512e6
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Move the keys into position by adjusting the `#piano` selector. Set the `padding` property to `90px 20px 0 20px`.
+
+# --hints--
+
+Your `#piano` selector should have the `padding` property set to `90px 20px 0 20px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
new file mode 100644
index 0000000000..0f8ca9d6ba
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
@@ -0,0 +1,117 @@
+---
+id: 612e9d142affc44a453655db
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Time to style the keys themselves. Create a `class` selector for the `.key` elements. Set the `background-color` set to the value `#ffffff`, the `position` property to `relative`, the `width` property to `41px`, and the `height` property to `175px`.
+
+# --hints--
+
+You should have a `.key` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key'));
+```
+
+Your `.key` selector should have a `background-color` property set to `#ffffff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)');
+```
+
+Your `.key` selector should have the `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative');
+```
+
+Your `.key` selector should have a `width` property set to `41px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px');
+```
+
+Your `.key` selector should have a `height` property set to `175px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
new file mode 100644
index 0000000000..28c5419dac
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
@@ -0,0 +1,103 @@
+---
+id: 612e9f1e7e5ccd4fa9ada0be
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Give the `.key` a `margin` of `2px` and a `float` property set to `left`.
+
+# --hints--
+
+Your `.key` selector should have a `margin` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
+```
+
+Your `.key` selector should have a `float` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
new file mode 100644
index 0000000000..f0e8088dd8
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
@@ -0,0 +1,119 @@
+---
+id: 612ea4c4993aba52ab4aa32e
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now it's time to use the pseudo-selectors you set up earlier. To create the black keys, add a new `.key.black--key::after` selector. This targets elements with both `key` and `black--key` classes and selects the pseudo-element created after these elements in the HTML.
+
+In the new selector, set the `background-color` to `#1d1e22`. Also set the `content` property to `""`. This will make the pseudo-elements empty.
+
+The `content` property is used to set or override the content of an element. By default, the pseudo-elements created by the `::before` and `::after` selectors are empty, which means they are not rendered on the page. By setting the `content` property to an empty string `""`, you ensure that the pseudo-elements are rendered, while still appearing empty.
+
+If you would like to experiment, try removing the `background-color` property and setting different values for the `content` property, such as `"♥"`. Remember to undo these changes when you are done so the tests pass.
+
+# --hints--
+
+You should have a `.key.black--key::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
+```
+
+Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
+```
+
+Your `.key.black--key::after` selector should have a `content` property set to `""`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
new file mode 100644
index 0000000000..a7340d458d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
@@ -0,0 +1,110 @@
+---
+id: 612ea97df5742154772f312e
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Give the `.key.black--key::after` a `position` property set to `absolute` and a `left` property set to `-18px`.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute');
+```
+
+Your `.key.black--key::after` selector should have a `left` property set to `-18px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
new file mode 100644
index 0000000000..72dbf9cc19
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
@@ -0,0 +1,112 @@
+---
+id: 612ead8788d28655ef8db056
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+For the `.key.black--key::after`, set the `width` to `32px` and the `height` to `100px`.
+
+# --hints--
+
+Your `.key.black--key::after` should have a `width` property set to `32px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px');
+```
+
+Your `.key.black--key::after` should have a `height` property set to `100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
new file mode 100644
index 0000000000..37d6779238
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
@@ -0,0 +1,144 @@
+---
+id: 612eaf56b7ba3257fdbfb0db
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The piano needs the freeCodeCamp logo to make it official.
+
+Add an `img` element before your `.keys` element. Give the `img` a `class` of `logo`, and set the `src` to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Give it an `alt` text of `freeCodeCamp Logo`.
+
+# --hints--
+
+You should add a new `img` element.
+
+```js
+assert(document.querySelectorAll('img')?.length === 1);
+```
+
+Your `img` element should come before your first `.keys` element.
+
+```js
+const img = document.querySelector('img');
+assert(img?.nextElementSibling?.className === 'keys');
+assert(img?.previousElementSibling === null);
+```
+
+Your `img` element should have a `class` set to `logo`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.className === 'logo');
+```
+
+Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
+```
+
+Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo');
+```
+
+Remember that casing and spelling matter.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+    --fcc-editable-region--
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
new file mode 100644
index 0000000000..2e461ef48a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
@@ -0,0 +1,129 @@
+---
+id: 612eb4893b63c75bb9251ddf
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Start styling the logo by creating a `.logo` selector. Set the `width` to `200px`, a `position` of `absolute` and a `top` set to `23px`.
+
+# --hints--
+
+You should have a `.logo` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo'));
+```
+
+Your `.logo` selector should have a `width` property set to `200px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px');
+```
+
+Your `.logo` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute');
+```
+
+Your `.logo` selector should have a `top` property set to `23px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
new file mode 100644
index 0000000000..dc900814fd
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
@@ -0,0 +1,115 @@
+---
+id: 612eb75153591b5e3b1ab65e
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `img` element needs its parent to have a `position` set as a point of reference. Set the `position` of the `#piano` selector to `relative`.
+
+# --hints--
+
+Your `#piano` selector should have a `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
new file mode 100644
index 0000000000..62dbbd5686
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
@@ -0,0 +1,116 @@
+---
+id: 612eb7ca8c275d5f89c73333
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+To soften the sharp edges of the piano and its keys, start by giving the `#piano` a `border-radius` of `10px`.
+
+# --hints--
+
+Your `#piano` selector should have a `border-radius` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
new file mode 100644
index 0000000000..777b6e023b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
@@ -0,0 +1,117 @@
+---
+id: 612eb8e984cd73677a92b7e9
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Give the `.key` selector a `border-radius` value of `0 0 3px 3px`.
+
+# --hints--
+
+Your `.key` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+--fcc-editable-region--
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
new file mode 100644
index 0000000000..80785c1dbf
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
@@ -0,0 +1,118 @@
+---
+id: 612eb934f64a4d6890a45518
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Give the `.key.black--key::after` selector a `border-radius` of `0 0 3px 3px` to match the keys.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+--fcc-editable-region--
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
new file mode 100644
index 0000000000..a0c170c27e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
@@ -0,0 +1,139 @@
+---
+id: 612ebcba99bfa46a15370b11
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+The `@media` at-rule, also known as a media query, is used to conditionally apply CSS. Media queries are commonly used to apply CSS based on the viewport width using the `max-width` and `min-width` properties.
+
+In the below example the padding is applied to the `.card` class when the viewport is `960px` wide and below.
+
+```css
+@media (max-width: 960px) {
+  .card {
+    padding: 2rem;
+  }
+}
+```
+
+Add a media query that will be applied when the viewport is `768px` wide and below.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
+```
+
+Your `@media` query should have a `max-width` of `768px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
new file mode 100644
index 0000000000..3291a4dac2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
@@ -0,0 +1,133 @@
+---
+id: 612ebe7fe6d07e6b76d1cae2
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Add a new `#piano` selector within your `@media` query, and set the `width` to `358px`.
+
+# --hints--
+
+Your `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `358px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '358px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
new file mode 100644
index 0000000000..5cfe1e3cac
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
@@ -0,0 +1,136 @@
+---
+id: 612ebedec97e096c8bf64999
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Within the `@media` query, add a `.keys` selector and set the `width` to `318px`.
+
+# --hints--
+
+
+Your `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `318px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '318px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
new file mode 100644
index 0000000000..0dbf2d1e3c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
@@ -0,0 +1,139 @@
+---
+id: 612ebf9a210f2b6d77001e68
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Now add a `.logo` selector to the `@media` query, and set the `width` property to `150px`.
+
+# --hints--
+
+Your `@media` rule should have a `.logo` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo);
+```
+
+Your new `.logo` selector should have a `width` of `150px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo?.style.width === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
new file mode 100644
index 0000000000..a32cab125e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
@@ -0,0 +1,133 @@
+---
+id: 612ec0490ae8626e9adf82e4
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+You may have noticed that the keys collapse when the browser window is smaller than `768px`. To address this issue, set `overflow` to `hidden` in the first `.keys` selector. This property will hide any elements that are pushed outside the defined `width` of `.keys`, preventing unwanted layout changes.
+
+# --hints--
+
+Your original `.keys` selector should have the `overflow` property set to `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+--fcc-editable-region--
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
new file mode 100644
index 0000000000..097b595db2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
@@ -0,0 +1,154 @@
+---
+id: 612ec19d5268da7074941f84
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Logical operators can be used to construct more complex media queries. The `and` logical operator is used to query two media conditions.
+
+For example, a media query that targets a display width between 500px and 1000px would be:
+
+```css
+@media (min-width: 500px) and (max-width: 1000px){
+
+}
+```
+
+Add another `@media` rule to apply if the browser window is wider than `769px` but smaller than `1199px`.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
+```
+
+Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`.
+
+```js
+const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText;
+assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
new file mode 100644
index 0000000000..de83d05ac4
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
@@ -0,0 +1,288 @@
+---
+id: 612ec29c84b9a6718b1f5cec
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+For the new `@media` rule, set the `width` of the `#piano` to `675px` and the `width` of the `.keys` to `633px`.
+
+With that, your piano is complete!
+
+# --hints--
+
+Your second `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `675px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '675px');
+```
+
+Your second `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `633px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '633px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+@media (max-width: 1199px) and (min-width: 769px) {
+
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+@media (max-width: 1199px) and (min-width: 769px) {
+  #piano {
+    width: 675px;
+  }
+
+  .keys {
+    width: 633px;
+  }
+}
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
new file mode 100644
index 0000000000..9d986165f5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
@@ -0,0 +1,36 @@
+---
+id: 66fbcdfed6848e48947dbbc9
+title: Step 1
+challengeType: 1
+dashedName: step-1
+---
+
+# --description--
+
+In this workshop, you will create a recipe tracker using JavaScript objects.
+
+Start by creating an empty array named `recipes`. This is the array you'll push the recipe objects into later.
+
+# --hints--
+
+You should create an array named `recipes`.
+
+```js
+assert.isArray(recipes)
+```
+
+Your `recipes` array should be empty.
+
+```js
+assert.isEmpty(recipes)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
new file mode 100644
index 0000000000..0186623c8b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
@@ -0,0 +1,81 @@
+---
+id: 66fbcf750a62784cf11f562d
+title: Step 2
+challengeType: 1
+dashedName: step-2
+---
+
+# --description--
+
+Create an object named `recipe1`. Inside the `recipe1` object, create a `name` property with the value `"Spaghetti Carbonara"`.
+
+Also inside the `recipe1` object, create an `ingredients` property with an array as the value. The array should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` inside it.
+
+Create another `ratings` property with array value. The array should have `4`, `5`, `4`, and `5` inside it.
+
+# --hints--
+
+You should create an object named `recipe1`.
+
+```js
+assert.isObject(recipe1)
+```
+
+Your `recipe1` object should have a `name` property.
+
+```js
+assert.property(recipe1, 'name');
+```
+
+Your `name` property should be set to `Spaghetti Carbonara`.
+
+```js
+assert.equal(recipe1.name, 'Spaghetti Carbonara');
+```
+
+Your `recipe1` object should have an `ingredients` property.
+
+```js
+assert.property(recipe1, 'ingredients');
+```
+
+Your `ingredients` property should have an array value.
+
+```js
+assert.isArray(recipe1.ingredients)
+```
+
+The array value of your `ingredients` property should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` in it.
+
+```js
+assert.deepEqual(recipe1.ingredients, ["spaghetti", "Parmesan cheese", "pancetta", "black pepper"]);
+```
+
+Your `recipe1` object should have a `ratings` property.
+
+```js
+assert.property(recipe1, "ratings");
+```
+
+Your `ratings` property should have an array value.
+
+```js
+assert.isArray(recipe1.ratings)
+```
+
+The array value of your `ratings` property should have `4`, `5`, `4`, and `5` in it.
+
+```js
+assert.deepEqual(recipe1.ratings, [4, 5, 4, 5]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
new file mode 100644
index 0000000000..77dac4da29
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
@@ -0,0 +1,152 @@
+---
+id: 66fbcf750a62784cf11f562e
+title: Step 4
+challengeType: 1
+dashedName: step-4
+---
+
+# --description--
+
+Create another `recipe2` object with the following properties and values:
+
+| Key                | Value                                                                   |
+| ------------------ | ----------------------------------------------------------------------- |
+| `name`             | `Chicken Curry`                                                         |
+| `ingredients`      | `["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]` |
+| `ratings`          | `[4, 5, 5, 5]`                                                          |
+| `cookingTime`      | `42`                                                                    |
+| `totalIngredients` | `null`                                                                  |
+| `difficultyLevel`  | `''`                                                                    |
+| `averageRating`    | `null`                                                                  |
+
+# --hints--
+
+You should create an object named `recipe2`.
+
+```js
+assert.isObject(recipe2)
+```
+
+Your `recipe2` object should have a `name` property.
+
+```js
+assert.property(recipe2, "name");
+```
+
+Your `name` property should be set to `Chicken Curry`.
+
+```js
+assert.equal(recipe2.name, "Chicken Curry");
+```
+
+Your `recipe2` object should have an `ingredients` property.
+
+```js
+assert.property(recipe2, "ingredients");
+```
+
+Your `ingredients` property should have an array value.
+
+```js
+assert.isArray(recipe2.ingredients)
+```
+
+The array value of your `ingredients` property should have `chicken breast`, `coconut milk`, `curry powder`, `onion` and `garlic` in it.
+
+```js
+assert.deepEqual(recipe2.ingredients, ["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]);
+```
+
+Your `recipe2` object should have a `ratings` property.
+
+```js
+assert.property(recipe2, "ratings");
+```
+
+Your `ratings` property should have an array value.
+
+```js
+assert.isArray(recipe2.ratings)
+```
+
+The array value of your `ratings` property should have `4`, `5`, `5`, and `5` in it.
+
+```js
+assert.deepEqual(recipe2.ratings, [4, 5, 5, 5]);
+```
+
+Your `recipe2` object should have a `cookingTime` property.
+
+```js
+assert.property(recipe2, "cookingTime");
+```
+
+Your `cookingTime` property value should be a number.
+
+```js
+assert.isNumber(recipe2.cookingTime);
+```
+
+Your `cookingTime` property should be set to `42`.
+
+```js
+assert.equal(recipe2.cookingTime, 42);
+```
+
+Your `recipe2` object should have a `totalIngredients` property.
+
+```js
+assert.property(recipe2, "totalIngredients");
+```
+
+Your `totalIngredients` property should be set to `null`.
+
+```js
+assert.isNull(recipe2.totalIngredients);
+```
+
+Your `recipe2` object should have a `difficultyLevel` property.
+
+```js
+assert.property(recipe2, "difficultyLevel");
+```
+
+Your `difficultyLevel` property should be set to an empty string.
+
+```js
+assert.deepEqual(recipe2.difficultyLevel, "");
+```
+
+Your `recipe2` object should have an `averageRating` property.
+
+```js
+assert.property(recipe2, "averageRating");
+```
+
+Your `averageRating` property should be set to `null`.
+
+```js
+assert.isNull(recipe2.averageRating);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
new file mode 100644
index 0000000000..a010c6c140
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
@@ -0,0 +1,98 @@
+---
+id: 66fbcf750a62784cf11f5630
+title: Step 6
+challengeType: 1
+dashedName: step-6
+---
+
+# --description--
+
+A third `recipe3` object has been filled in for you. It has the same properties as `recipe1` and `recipe2`.
+
+You should now push the three objects into the `recipes` array. To do thus, you can use the `push()` method.
+
+Use the `push()` method to push all the recipe objects into the `recipes` array. Make sure to push `recipe1`, `recipe2`, and `recipe3` in that order.
+
+# --hints--
+
+You should remove `recipe1Name` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe1Name\s*=\s*recipe1\.name;?\s*console\.log\(recipe1Name\);?/)
+```
+
+You should remove `recipe2Name` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe2Name\s*=\s*recipe2\.name;?\s*console\.log\(recipe2Name\);?/)
+```
+
+You should remove `recipe1CookingTime` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe1CookingTime\s*=\s*recipe1\.cookingTime;?\s*console\.log\(recipe1CookingTime\);?/)
+```
+
+You should remove `recipe2CookingTime` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe2CookingTime\s*=\s*recipe2\.cookingTime;?\s*console\.log\(recipe2CookingTime\);?/)
+```
+
+You should push all the recipes objects into the `recipes` array. Make sure to push them in the order they are declared.
+
+```js
+assert.deepEqual(recipes, [recipe1, recipe2, recipe3]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+const recipe1Name = recipe1.name;
+console.log(recipe1Name);
+
+const recipe2Name = recipe2.name;
+console.log(recipe2Name);
+
+const recipe1CookingTime = recipe1.cookingTime;
+console.log(recipe1CookingTime);
+
+const recipe2CookingTime = recipe2.cookingTime;
+console.log(recipe2CookingTime);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
new file mode 100644
index 0000000000..292feedbae
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
@@ -0,0 +1,104 @@
+---
+id: 66fbcf750a62784cf11f5631
+title: Step 7
+challengeType: 1
+dashedName: step-7
+---
+
+# --description--
+
+Now, you should work on calculating the `averageRating`, `totalIngredients`, and the `difficultyLevel` for each recipe in the `recipes` array.
+
+Start by creating a `getAverageRating` function that takes a `ratings` parameter. Inside the function, calculate the average rating using the items in the `ratings` property of each recipe.
+
+Your `getAverageRating` function must return a number.
+
+# --hints--
+
+You should create a `getAverageRating` function.
+
+```js
+assert.isFunction(getAverageRating)
+```
+
+Your `getAverageRating` function should have a `ratings` parameter.
+
+```js
+assert.match(getAverageRating.toString(), /ratings/);
+```
+
+Your `getAverageRating` function should return a number.
+
+```js
+assert.isNumber(getAverageRating(recipe1.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.00`.
+
+```js
+assert.isNumber(getAverageRating(recipe2.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.75`.
+
+```js
+assert.isNumber(getAverageRating(recipe2.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.50`.
+
+```js
+assert.isNumber(getAverageRating(recipe1.ratings))
+```
+
+Your `getAverageRating` function should return the correct rating.
+
+```js
+assert.equal(getAverageRating(recipe1.ratings), 4.50)
+assert.equal(getAverageRating(recipe2.ratings), 4.75)
+assert.equal(getAverageRating(recipe3.ratings), 4.00)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
new file mode 100644
index 0000000000..ace358ab7f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
@@ -0,0 +1,105 @@
+---
+id: 66fbcf750a62784cf11f5632
+title: Step 8
+challengeType: 1
+dashedName: step-8
+---
+
+# --description--
+
+Create a `getTotalIngredients` function that takes an `ingredients` parameter. This function should return the number of ingredients for each recipe by returning the length of the `ingredients` array.
+
+# --hints--
+
+You should create a `getTotalIngredients` function.
+
+```js
+assert.isFunction(getTotalIngredients)
+```
+
+You `getTotalIngredients` function should have an `ingredients` parameter.
+
+```js
+assert.match(getTotalIngredients.toString(), /ingredients/);
+```
+
+Your `getTotalIngredients` function should return a number.
+
+```js
+assert.isNumber(getTotalIngredients(recipe1.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `5`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe2.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `3`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe3.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `4`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe1.ingredients))
+```
+
+Your `getTotalIngredients` function should return the correct number of ingredients.
+
+```js
+assert.equal(getTotalIngredients(recipe1.ingredients), 4)
+assert.equal(getTotalIngredients(recipe2.ingredients), 5)
+assert.equal(getTotalIngredients(recipe3.ingredients), 3)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
new file mode 100644
index 0000000000..c686ff0e9a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
@@ -0,0 +1,106 @@
+---
+id: 66fbcf750a62784cf11f5633
+title: Step 9
+challengeType: 1
+dashedName: step-9
+---
+
+# --description--
+
+Create a `getDifficultyLevel` function that takes `cookingTime` as a parameter.
+
+If `cookingTime` is less than `30`, the function should return `"easy"`. If it is less than or equal to `60`, the function should return `"medium"`. Otherwise, the function should return `"hard"`.
+
+# --hints--
+
+You should create a `getDifficultyLevel` function.
+
+```js
+assert.isFunction(getDifficultyLevel)
+```
+
+You `getDifficultyLevel` function should have a `cookingTime` parameter.
+
+```js
+assert.match(getDifficultyLevel.toString(), /cookingTime/);
+```
+
+Your `getDifficultyLevel` function should return `"easy"` when the `cookingTime` is less than or equal to `30`.
+
+```js
+assert.strictEqual(getDifficultyLevel(10), "easy")
+assert.strictEqual(getDifficultyLevel(20), "easy")
+assert.strictEqual(getDifficultyLevel(29), "easy")
+assert.strictEqual(getDifficultyLevel(30), "easy")
+```
+
+Your `getDifficultyLevel` function should return `"medium"` when the `cookingTime` is greater than `31` and less than `60`.
+
+```js
+assert.strictEqual(getDifficultyLevel(31), "medium")
+assert.strictEqual(getDifficultyLevel(40), "medium")
+assert.strictEqual(getDifficultyLevel(50), "medium")
+assert.strictEqual(getDifficultyLevel(60), "medium")
+```
+
+Your `getDifficultyLevel` function should return `"hard"` when the `cookingTime` is greater than `60`.
+
+```js
+assert.strictEqual(getDifficultyLevel(61), "hard")
+assert.strictEqual(getDifficultyLevel(65), "hard")
+assert.strictEqual(getDifficultyLevel(70), "hard")
+assert.strictEqual(getDifficultyLevel(75), "hard")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
new file mode 100644
index 0000000000..38ec100fd5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
@@ -0,0 +1,133 @@
+---
+id: 66fbcf750a62784cf11f5634
+title: Step 10
+challengeType: 1
+dashedName: step-10
+---
+
+# --description--
+
+It's time to test each of the functions. You can use any of the recipes for this, but let's start with `recipe1`.
+
+Create three new variables: `recipe1AverageRating`, `recipe1TotalIngredients`, and `recipe1DifficultyLevel`. Assign them the values by calling the corresponding function for each variable and passing in the appropriate `recipe1` property.
+
+Finally, log each variable to the console to see the results.
+
+# --hints--
+
+You should create a `recipe1AverageRating` variable.
+
+```js
+assert.isNotNull(recipe1AverageRating)
+```
+
+Your `recipe1AverageRating` variable should be set to `getAverageRating(recipe1.ratings)`.
+
+```js
+assert.equal(recipe1AverageRating, getAverageRating(recipe1.ratings));
+```
+
+You should log `recipe1AverageRating` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1AverageRating\);?/)
+```
+
+You should create a `recipe1TotalIngredients` variable.
+
+```js
+assert.isNotNull(recipe1TotalIngredients)
+```
+
+Your `recipe1TotalIngredients` variable should be set to `getTotalIngredients(recipe1.ingredients)`.
+
+```js
+assert.equal(recipe1TotalIngredients, getTotalIngredients(recipe1.ingredients));
+```
+
+You should log `recipe1TotalIngredients` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1TotalIngredients\);?/)
+```
+
+You should create a `recipe1DifficultyLevel` variable.
+
+```js
+assert.isNotNull(recipe1DifficultyLevel)
+```
+
+Your `recipe1DifficultyLevel` variable should be set to `getDifficultyLevel(recipe1.cookingTime)`.
+
+```js
+assert.equal(recipe1DifficultyLevel, getDifficultyLevel(recipe1.cookingTime));
+```
+
+You should log `recipe1DifficultyLevel` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1DifficultyLevel\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
new file mode 100644
index 0000000000..3a34c4658f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
@@ -0,0 +1,124 @@
+---
+id: 66fbcf750a62784cf11f5635
+title: Step 11
+challengeType: 1
+dashedName: step-11
+---
+
+# --description--
+
+You can now fill in each item of the `recipes` array with values for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties.
+
+To do this, access the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of each recipe object and assign them the results of the corresponding function calls with the appropriate arguments.
+
+For now, access the `averageRating`, `totalIngredients`, and `difficultyLevel` of `recipe1` and set them to the appropriate function calls and arguments.
+
+# --hints--
+
+You should access the `averageRating` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.averageRating/)
+```
+
+You should set the `averageRating` of `recipe1` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter.
+
+```js
+assert.match(code, /recipe1\.averageRating\s*=\s*getAverageRating\(recipe1\.ratings\);?/)
+```
+
+You should access the `totalIngredients` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.totalIngredients/)
+```
+
+You should set the `totalIngredients` of `recipe1` you accessed to the calling of `getTotalIngredients` with `recipe1.ingredients` as its parameter.
+
+```js
+assert.match(code, /recipe1\.totalIngredients\s*=\s*getTotalIngredients\(recipe1\.ingredients\);?/)
+```
+
+You should access the `difficultyLevel` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.difficultyLevel/)
+```
+
+You should set the `difficultyLevel` of `recipe1` you accessed to the calling of `getDifficultyLevel` with `recipe1.cookingTime` as its parameter.
+
+```js
+assert.match(code, /recipe1\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe1\.cookingTime\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
new file mode 100644
index 0000000000..bd9aceddf5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
@@ -0,0 +1,124 @@
+---
+id: 66fbcf750a62784cf11f5636
+title: Step 12
+challengeType: 1
+dashedName: step-12
+---
+
+# --description--
+
+Repeat the process for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe2`.
+
+# --hints--
+
+You should access the `averageRating` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.averageRating/)
+```
+
+You should set the `averageRating` of `recipe2` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter.
+
+```js
+assert.match(code, /recipe2\.averageRating\s*=\s*getAverageRating\(recipe2\.ratings\);?/)
+```
+
+You should access the `totalIngredients` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.totalIngredients/)
+```
+
+You should set the `totalIngredients` of `recipe2` you accessed to the calling of `getTotalIngredients` with `recipe2.ingredients` as its parameter.
+
+```js
+assert.match(code, /recipe2\.totalIngredients\s*=\s*getTotalIngredients\(recipe2\.ingredients\);?/)
+```
+
+You should access the `difficultyLevel` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.difficultyLevel/)
+```
+
+You should set the `difficultyLevel` of `recipe2` you accessed to the calling of `getDifficultyLevel` with `recipe2.cookingTime` as its parameter.
+
+```js
+assert.match(code, /recipe2\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe2\.cookingTime\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
new file mode 100644
index 0000000000..032cb8cd78
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
@@ -0,0 +1,186 @@
+---
+id: 66fbcf750a62784cf11f5637
+title: Step 13
+challengeType: 1
+dashedName: step-13
+---
+
+# --description--
+
+The `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe3` have been filled in for you.
+
+Now, log the `recipes` array to the console to see all its items filled with the updated values.
+
+With that, your recipes tracker project is complete.
+
+# --hints--
+
+You should log the `recipes` array to the console.
+
+```js
+assert.match(code, /console\.log\(recipes\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+recipe2.averageRating = getAverageRating(recipe2.ratings);
+recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients);
+recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime);
+
+recipe3.averageRating = getAverageRating(recipe3.ratings);
+recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients)
+recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime)
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return (total / ratings.length).toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(`Recipe 1 Average Rating ${recipe1AverageRating}`);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(`Recipe 1 Total Ingredients: ${recipe1TotalIngredients}`);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(`Recipe 1 Difficulty: ${recipe1DifficultyLevel}`);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+recipe2.averageRating = getAverageRating(recipe2.ratings);
+recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients);
+recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime);
+
+recipe3.averageRating = getAverageRating(recipe3.ratings);
+recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients)
+recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime)
+
+console.log(recipes);
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
new file mode 100644
index 0000000000..193d3d702f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
@@ -0,0 +1,86 @@
+---
+id: 66ff02792b3042a2b811f475
+title: Step 3
+challengeType: 1
+dashedName: step-3
+---
+
+# --description--
+
+Add the following properties to the `recipe1` object:
+
+| Key                | Value  |
+| ------------------ | ------ |
+| `cookingTime`      | `22`   |
+| `totalIngredients` | `null` |
+| `difficultyLevel`  | `""`   |
+| `averageRating`    | `null` |
+
+The properties with `null` and empty string values will be updated later after you calculate them.
+
+# --hints--
+
+Your `recipe1` object should have a `cookingTime` property.
+
+```js
+assert.property(recipe1, "cookingTime");
+```
+
+Your `cookingTime` property should be set to `22`.
+
+```js
+assert.equal(recipe1.cookingTime, 22);
+```
+
+Your `recipe1` object should have a `totalIngredients` property.
+
+```js
+assert.property(recipe1, "totalIngredients");
+```
+
+Your `totalIngredients` property should be set to `null`.
+
+```js
+assert.isNull(recipe1.totalIngredients);
+```
+
+Your `recipe1` object should have a `difficultyLevel` property.
+
+```js
+assert.property(recipe1, "difficultyLevel");
+```
+
+Your `difficultyLevel` property should be set to an empty string.
+
+```js
+assert.deepEqual(recipe1.difficultyLevel, "");
+```
+
+Your `recipe1` object should have a `averageRating` property.
+
+```js
+assert.property(recipe1, "averageRating");
+```
+
+Your `averageRating` property should be set to `null`.
+
+```js
+assert.isNull(recipe1.averageRating);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  ratings: [4, 5, 4, 5],
+--fcc-editable-region--
+
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
new file mode 100644
index 0000000000..6e051af223
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
@@ -0,0 +1,135 @@
+---
+id: 670e4f45f7116c0f216a5177
+title: Step 5
+challengeType: 1
+dashedName: step-5
+---
+
+# --description--
+
+Before we move on, you should practice how to access properties from an object.
+
+You can use either dot (`.`) or bracket (`[]`) notation to do this. Here's an example:
+
+```js
+const person = {
+  name: 'John',
+  age: 30,
+  job: 'Software Engineer'
+};
+
+console.log(person.name); // John
+console.log(person['age']);  // 30
+```
+
+Access the `name` properties of both `recipe1` and `recipe2`, and assign them to the variables `recipe1Name` and `recipe2Name`, respectively.
+
+Next, access the `cookingTime` properties of both recipes and assign them to the variables `recipe1CookingTime` and `recipe2CookingTime`, respectively.
+
+Make sure all the variables you created are logged to the console.
+
+# --hints--
+
+You should create a `recipe1Name` variable.
+
+```js
+assert.isNotNull(recipe1Name)
+```
+
+You should set your `recipe1Name` variable to the accessment of the `name` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.name|recipe1\[("|'|`)name("|'|`)\]/)
+```
+
+You should log `recipe1Name` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1Name\)/)
+```
+
+You should create a `recipe2Name` variable.
+
+```js
+assert.isNotNull(recipe2Name)
+```
+
+You should set your `recipe2Name` variable to the accessment of the `name` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.name|recipe2\[("|'|`)name("|'|`)\]/)
+```
+
+You should log `recipe2Name` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe2Name\)/)
+```
+
+You should create a `recipe1CookingTime` variable.
+
+```js
+assert.isNotNull(recipe1CookingTime)
+```
+
+You should set your `recipe1CookingTime` variable to the accessment of the `cookingTime` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.cookingTime|recipe1\[("|'|`)cookingTime("|'|`)\]/)
+```
+
+You should log `recipe1CookingTime` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1CookingTime\)/)
+```
+
+You should create a `recipe2CookingTime` variable.
+
+```js
+assert.isNotNull(recipe2CookingTime)
+```
+
+You should set your `recipe2CookingTime` variable to the accessment of the `cookingTime` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.cookingTime|recipe2\[("|'|`)cookingTime("|'|`)\]/)
+```
+
+You should log `recipe2CookingTime` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe2CookingTime\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
new file mode 100644
index 0000000000..f86b2c6d43
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996b
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Begin your project by adding an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` within the `body` element.
+
+# --hints--
+
+Your code should have an `img` element.
+
+```js
+assert(document.querySelectorAll('img').length === 1);
+```
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
new file mode 100644
index 0000000000..ba70369909
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
@@ -0,0 +1,42 @@
+---
+id: 60a3e3396c7b40068ad6996c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+In the previous lecture videos about the CSS box model, you learned that every HTML element is treated as a box with four areas.
+
+Imagine you receive a box from your favorite online retailer — the content is the item in the box, or in your case, a header, paragraph, or image element.
+
+Change the `src` attribute in the `<img>` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`.
+
+# --hints--
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
new file mode 100644
index 0000000000..53f6395c12
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
@@ -0,0 +1,41 @@
+---
+id: 60a3e3396c7b40068ad6996d
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it.
+
+Think of the border like the cardboard box your item was shipped in.
+
+Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+# --hints--
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
new file mode 100644
index 0000000000..070dc57d06
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Margin is the area outside of the box, and can be used to control the space between other boxes or elements.
+
+Here the bottom element has a larger top margin, pushing it further down the page.
+
+Now that you quickly reviewed the CSS box model, let's get started on the Rothko painting.
+
+Remove the `<img>` element.
+
+# --hints--
+
+You should not have an `img` element in your code.
+
+```js
+assert(document.querySelector('img') === null);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
new file mode 100644
index 0000000000..33aa91b710
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
@@ -0,0 +1,47 @@
+---
+id: 60a3e3396c7b40068ad6996f
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Add a `div` element in the `body`.
+
+Set the `class` attribute equal to `canvas`.
+
+This will act as the canvas for your painting.
+
+# --hints--
+
+Your code should have a `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 1)
+```
+
+The `div` element should have a `class` with the value `canvas`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('canvas'))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
new file mode 100644
index 0000000000..4ef6fabe87
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
@@ -0,0 +1,53 @@
+---
+id: 60a3e3396c7b40068ad69970
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Before you can start styling the `div` you added, you need to link your CSS to your HTML.
+
+Add a `link` element to link your `styles.css` file. Set the `href` to `styles.css`, and remember to set the `rel` attribute to `stylesheet`.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert(/<link/.test(code))
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert.match(code, /<link.*?rel=('|"|`)stylesheet\1/)
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link.*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
new file mode 100644
index 0000000000..286d537b9e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69971
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Time for CSS.
+
+Even though your `<div>` has no text, it's still treated as a box with content. Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels. Here's a CSS rule that sets the width of the class `card` to 300 pixels:
+
+```css
+.card {
+  width: 300px;
+}
+```
+
+# --hints--
+
+Your code should have a `.canvas` selector.
+
+```js
+const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas');
+assert(hasCanvas)
+```
+
+You should set the `width` property to `500px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px')
+assert(hasWidth);
+```
+
+Your `.canvas` element should have a `width` of `500px`.
+
+```js
+const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width');
+assert(width === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
new file mode 100644
index 0000000000..9151276320
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
@@ -0,0 +1,54 @@
+---
+id: 60a3e3396c7b40068ad69972
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Add the `height` property with the value `600px` to your `.canvas` rule.
+
+# --hints--
+
+You should set the `height` property to `600px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px');
+assert(hasHeight);
+```
+
+Your `.canvas` element should have a `height` of `600px`.
+
+```js
+const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height');
+assert(canvasHeight === '600px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
new file mode 100644
index 0000000000..66a17e01da
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
@@ -0,0 +1,55 @@
+---
+id: 60a3e3396c7b40068ad69973
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Change the `background-color` of the canvas to `#4d0f00`.
+
+# --hints--
+
+You should set the `background-color` property to `#4d0f00`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)');
+assert(hasBackground);
+```
+
+Your `.canvas` element should have a `background-color` of `#4d0f00`.
+
+```js
+const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color');
+assert(canvasBackground === 'rgb(77, 15, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
new file mode 100644
index 0000000000..45d4fc208c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69974
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Every painting needs a frame.
+
+Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class.
+# --hints--
+
+You should add a new `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 2)
+```
+
+Your `.canvas` element should be nested in the new `div` element.
+
+```js
+assert(document.querySelector('.canvas').parentElement.tagName === 'DIV');
+```
+
+Your new `div` should have a `class` with the value `frame`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('frame'));
+```
+
+Your new `div` should be within your `body` element.
+
+```js
+assert(document.querySelector('div').parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+--fcc-editable-region--
+
+    <div class="canvas">
+    </div>
+
+--fcc-editable-region--
+  </body>
+  ```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
new file mode 100644
index 0000000000..8943f3095f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69975
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Write a new rule using the `.frame` class selector.
+
+Use the `border` shorthand declaration to give the `.frame` element a solid, black border with a width of `50px`.
+
+# --hints--
+
+Your code should have a `.frame` selector.
+
+```js
+const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame');
+assert(hasFrame);
+```
+
+You should set the `border` property to `50px solid black`.
+
+```js
+const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black');
+assert(hasBorder);
+```
+
+Your `.frame` element should have a `50px solid black` `border`.
+
+```js
+const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border');
+assert(frameBorder === '50px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
new file mode 100644
index 0000000000..67d334708d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
@@ -0,0 +1,64 @@
+---
+id: 60a3e3396c7b40068ad69976
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+The frame is much too wide.
+
+In `.frame`, set its `width` to 500 pixels.
+
+# --hints--
+
+You should set the `width` property to `500px`.
+
+```js
+const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px');
+assert(widthFilter.length === 2);
+```
+
+Your `.frame` element should have a `width` of `500px`.
+
+```js
+const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width');
+assert(frameWidth === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
new file mode 100644
index 0000000000..bba60c94f2
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
@@ -0,0 +1,65 @@
+---
+id: 60a3e3396c7b40068ad69977
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Use padding to adjust the spacing within an element.
+
+In `.frame`, use the `padding` shorthand property to increase the space between the `.frame` and `.canvas` elements by `50px`. The shorthand will increase space in the top, bottom, left, and right of the element's border and canvas within.
+
+# --hints--
+
+You should set the `padding` property to `50px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px');
+assert(hasPadding);
+```
+
+Your `.frame` element should have a `padding` value of `50px`.
+
+```js
+const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding');
+assert(framePadding === '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
new file mode 100644
index 0000000000..5bdf662a15
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
@@ -0,0 +1,66 @@
+---
+id: 60a3e3396c7b40068ad69978
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Use margins to adjust the spacing outside of an element.
+
+Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. This will move the frame down 20 pixels and horizontally center it on the page.
+
+# --hints--
+
+You should set the `margin` property to `20px auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto');
+assert(hasMargin);
+```
+
+Your `.frame` element should have a `margin` value of `20px auto`.
+
+```js
+const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin');
+assert(frameMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
new file mode 100644
index 0000000000..cbbaa5bd1d
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad69979
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Add a new `div` element inside of your `.canvas` element.
+
+Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 3);
+```
+
+You should nest the new `div` element within your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[0].tagName === 'DIV');
+```
+
+Your new `div` should have a `class` attribute with a value `one`.
+
+```js
+assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
new file mode 100644
index 0000000000..de2c2b089c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997a
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Write a new rule that targets `.one` and set its `width` to 425 pixels.
+
+# --hints--
+
+You should have a `.one` selector.
+
+```js
+const hasOne = new __helpers.CSSHelp(document).getStyle('.one');
+assert(hasOne);
+```
+
+You should set the `width` property to `425px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px');
+assert(hasWidth);
+```
+
+Your `.one` element should have a `width` value of `425px`.
+
+```js
+const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width');
+assert(oneWidth === '425px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
new file mode 100644
index 0000000000..aa9033dc8b
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
@@ -0,0 +1,70 @@
+---
+id: 60a3e3396c7b40068ad6997b
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Now set the `height` for `.one` to 150 pixels.
+
+# --hints--
+
+You should set the `height` property to `150px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px');
+assert(hasHeight);
+```
+
+Your `.one` element should have a `height` value of `150px`.
+
+```js
+const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height');
+assert(oneHeight === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
new file mode 100644
index 0000000000..bec4b8fdf3
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad6997c
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Set the `background-color` of `.one` to `#efb762`.
+
+# --hints--
+
+You should set the `background-color` property to `#efb762`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)');
+assert(hasBackground)
+```
+
+Your `.one` element should have a `background-color` value of `#efb762`.
+
+```js
+const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color');
+assert(oneBackground === 'rgb(239, 183, 98)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
new file mode 100644
index 0000000000..29042741c7
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997d
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Use margins to position the `.one` element on the canvas.
+
+Add the shorthand `margin` property with a vertical margin of `20px` and a horizontal margin of `auto`.
+
+# --hints--
+
+You should set the `margin` property to `20px auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto');
+assert(marginFilter.length === 2);
+```
+
+Your `.one` element should have a `margin` value of `20px auto`.
+
+```js
+const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin');
+assert(oneMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
new file mode 100644
index 0000000000..365ecbaec6
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
@@ -0,0 +1,75 @@
+---
+id: 60a3e3396c7b40068ad6997e
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels.
+
+Add `padding` of `1px` to the `.canvas` element to give the `.one` element something solid to push off of.
+
+# --hints--
+
+You should set the `padding` property to `1px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
+assert(hasPadding);
+```
+
+Your `.canvas` element should have a `padding` value of `1px`.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding');
+assert(canvasPadding === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
new file mode 100644
index 0000000000..9ffd481ee9
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
@@ -0,0 +1,82 @@
+---
+id: 60a3e3396c7b40068ad6997f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels.
+
+Replace the `padding` property with `overflow` set to `hidden` - changing the canvas back to its original dimensions.
+
+# --hints--
+
+You should remove the `padding` property from the `.canvas` selector.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding');
+assert(!canvasPadding);
+```
+
+You should set the `overflow` property to `hidden`.
+
+```js
+const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden');
+assert(hasOverflow);
+```
+
+Your `.canvas` element should have an `overflow` value of `hidden`.
+
+```js
+const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow');
+assert(canvasOverflow === 'hidden')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+  padding: 1px;
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
new file mode 100644
index 0000000000..84694dcaba
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69980
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle.
+
+# --hints--
+
+You should not change the existing `.one` element.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+```
+
+You should have a second `div` element in your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[1].tagName === 'DIV');
+```
+
+Your second `div` element should have a `class` value of `two`.
+
+```js
+assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two'));
+```
+
+Your `.two` element should come after your `.one` element.
+
+```js
+assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
new file mode 100644
index 0000000000..905c846534
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69981
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels.
+
+# --hints--
+
+You should have a `.two` selector.
+
+```js
+const hasTwo = new __helpers.CSSHelp(document).getStyle('.two');
+assert(hasTwo);
+```
+
+You should set the `width` property to `475px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px');
+assert(hasWidth);
+```
+
+Your `.two` element should have a `width` value of `475px`.
+
+```js
+const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width');
+assert(twoWidth === '475px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
new file mode 100644
index 0000000000..deb83104e5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
@@ -0,0 +1,79 @@
+---
+id: 60a3e3396c7b40068ad69982
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Set the `height` of the `.two` element to 200 pixels.
+
+# --hints--
+
+You should set the `height` property to `200px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px');
+assert(hasHeight);
+```
+
+Your `.two` element should have a `height` value of `200px`.
+
+```js
+const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height');
+assert(twoHeight === '200px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
new file mode 100644
index 0000000000..b473fbe95e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
@@ -0,0 +1,80 @@
+---
+id: 60a3e3396c7b40068ad69983
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Set the `background-color` of the `.two` element to `#8f0401`.
+
+# --hints--
+
+You should set the `background-color` property to `#8f0401`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)');
+assert(hasBackground);
+```
+
+Your `.two` element should have a `background-color` value of `#8f0401`.
+
+```js
+const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color');
+assert(twoBackground === 'rgb(143, 4, 1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
new file mode 100644
index 0000000000..aa6bfc9b10
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
@@ -0,0 +1,81 @@
+---
+id: 60a3e3396c7b40068ad69984
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Center the `.two` element by setting its `margin` to `auto`.
+
+# --hints--
+
+You should set the `margin` property to `auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto');
+assert(hasMargin);
+```
+
+Your `.two` element should have a `margin` value of `auto`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
new file mode 100644
index 0000000000..d4e9204170
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad69986
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle.
+
+# --hints--
+
+Your existing `.one` and `.two` elements should not be changed.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+assert(document.querySelectorAll('.two').length === 1);
+```
+
+Your new `div` should be nested in your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
+```
+
+Your new `div` should come after your `.two` element.
+
+```js
+assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
+```
+
+Your new `div` element should have a `class` with the value `three`.
+
+```js
+assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
new file mode 100644
index 0000000000..a8ed43828e
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
@@ -0,0 +1,94 @@
+---
+id: 60a3e3396c7b40068ad69987
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+You don't always have to use pixels when sizing an element.
+
+Create a new rule, `.three`, and set its `width` to `91%`.
+
+# --hints--
+
+You should use the `.three` selector.
+
+```js
+const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
+assert(hasThree);
+```
+
+You should set the `width` property to `91%`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
+assert(hasWidth);
+```
+
+Your `.three` element should have a `width` value of `91%`.
+
+```js
+const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
+assert(threeWidth === '91%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
new file mode 100644
index 0000000000..4bac9123c8
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
@@ -0,0 +1,87 @@
+---
+id: 60a3e3396c7b40068ad69988
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Set the `height` of `.three` to `28%`.
+
+# --hints--
+
+You should set the `height` property to `28%`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
+assert(hasHeight);
+```
+
+Your `.three` element should have a `height` value of `28%`.
+
+```js
+const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
+assert(threeHeight === '28%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
new file mode 100644
index 0000000000..aa949defd3
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
@@ -0,0 +1,88 @@
+---
+id: 60a3e3396c7b40068ad69989
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Change the `background-color` of `.three` to `#b20403`.
+
+# --hints--
+
+You should set the `background-color` property to `#b20403`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
+assert(hasBackground);
+```
+
+Your `.three` element should have a `background-color` value of `#b20403`.
+
+```js
+const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
+assert(threeBackground === 'rgb(178, 4, 3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
new file mode 100644
index 0000000000..6a8b129773
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
@@ -0,0 +1,89 @@
+---
+id: 60a3e3396c7b40068ad6998a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Center the `.three` element on the canvas by setting its `margin` to `auto`.
+
+# --hints--
+
+You should set the `margin` property to `auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
+assert(marginFilter.length === 2);
+```
+
+Your `.three` element should have a `margin` value of `auto`.
+
+```js
+const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
+assert(threeMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
new file mode 100644
index 0000000000..ba32bd466f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad6998b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+It's helpful to have your margins push in one direction.
+
+In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels.
+
+In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels.
+
+# --hints--
+
+You should set the `margin` property to `0 auto 20px`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
+assert(hasMargin);
+```
+
+Your `.two` element should have a `margin` value of `0 auto 20px`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === '0px auto 20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+  margin: auto;
+--fcc-editable-region--
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
new file mode 100644
index 0000000000..db47cb9346
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad6998c
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The colors and shapes of your painting are too sharp to pass as a Rothko.
+
+Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element.
+
+Here's an example of a rule that add a 3px `blur`:
+
+```css
+p {
+  filter: blur(3px);
+}
+```
+
+# --hints--
+
+You should set the `filter` property to `blur(2px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
+assert(hasFilter);
+```
+
+Your `.canvas` element should have a `filter` value of `blur(2px)`.
+
+```js
+const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
+assert(canvasFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+
+}
+--fcc-editable-region--
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
new file mode 100644
index 0000000000..06f7c56156
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
@@ -0,0 +1,108 @@
+---
+id: 60a3e3396c7b40068ad6998d
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel.
+
+# --hints--
+
+You should have a `.one, .two` selector list.
+
+```js
+const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
+assert(oneTwo);
+```
+
+You should set the `filter` property to `blur(1px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
+assert(hasFilter)
+```
+
+Your `.one` element should have a `filter` value of `blur(1px)`.
+
+```js
+const one = document.querySelector('.one');
+const oneFilter = getComputedStyle(one).filter;
+assert(oneFilter === 'blur(1px)');
+```
+
+Your `.two` element should have a `filter` value of `blur(1px)`.
+
+```js
+const two = document.querySelector('.two');
+const twoFilter = getComputedStyle(two).filter;
+assert(twoFilter === 'blur(1px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
new file mode 100644
index 0000000000..dafc3792ec
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
@@ -0,0 +1,95 @@
+---
+id: 60a3e3396c7b40068ad6998e
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Increase the `blur` of `.three` by 2 pixels.
+
+# --hints--
+
+You should set the `filter` property to `blur(2px)`.
+
+```js
+const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
+assert(filterFilter.length === 2);
+```
+
+Your `.three` element should have a `filter` value of `blur(2px)`.
+
+```js
+const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
+assert(threeFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
new file mode 100644
index 0000000000..9971a7dda8
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad6998f
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+The rectangles are too small and their edges don't have the soft quality of a painting.
+
+Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
+
+```js
+const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
+assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
new file mode 100644
index 0000000000..70123d3e87
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
@@ -0,0 +1,97 @@
+---
+id: 60a3e3396c7b40068ad69990
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 3px 3px #8f0401`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`.
+
+```js
+const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
+assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
new file mode 100644
index 0000000000..e7582ebc5a
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad69991
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+assert(hasBoxShadow);
+```
+
+Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
+
+```js
+const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
+assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
new file mode 100644
index 0000000000..f78535e86c
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
@@ -0,0 +1,101 @@
+---
+id: 60a3e3396c7b40068ad69992
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+The corners of each rectangle are still too sharp.
+
+Round each corner of the `.one` element by 9 pixels, using the `border-radius` property.
+
+# --hints--
+
+You should set the `border-radius` property to `9px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
+assert(hasBorderRadius);
+```
+
+Your `.one` element should have a `border-radius` value of `9px`.
+
+```js
+const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
+assert(oneBorderRadius === '9px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
new file mode 100644
index 0000000000..e99b91467f
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad69993
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Use the `border-radius` property on the `.two` selector, to set its top-left radius and bottom-right radius to `8px`, and top-right radius and bottom-left radius to `10px`.
+
+# --hints--
+
+You should set the `border-radius` property to `8px 10px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
+assert(hasBorderRadius);
+```
+
+Your `.two` element should have a `border-radius` value of `8px 10px`.
+
+```js
+const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
+assert(twoBorderRadius === '8px 10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
new file mode 100644
index 0000000000..41be8e8fd5
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69994
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners.
+
+Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels.
+
+# --hints--
+
+You should set the `border-radius` property to `30px 25px 60px 12px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
+assert(hasBorderRadius);
+```
+
+Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`.
+
+```js
+const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
+assert(threeBorderRadius === '30px 25px 60px 12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
new file mode 100644
index 0000000000..f5ebe9a726
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
@@ -0,0 +1,104 @@
+---
+id: 60a3e3396c7b40068ad69995
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Rotate each rectangle to give them more of an imperfect, hand-painted look.
+
+Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees.
+
+# --hints--
+
+You should set the `transform` property to `rotate(-0.6deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
+assert(hasTransform);
+```
+
+Your `.one` element should have a `transform` value of `rotate(-0.6deg)`.
+
+```js
+const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
+assert(oneTransform === 'rotate(-0.6deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
new file mode 100644
index 0000000000..3b25d4ac04
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69996
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Rotate the `.two` element clockwise by 0.4 degrees.
+
+# --hints--
+
+You should set the `transform` property to `rotate(0.4deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
+assert(hasTransform);
+```
+
+Your `.two` element should have a `transform` value of `rotate(0.4deg)`.
+
+```js
+const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
+assert(twoTransform === 'rotate(0.4deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
new file mode 100644
index 0000000000..a41a1976ff
--- /dev/null
+++ b/curriculum/challenges/korean/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
@@ -0,0 +1,180 @@
+---
+id: 60a3e3396c7b40068ad69997
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Rotate `.three` counter clockwise by 0.2 degrees.
+
+With this final step, your Rothko painting is now complete.
+
+# --hints--
+
+You should set the `transform` property to `rotate(-0.2deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
+assert(hasTransform);
+```
+
+Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
+
+```js
+const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
+assert(threeTransform === 'rotate(-0.2deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+  transform: rotate(-0.2deg);
+}
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
index d850b1e050..952a24c3fd 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
@@ -9,7 +9,7 @@ dashedName: step-3
 
 O elemento `p` é usado para criar um parágrafo de texto nos sites. Crie um elemento `p` abaixo do elemento `h2` e dê a ele o seguinte texto:
 
-`See more cat photos in our gallery.`
+`Everyone loves cute cats online!`
 
 # --hints--
 
@@ -25,13 +25,13 @@ Seu elemento `p` deve ter uma tag de fechamento. As tags de fechamento têm um c
 assert(code.match(/<\/p\>/));
 ```
 
-O texto do elemento `p` deve ser `See more cat photos in our gallery.` Você omitiu o texto ou tem um erro de digitação.
+Your `p` element's text should be `Everyone loves cute cats online!` You have either omitted the text or have a typo.
 
 ```js
 const extraSpacesRemoved = document
   .querySelector('p')
   .innerText.replace(/\s+/g, ' ');
-assert(extraSpacesRemoved.match(/see more cat photos in our gallery\.?$/i));
+assert.match(extraSpacesRemoved, /everyone loves cute cats online!$/i);
 ```
 
 O elemento `p` deve estar abaixo do elemento `h2`. Eles estão na ordem errada.
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
index e2a282cb7a..55dc294911 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
@@ -49,12 +49,9 @@ assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/i));
 O comentário deve estar acima do elemento `p`. Eles estão na ordem errada.
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
-    )
+assert.match(
+  code.replace(/\s/g, ''),
+  /<!--todo:addlinktocatphotos--><p>everyonelovescutecatsonline!<\/p>/i
 );
 ```
 
@@ -69,7 +66,7 @@ assert(
     <h2>Cat Photos</h2>
 --fcc-editable-region--
 
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
index 92b97cf086..26a335996f 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -55,10 +55,8 @@ A tag de fechamento do elemento `main` deve estar abaixo do elemento `p`. Eles e
 ```js
 const mainNode = document.querySelector('main');
 const pNode = document.querySelector('p');
-assert(
-  mainNode.contains(pNode) &&
-    pNode.textContent.toLowerCase().match(/see more cat photos in our gallery/)
-);
+assert.isTrue(mainNode.contains(pNode));
+assert.match(pNode.textContent.toLowerCase(), /everyone loves cute cats online!/);
 ```
 
 # --seed--
@@ -73,7 +71,7 @@ assert(
     <h1>CatPhotoApp</h1>
     <h2>Cat Photos</h2>
     <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 1f6f7925b4..4f65380640 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -74,14 +74,14 @@ Your code should have a `p` element. You have removed the `p` element from an ea
 assert(document.querySelector('p'));
 ```
 
-The text of the `p` element should be `See more cat photos in our gallery.` Do not change the text, spacing, or punctuation of the `p` element.
+The text of the `p` element should be `Everyone loves cute cats online!` Do not change the text, spacing, or punctuation of the `p` element.
 
 ```js
-assert(
+assert.match(
   document
     .querySelector('p')
-    .innerText.toLowerCase()
-    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
+    .innerText.toLowerCase(),
+    /everyone\s+loves\s+cute\s+cats\s+online!$/
 );
 ```
 
@@ -98,12 +98,12 @@ assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
     </main>
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 92ef311a23..ca9f8fc101 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -52,7 +52,7 @@ assert(collection.indexOf('P') < collection.indexOf('IMG'));
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
     </main>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
index aaace0b291..3ef9848ce6 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
@@ -36,19 +36,19 @@ assert(document.querySelector('img').src);
 O atributo `src` do elemento `img` deve estar definido como '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. Você omitiu o URL ou tem um erro de digitação. As verificações distinguem maiúsculas e minúsculas no URL.
 
 ```js
-assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
+assert.strictEqual(document.querySelector('img').src, 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
 ```
 
 Embora você tenha definido o `src` do elemento `img` com o URL correto, é recomendável sempre cercar o valor de um atributo com aspas.
 
 ```js
-assert(!/\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/);
 ```
 
 O elemento `img` deve ser fechado com `>` ou `/>`.
 
 ```js
-assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\1\s*\/?>/.test(code));
+assert.match(code, /<img\s+src\s*=\s*("|')\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\s*\1\s*\/?>/);
 ```
 
 # --seed--
@@ -62,7 +62,7 @@ assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img>
 --fcc-editable-region--
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
index 75a09a4f2f..adf18244d8 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
@@ -54,7 +54,7 @@ assert(altText.match(/A cute orange cat lying on its back\.?$/i));
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
 --fcc-editable-region--
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index 2cb0677114..91af1209b2 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -75,7 +75,7 @@ assert(
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index 1d3954639d..e0f1eaa142 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -15,7 +15,7 @@ Aqui está um exemplo de link com o texto `click here to go to freeCodeCamp.org`
 <a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>
 ```
 
-Adicione o texto `link to cat pictures` ao elemento de âncora. Ele se tornará o texto do link.
+Add the anchor text `cat photos` to the anchor element. Ele se tornará o texto do link.
 
 # --hints--
 
@@ -31,12 +31,12 @@ O elemento de âncora (`a`) deve ter uma tag de fechamento. As tags de fechament
 assert(code.match(/<\/a\>/));
 ```
 
-O elemento de âncora (`a`) deve conter o texto `link to cat pictures`. Certifique-se de colocar o texto do link entre as tags de abertura e de fechamentoa do elemento de âncora (`a`).
+Your anchor (`a`) element's text should be `cat photos`. Certifique-se de colocar o texto do link entre as tags de abertura e de fechamentoa do elemento de âncora (`a`).
 
 ```js
-assert(
-  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
-    'link to cat pictures'
+assert.strictEqual(
+  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' '),
+    'cat photos'
 );
 ```
 
@@ -51,7 +51,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <a href="https://freecatphotoapp.com"></a>
 --fcc-editable-region--
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
index 1307bd5247..a703858937 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa2407b521be39a3de7be1
-title: Passo 14
+title: Step 15
 challengeType: 0
-dashedName: step-14
+dashedName: step-15
 ---
 
 # --description--
@@ -25,22 +25,20 @@ O elemento `p` deve ter um elemento de âncora (`a`) aninhado com o texto `cat p
 
 ```js
 const anchor = document.querySelectorAll('p > a');
-assert(
-  anchor.length &&
-    anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+assert.isNotEmpty(anchor);
+assert.strictEqual(anchor[1]?.innerText?.toLowerCase().replace(/\s+/g, ' '), 'cat photos')
 ```
 
 O elemento de âncora (`a`) não tem um atributo `target`. Verifique se há um espaço depois do nome da tag de abertura e/ou se há espaços antes de todos os nomes dos atributos.
 
 ```js
-assert(document.querySelector('a').hasAttribute('target'));
+assert.isTrue(document.querySelectorAll('a')[1]?.hasAttribute('target'));
 ```
 
 O valor do atributo `target` deve ser `_blank`. Você omitiu o valor ou tem um erro de digitação. Lembre-se de que os valores dos atributos devem estar cercados com aspas.
 
 ```js
-assert(document.querySelector('a').getAttribute('target') === '_blank');
+assert.strictEqual(document.querySelectorAll('a')[1]?.getAttribute('target'), '_blank');
 ```
 
 # --seed--
@@ -54,6 +52,7 @@ assert(document.querySelector('a').getAttribute('target') === '_blank');
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
 --fcc-editable-region--
       <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
index 32a292ff77..1355440130 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa30b9eacea3f48c6300ad
-title: Step 15
+title: Step 17
 challengeType: 0
-dashedName: step-15
+dashedName: step-17
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert(document.querySelectorAll('a').length >= 2);
 You are missing a closing (`a`) tag after the image.
 
 ```js
-assert(document.querySelectorAll('a').length === 2);
+assert.lengthOf(document.querySelectorAll('a'), 3);
 ```
 
 Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
@@ -52,7 +52,7 @@ assert(code.match(/<\/a>/g).length >= 2);
 You should only add one closing anchor (`a`) tag. Please remove any extras.
 
 ```js
-assert(code.match(/<\/a>/g).length === 2);
+assert.lengthOf(code.match(/<\/a>/g), 3);
 ```
 
 Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
@@ -86,7 +86,7 @@ assert(document.querySelector('img').parentNode.nodeName === 'A');
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
index 4472aa1709..2af6420119 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa3589eacea3f48c6300ae
-title: Passo 18
+title: Step 20
 challengeType: 0
-dashedName: step-18
+dashedName: step-20
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
index 352d30fbba..5b95895d0b 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa371beacea3f48c6300af
-title: Passo 19
+title: Step 21
 challengeType: 0
-dashedName: step-19
+dashedName: step-21
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index 9e8bd51d52..74a7a8d1f4 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa37b9eacea3f48c6300b0
-title: Passo 20
+title: Step 22
 challengeType: 0
-dashedName: step-20
+dashedName: step-22
 ---
 
 # --description--
@@ -43,7 +43,7 @@ assert.equal(secondSectionLastElemNode?.nodeName , 'UL');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
index b9d65285e1..4fa1c88e3f 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb5ecbeacea3f48c6300b1
-title: Passo 21
+title: Step 23
 challengeType: 0
-dashedName: step-21
+dashedName: step-23
 ---
 
 # --description--
@@ -63,7 +63,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
index cc48ce043e..100b5ab4ee 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6250eacea3f48c6300b2
-title: Passo 22
+title: Step 24
 challengeType: 0
-dashedName: step-22
+dashedName: step-24
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert.isTrue(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curricu
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
index a1b8232434..6101bf048d 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb655eeacea3f48c6300b3
-title: Passo 23
+title: Step 25
 challengeType: 0
-dashedName: step-23
+dashedName: step-25
 ---
 
 # --description--
@@ -34,11 +34,7 @@ assert.equal(document.querySelectorAll('section')?.[1]?.lastElementChild?.nodeNa
 O elemento `img` da lasanha deve estar dentro do elemento `figure`.
 
 ```js
-assert(
-  document.querySelector('figure > img') &&
-    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
-      'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
-);
+assert.strictEqual(document.querySelector('figure > img')?.src.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg');
 ```
 
 # --seed--
@@ -52,7 +48,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
index e8856ecdcc..9c4cc3390e 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6a35eacea3f48c6300b4
-title: Passo 24
+title: Step 26
 challengeType: 0
-dashedName: step-24
+dashedName: step-26
 ---
 
 # --description--
@@ -82,7 +82,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
index 162e907b20..2eea06e867 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d0
-title: Passo 25
+title: Step 27
 challengeType: 0
-dashedName: step-25
+dashedName: step-27
 ---
 
 # --description--
@@ -61,7 +61,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
index 46f1a66e6b..73000d8e0e 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d1
-title: Passo 26
+title: Step 28
 challengeType: 0
-dashedName: step-26
+dashedName: step-28
 ---
 
 # --description--
@@ -55,7 +55,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
index a0557946eb..132473a208 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d2
-title: Passo 27
+title: Step 29
 challengeType: 0
-dashedName: step-27
+dashedName: step-29
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert([...document.querySelectorAll('ol')].length == 1);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
index 3a7e96257a..b716494e3e 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d3
-title: Passo 28
+title: Step 30
 challengeType: 0
-dashedName: step-28
+dashedName: step-30
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert.equal(document.querySelectorAll('main > section')?.[1]?.lastElementChild?
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
index 5f9d1b6d5e..1a733ec4ff 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d4
-title: Passo 32
+title: Step 34
 challengeType: 0
-dashedName: step-32
+dashedName: step-34
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
index 35cfd866c2..ea4336a279 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d5
-title: Passo 34
+title: Step 36
 challengeType: 0
-dashedName: step-34
+dashedName: step-36
 ---
 
 # --description--
@@ -67,7 +67,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
index 149555450c..668f308744 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d6
-title: Passo 35
+title: Step 37
 challengeType: 0
-dashedName: step-35
+dashedName: step-37
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
index faa9d96b50..345e2c663d 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d7
-title: Passo 36
+title: Step 38
 challengeType: 0
-dashedName: step-36
+dashedName: step-38
 ---
 
 # --description--
@@ -83,7 +83,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
index 6a2bcf5d3a..a8a5f7d8d2 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d8
-title: Step 37
+title: Step 39
 challengeType: 0
-dashedName: step-37
+dashedName: step-39
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.isTrue(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
index ad193eac22..62675982af 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d9
-title: Passo 40
+title: Step 42
 challengeType: 0
-dashedName: step-40
+dashedName: step-42
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
index 6ff5fe67f8..48916fb34e 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804da
-title: Passo 42
+title: Step 44
 challengeType: 0
-dashedName: step-42
+dashedName: step-44
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
index d93aea1610..e5a81e5184 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804db
-title: Passo 41
+title: Step 43
 challengeType: 0
-dashedName: step-41
+dashedName: step-43
 ---
 
 # --description--
@@ -49,7 +49,7 @@ assert.strictEqual(document.querySelector('input')?.getAttribute('required'), ''
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
index 6a4d3186e7..47c9644ef4 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dc
-title: Passo 44
+title: Step 46
 challengeType: 0
-dashedName: step-44
+dashedName: step-46
 ---
 
 # --description--
@@ -107,7 +107,7 @@ assert.match(radioInputElem?.nextSibling?.nodeValue?.replace(/\s+/g, ' '), /\s*I
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
index a1961865ed..78c8cba66b 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dd
-title: Step 45
+title: Step 47
 challengeType: 0
-dashedName: step-45
+dashedName: step-47
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
index 2f01a3eec1..be431dc0ab 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804de
-title: Passo 48
+title: Step 50
 challengeType: 0
-dashedName: step-48
+dashedName: step-50
 ---
 
 # --description--
@@ -68,9 +68,10 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
index dae896e212..8d3cc8c7e4 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804df
-title: Passo 46
+title: Step 48
 challengeType: 0
-dashedName: step-46
+dashedName: step-48
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert.match(document.querySelector('input')?.id, /^indoor$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
index 5a95b7193d..03e107503b 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e1
-title: Passo 50
+title: Step 52
 challengeType: 0
-dashedName: step-50
+dashedName: step-52
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
index 3bada7ccd5..541a89599d 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e2
-title: Passo 54
+title: Step 56
 challengeType: 0
-dashedName: step-54
+dashedName: step-56
 ---
 
 # --description--
@@ -76,7 +76,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
index 3dcca930bf..6ef936fd94 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e3
-title: Passo 58
+title: Step 60
 challengeType: 0
-dashedName: step-58
+dashedName: step-60
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
index 1175817c99..1043dbc990 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e5
-title: Passo 61
+title: Step 63
 challengeType: 0
-dashedName: step-61
+dashedName: step-63
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.isFalse(document.querySelectorAll('input[type="checkbox"]')?.[2]?.hasAttr
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
index eb3a64ba0a..209fa59d7b 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e7
-title: Passo 62
+title: Step 64
 challengeType: 0
-dashedName: step-62
+dashedName: step-64
 ---
 
 # --description--
@@ -48,7 +48,7 @@ assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
index 2cf58b0afc..f61e8c6e74 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e8
-title: Passo 63
+title: Step 65
 challengeType: 0
-dashedName: step-63
+dashedName: step-65
 ---
 
 # --description--
@@ -23,11 +23,11 @@ O elemento `footer` deve ter um elemento `p`. Certifique-se de adicionar uma tag
 assert(document.querySelector('footer > p'));
 ```
 
-O elemento `footer` deve ter uma tag de fechamento. As tags de fechamento têm um caractere `/` logo após o caractere `<`.
+Your `p` element should have a closing tag. As tags de fechamento têm um caractere `/` logo após o caractere `<`.
 
 ```js
 const pElemClosingTags = code.match(/<\/p\>/g);
-assert(pElemClosingTags && pElemClosingTags.length === 2);
+assert.lengthOf(pElemClosingTags, 3);
 ```
 
 O texto do elemento `p` deve ser `No Copyright - freeCodeCamp.org`. Você omitiu o texto, digitou o texto incorretamente ou ele não está entre as tags de abertura e fechamento do elemento `p`.
@@ -48,7 +48,7 @@ assert.match(extraSpacesRemoved, /No Copyright - freeCodeCamp\.org$/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
index e4355aa78e..9f6384095c 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e9
-title: Passo 64
+title: Step 66
 challengeType: 0
-dashedName: step-64
+dashedName: step-66
 ---
 
 # --description--
@@ -21,7 +21,7 @@ O elemento de âncora (`a`) deve ter uma tag de fechamento. As tags de fechament
 
 ```js
 const aElemClosingTags = code.match(/<\/a\>/g);
-assert(aElemClosingTags && aElemClosingTags.length === 3);
+assert.lengthOf(aElemClosingTags, 4);
 ```
 
 O elemento de âncora (`a`) deve ter o atributo `href` com o valor `https://www.freecodecamp.org`. Você pode ter omitido o atributo ou ter um erro de digitação.
@@ -59,7 +59,7 @@ assert.match(pText, /^no copyright - freecodecamp.org$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
index 646881c487..59b1f596e0 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ea
-title: Passo 65
+title: Step 67
 challengeType: 0
-dashedName: step-65
+dashedName: step-67
 ---
 
 # --description--
@@ -54,7 +54,7 @@ assert(noSpaces.match(/\<\/head\>\<body\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
index c3a3864c6c..630399133a 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804eb
-title: Passo 66
+title: Step 68
 challengeType: 0
-dashedName: step-66
+dashedName: step-68
 ---
 
 # --description--
@@ -56,7 +56,7 @@ assert(document.title && document.title.toLowerCase() === 'catphotoapp');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
index b53978e9ac..6905dfea6e 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ec
-title: Passo 67
+title: Step 69
 challengeType: 0
-dashedName: step-67
+dashedName: step-69
 ---
 
 # --description--
@@ -44,7 +44,7 @@ assert(extraSpacesRemoved.match(/\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
index b92c95f3cd..613a1bba5a 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ee
-title: Passo 68
+title: Step 70
 challengeType: 0
-dashedName: step-68
+dashedName: step-70
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\<html/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
index 0547fa3d7d..2c9148e7d0 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
@@ -1,8 +1,8 @@
 ---
 id: 5efada803cbd2bbdab94e332
-title: Passo 29
+title: Step 31
 challengeType: 0
-dashedName: step-29
+dashedName: step-31
 ---
 
 # --description--
@@ -42,16 +42,15 @@ A terceira imagem deve ter um atributo `src` com o valor de `https://cdn.freecod
 
 ```js
 const catsImg = document.querySelectorAll('figure > img')[1];
-assert(
-  catsImg &&
-    catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
+assert.strictEqual(
+  catsImg?.src?.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
 );
 ```
 
 Embora você tenha definido o valor de `src` com o URL correto, é recomendável sempre cercar o valor de um atributo com aspas.
 
 ```js
-assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/);
 ```
 
 # --seed--
@@ -65,7 +64,7 @@ assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/ca
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
index e59a15ee4c..dab62c9eaf 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae0543cbd2bbdab94e333
-title: Passo 30
+title: Step 32
 challengeType: 0
-dashedName: step-30
+dashedName: step-32
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
index c9732cb9f5..0603272e02 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae16e3cbd2bbdab94e334
-title: Passo 31
+title: Step 33
 challengeType: 0
-dashedName: step-31
+dashedName: step-33
 ---
 
 # --description--
@@ -88,7 +88,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
index cc5dd0b3f2..948c9dbfe8 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb23e70dc218d6c85f89b1
-title: Passo 38
+title: Step 40
 challengeType: 0
-dashedName: step-38
+dashedName: step-40
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(!/\<input\s+type\s*=\s*text/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
index e65f41133f..6f39ae4302 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb2c990dc218d6c85f89b2
-title: Passo 43
+title: Step 45
 challengeType: 0
-dashedName: step-43
+dashedName: step-45
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
index 294317315a..9ba39a9ad6 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc4f528d6a74d05e68af74
-title: Passo 56
+title: Step 58
 challengeType: 0
-dashedName: step-56
+dashedName: step-58
 ---
 
 # --description--
@@ -110,7 +110,7 @@ assert.match(code, />\s+<label\s+for\s*=\s*('|")loving/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
index c66b5194a1..9c771a8966 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc518e8d6a74d05e68af75
-title: Step 57
+title: Step 59
 challengeType: 0
-dashedName: step-57
+dashedName: step-59
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
index e34e3a022b..a4be6712d9 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc54138d6a74d05e68af76
-title: Passo 55
+title: Step 57
 challengeType: 0
-dashedName: step-55
+dashedName: step-57
 ---
 
 # --description--
@@ -34,7 +34,7 @@ assert.match(document.querySelector('input[type="checkbox"]')?.id, /^loving$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
index 867a0a5e81..d580171075 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc575c8d6a74d05e68af77
-title: Passo 59
+title: Step 61
 challengeType: 0
-dashedName: step-59
+dashedName: step-61
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
index e14c25d9ef..d1a90cfc35 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5f05a1d8e233dff4a68508d8
-title: Passo 47
+title: Step 49
 challengeType: 0
-dashedName: step-47
+dashedName: step-49
 ---
 
 # --description--
@@ -92,7 +92,7 @@ assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
index af985150de..28203a57ac 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07be6ef7412fbad0c5626b
-title: Passo 16
+title: Step 18
 challengeType: 0
-dashedName: step-16
+dashedName: step-18
 ---
 
 # --description--
@@ -40,14 +40,14 @@ Todo o elemento `section` deve estar dentro das tags de abertura e fechamento do
 assert(document.querySelector('section').parentNode.nodeName === 'MAIN');
 ```
 
-O elemento `h2`, o comentário, o elemento `p` e o elemento de âncora (`a`) devem estar entre as tags de abertura e fechamento do elemento `section`.
+The existing `h2`, comment, two `p` elements, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
 
 ```js
 const childrenOfSection = [...document.querySelector('section').childNodes];
 const foundElements = childrenOfSection.filter((child) => {
   return ['H2', 'A', 'P'].includes(child.nodeName);
 });
-assert(foundElements.length === 3);
+assert.lengthOf(foundElements, 4);
 ```
 
 O elemento `h1` não deve estar dentro do elemento `section`.
@@ -65,12 +65,12 @@ assert.isFalse(includesH1);
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
 
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
       <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
index 4f780347a2..07931ca01e 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07c98cdb9413cbd4b16750
-title: Passo 17
+title: Step 19
 challengeType: 0
-dashedName: step-17
+dashedName: step-19
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(foundElems.length === 2);
 --fcc-editable-region--
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
index 7aec5c7fa0..ab552ea7ed 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07fb1579dc934717801375
-title: Passo 33
+title: Step 35
 challengeType: 0
-dashedName: step-33
+dashedName: step-35
 ---
 
 # --description--
@@ -62,7 +62,7 @@ assert.lengthOf(document.querySelectorAll('main > section')?.[2]?.children, 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
index 4c9d47dbe7..ff940bae94 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d48e7b435f13ab6550051
-title: Passo 51
+title: Step 53
 challengeType: 0
-dashedName: step-51
+dashedName: step-53
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
index 6aea6f96e1..22af1ff297 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4ab1b435f13ab6550052
-title: Passo 52
+title: Step 54
 challengeType: 0
-dashedName: step-52
+dashedName: step-54
 ---
 
 # --description--
@@ -79,7 +79,7 @@ assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
index 5cea934f00..57757efa41 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4d04b435f13ab6550053
-title: Step 53
+title: Step 55
 challengeType: 0
-dashedName: step-53
+dashedName: step-55
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
index 84ea298f29..0e25bc9d2c 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a80975fc4bcae0edb3497
-title: Passo 49
+title: Step 51
 challengeType: 0
-dashedName: step-49
+dashedName: step-51
 ---
 
 # --description--
@@ -64,9 +64,10 @@ assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
index b08a2cc2f0..72d503adbc 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a89f1190aff21ae42105a
-title: Passo 60
+title: Step 62
 challengeType: 0
-dashedName: step-60
+dashedName: step-62
 ---
 
 # --description--
@@ -52,7 +52,7 @@ assert(energeticCheckbox.getAttribute('value').match(/^energetic$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
index 806fb5763a..e54b2e6710 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
@@ -1,8 +1,8 @@
 ---
 id: 62bb4009e3458a128ff57d5d
-title: Passo 69
+title: Step 71
 challengeType: 0
-dashedName: step-69
+dashedName: step-71
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
@@ -127,7 +127,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
new file mode 100644
index 0000000000..aa057f8e17
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
@@ -0,0 +1,57 @@
+---
+id: 671141d8e32fe934c26fa1be
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Add the words `See more` before the anchor element and `in our gallery` after the anchor element
+
+# --hints--
+
+You should use the existing anchor element, do not create a new one.
+
+```js
+assert.lengthOf(document.querySelectorAll('a'), 1);
+```
+
+You should have the words `See more` before the anchor element.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a>/)
+```
+
+You should have the words `in our gallery` after the anchor element.
+
+```js
+assert.match(code, /<a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+You should have `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery` in your code.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <a href="https://freecatphotoapp.com">cat photos</a>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
new file mode 100644
index 0000000000..78aae1394e
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
@@ -0,0 +1,48 @@
+---
+id: 671141f948cbab359e74cc93
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Add `p` tags to turn `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.` into a paragraph.
+
+# --hints--
+
+You should add a `p` element around `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.`.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P);
+assert.strictEqual(P.innerText, "See more cat photos in our gallery.");
+```
+
+You should still have the anchor element inside the new paragraph.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P.querySelector('a'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
new file mode 100644
index 0000000000..57b4139497
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -0,0 +1,57 @@
+---
+id: 671141feba228a35cefba82d
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Turn the text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+# --hints--
+
+There should be a new anchor element in the first `p` element.
+
+```js
+assert.exists(document.querySelector('p')?.querySelector('a'));
+```
+
+The anchor text should be `cute cats`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.innerText, "cute cats");
+```
+
+The `href` attrivute of the new anchor element should be `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.href, "https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg");
+```
+
+The text of the `p` element should still be `Everyone loves cute cats online!`.
+
+```js
+assert.strictEqual(document.querySelector('p')?.innerText, "Everyone loves cute cats online!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
new file mode 100644
index 0000000000..7256f63593
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
@@ -0,0 +1,47 @@
+---
+id: 671144cdcc01d73f7dd79dc9
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have added the link you can remove the comment.
+
+# --hints--
+
+There should not be any comment in your code.
+
+```js
+assert.notMatch(code, /<!--/);
+assert.notMatch(code, /-->/);
+```
+
+The text `TODO: Add link to cat photos` should not be present anymore.
+
+```js
+assert.notMatch(code, /TODO:?/i)
+assert.notMatch(code, /Add\s*link\s*to\s*cat\s*photos/i)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+--fcc-editable-region--
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
+      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
index 4605e603b7..23d2a9c100 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
@@ -1,8 +1,8 @@
 ---
 id: 7cf9b03d81a65668421804c3
-title: Passo 39
+title: Step 41
 challengeType: 0
-dashedName: step-39
+dashedName: step-41
 ---
 
 # --description--
@@ -66,7 +66,7 @@ assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cd5bac0e2df08b433b29d.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cd5bac0e2df08b433b29d.md
index f3f43965df..343c59fdcd 100644
--- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cd5bac0e2df08b433b29d.md
+++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cd5bac0e2df08b433b29d.md
@@ -7,43 +7,43 @@ dashedName: task-47
 
 # --description--
 
-The phrase `I hope you're all well` is a caring expression often used in emails, letters, and personal greetings. It reflects a kind gesture of wishing someone health and happiness.
+A frase `I hope you're all well` é uma expressão carinhosa frequentemente usada em e-mails, cartas e saudações pessoais. Reflete um gesto simpático de desejar saúde e felicidade a alguém.
 
-This phrase is versatile and can be used in both casual and formal settings.
+Essa frase é versátil e pode ser usada em contextos tanto casuais quanto formais.
 
 # --questions--
 
 ## --text--
 
-What does the phrase `I hope you're all well` mean?
+O que significa a frase `I hope you're all well`?
 
 ## --answers--
 
-It's a way to ask for help.
+É uma maneira de pedir ajuda.
 
 ### --feedback--
 
-This phrase is not typically used for asking for help, but for expressing good wishes.
+Essa frase não é tipicamente usada para pedir ajuda, mas sim para expressar bons desejos.
 
 ---
 
-It's a polite way to ask about someone's health and happiness.
+É uma maneira educada de perguntar sobre a saúde e a felicidade de alguém.
 
 ---
 
-It's a phrase used to express happiness.
+É uma frase usada para expressar felicidade.
 
 ### --feedback--
 
-While it conveys good wishes, it is not directly expressing personal happiness.
+Embora transmita bons desejos, não expressa diretamente a felicidade pessoal.
 
 ---
 
-It's a formal greeting used only in business meetings.
+É uma saudação formal usada apenas em reuniões de negócios.
 
 ### --feedback--
 
-This phrase can be used in both casual and formal settings, not just in business meetings.
+Essa frase pode ser usada tanto em contextos casuais quanto formais, não apenas em reuniões de negócios.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
index 2f77729749..4499e494c9 100644
--- a/curriculum/challenges/portuguese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
+++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is asynchronous programming?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to execute code in a sequential order.
 
 ---
 
-Placeholder distractor 2
+A technique to handle errors in synchronous code.
 
 ---
 
-Placeholder distractor 3
+A way to guarantee task order.
 
 #### --answer--
 
-Placeholder answer
+A method to execute code concurrently without blocking the main thread.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `async` attribute do when used in a `<script>` tag?
 
 #### --distractors--
 
-Placeholder distractor 1
+It allows the script to be executed after the HTML document has been completely parsed.
 
 ---
 
-Placeholder distractor 2
+It ensures the script runs in a synchronous manner.
 
 ---
 
-Placeholder distractor 3
+It delays the script execution until the browser is idle.
 
 #### --answer--
 
-Placeholder answer
+The script is downloaded in parallel with parsing the page and executed as soon as it is available.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Fetch API in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manage asynchronous callbacks.
 
 ---
 
-Placeholder distractor 2
+To create and manage cookies.
 
 ---
 
-Placeholder distractor 3
+To render dynamic HTML content.
 
 #### --answer--
 
-Placeholder answer
+To make network requests to servers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which `HTTP` method is used to send data to a server for processing?
 
 #### --distractors--
 
-Placeholder distractor 1
+`GET`
 
 ---
 
-Placeholder distractor 2
+`DELETE`
 
 ---
 
-Placeholder distractor 3
+`HEAD`
 
 #### --answer--
 
-Placeholder answer
+`POST`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `res.json()` method do in Express.js?
 
 #### --distractors--
 
-Placeholder distractor 1
+It retrieves data from a JSON file.
 
 ---
 
-Placeholder distractor 2
+It parses a JSON string into a JavaScript object.
 
 ---
 
-Placeholder distractor 3
+It sends raw JSON as a response without any processing.
 
 #### --answer--
 
-Placeholder answer
+It converts a JavaScript object to a JSON string and sends it as a response.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a promise in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to synchronize multiple operations.
 
 ---
 
-Placeholder distractor 2
+A callback function that runs after an operation.
 
 ---
 
-Placeholder distractor 3
+A technique to handle errors in asynchronous code.
 
 #### --answer--
 
-Placeholder answer
+An object that represents the eventual completion (or failure) of an asynchronous operation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does promise chaining allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Execute multiple asynchronous operations in parallel.
 
 ---
 
-Placeholder distractor 2
+Handle synchronous operations more efficiently.
 
 ---
 
-Placeholder distractor 3
+Retry failed operations automatically.
 
 #### --answer--
 
-Placeholder answer
+Pass the result of one promise to the next.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle successful completion of a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.catch()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.then()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle errors in a promise chain?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.then()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.catch()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the use of the `.finally()` method in a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+It returns the result of the promise.
 
 ---
 
-Placeholder distractor 2
+It stops the execution of subsequent promise handlers.
 
 ---
 
-Placeholder distractor 3
+It retries the promise if it fails.
 
 #### --answer--
 
-Placeholder answer
+It executes code after a promise is fulfilled or rejected, regardless of the outcome.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the syntax for declaring an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+`function myFunction() {}`
 
 ---
 
-Placeholder distractor 2
+`function async myFunction() {}`
 
 ---
 
-Placeholder distractor 3
+`async {} => ()`
 
 #### --answer--
 
-Placeholder answer
+`async function myFunction() {}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `await` keyword do in an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+It creates a new promise.
 
 ---
 
-Placeholder distractor 2
+It executes code immediately without waiting.
 
 ---
 
-Placeholder distractor 3
+It returns the result of the promise.
 
 #### --answer--
 
-Placeholder answer
+It pauses the execution of the function until the promise is resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Geolocation API?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manipulate HTML elements.
 
 ---
 
-Placeholder distractor 2
+To create and manage map elements.
 
 ---
 
-Placeholder distractor 3
+To control the device's camera.
 
 #### --answer--
 
-Placeholder answer
+To retrieve the geographical location of a device.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method of the Geolocation API is used to get the current position of the device?
 
 #### --distractors--
 
-Placeholder distractor 1
+`getLocation()`
 
 ---
 
-Placeholder distractor 2
+`getPosition()`
 
 ---
 
-Placeholder distractor 3
+`getLatLong()`
 
 #### --answer--
 
-Placeholder answer
+`getCurrentPosition()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What parameters can be passed to the `getCurrentPosition()` method?
 
 #### --distractors--
 
-Placeholder distractor 1
+Only the success callback function.
 
 ---
 
-Placeholder distractor 2
+Only options.
 
 ---
 
-Placeholder distractor 3
+One the error callback function.
 
 #### --answer--
 
-Placeholder answer
+Success and error callback functions, along with options.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What will the following code return? `fetch('https://api.example.com/data')`
 
 #### --distractors--
 
-Placeholder distractor 1
+The JSON response directly.
 
 ---
 
-Placeholder distractor 2
+An error if the URL is not reachable.
 
 ---
 
-Placeholder distractor 3
+A synchronous response.
 
 #### --answer--
 
-Placeholder answer
+A `Promise` that resolves to a `Response` object
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default HTTP method for the Fetch API?
 
 #### --distractors--
 
-Placeholder distractor 1
+`POST`
 
 ---
 
-Placeholder distractor 2
+`PUT`
 
 ---
 
-Placeholder distractor 3
+`DELETE`
 
 #### --answer--
 
-Placeholder answer
+`GET`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `Promise.all()` method do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resolves a single promise.
 
 ---
 
-Placeholder distractor 2
+It rejects the first promise that fails.
 
 ---
 
-Placeholder distractor 3
+It runs all promises sequentially.
 
 #### --answer--
 
-Placeholder answer
+It executes multiple promises concurrently and returns the results when all are resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you handle multiple asynchronous operations using async/await?
 
 #### --distractors--
 
-Placeholder distractor 1
+You must always use `.then()` for each operation.
 
 ---
 
-Placeholder distractor 2
+You cannot handle multiple operations with async/await.
 
 ---
 
-Placeholder distractor 3
+You must use callback functions for all operations.
 
 #### --answer--
 
-Placeholder answer
+You can use `await` for each operation in sequence and put them inside an async function.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is true about the `fetch` API?
 
 #### --distractors--
 
-Placeholder distractor 1
+It can only handle `GET` requests.
 
 ---
 
-Placeholder distractor 2
+It requires a callback function for handling responses.
 
 ---
 
-Placeholder distractor 3
+It only works in synchronous code.
 
 #### --answer--
 
-Placeholder answer
+It is used to make HTTP requests to a server.
 
diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
index f6d4cf0fd3..15991fc1d1 100644
--- a/curriculum/challenges/portuguese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
+++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What happens when there is too much content to fit in an element box?
 
 #### --distractors--
 
-Placeholder distractor 1
+Underflow
 
 ---
 
-Placeholder distractor 2
+Compression
 
 ---
 
-Placeholder distractor 3
+Padding
 
 #### --answer--
 
-Placeholder answer
+Overflow
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default behavior of CSS when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+Content is hidden
 
 ---
 
-Placeholder distractor 2
+Content is clipped
 
 ---
 
-Placeholder distractor 3
+Content is resized
 
 #### --answer--
 
-Placeholder answer
+Content is visible
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why does CSS typically avoid hiding content when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+To enhance page design by hiding irrelevant content
 
 ---
 
-Placeholder distractor 2
+To save memory and load pages faster
 
 ---
 
-Placeholder distractor 3
+To automatically fix broken layout issues
 
 #### --answer--
 
-Placeholder answer
+To prevent data loss and make issues noticeable
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you handle overflow in CSS to hide content or add scrollbars?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars
 
 ---
 
-Placeholder distractor 2
+Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars
 
 ---
 
-Placeholder distractor 3
+Use `overflow: none` to hide content and `overflow: show` to display scrollbars
 
 #### --answer--
 
-Placeholder answer
+Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you specify different scrolling behaviors for the x-axis and y-axis in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+By using `scroll-x` and `scroll-y` properties
 
 ---
 
-Placeholder distractor 2
+By using `overflow-x` and `overflow-y` separately in every case
 
 ---
 
-Placeholder distractor 3
+By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x`
 
 #### --answer--
 
-Placeholder answer
+By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform` CSS property allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Change the color and font style of an element
 
 ---
 
-Placeholder distractor 2
+Adjust the margin and padding of an element
 
 ---
 
-Placeholder distractor 3
+Modify the visibility and display of an element
 
 #### --answer--
 
-Placeholder answer
+Rotate, scale, skew, or translate an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform-box: fill-box` property do in an animation that rotates an element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resizes the element to fit the canvas during the transformation
 
 ---
 
-Placeholder distractor 2
+It changes the background of the element during transformation
 
 ---
 
-Placeholder distractor 3
+It sets the transform origin to the top-left corner of the element
 
 #### --answer--
 
-Placeholder answer
+It sets the transform origin to the center of the element's bounding box, allowing it to spin in place
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `transform-origin` property in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It controls the animation speed of transformed elements
 
 ---
 
-Placeholder distractor 2
+It defines the display type of transformed elements
 
 ---
 
-Placeholder distractor 3
+It sets the background of transformed elements
 
 #### --answer--
 
-Placeholder answer
+It specifies the point around which a transformation is applied to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does margin affect the size of an element in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Margin increases the actual size of the element's box
 
 ---
 
-Placeholder distractor 2
+Margin has no effect on the element's size or position
 
 ---
 
-Placeholder distractor 3
+Margin decreases the total area the element occupies on the page
 
 #### --answer--
 
-Placeholder answer
+Margin affects the total area an element occupies but is not part of the actual size of the box
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the content area of an element in CSS represent?
 
 #### --distractors--
 
-Placeholder distractor 1
+It defines the margins and padding around the element
 
 ---
 
-Placeholder distractor 2
+It specifies the border thickness of the element
 
 ---
 
-Placeholder distractor 3
+It controls the visibility of the element on the page
 
 #### --answer--
 
-Placeholder answer
+It contains the "real" content of the element, such as text, images, or videos
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the difference between `content-box` and `border-box` in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`content-box` includes padding and border, while `border-box` includes only content dimensions
 
 ---
 
-Placeholder distractor 2
+Both `content-box` and `border-box` include only the border dimensions
 
 ---
 
-Placeholder distractor 3
+`content-box` is used for 2D elements, while `border-box` is used for 3D elements
 
 #### --answer--
 
-Placeholder answer
+`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+To apply default styles to all elements for faster loading
 
 ---
 
-Placeholder distractor 2
+To minimize the size of CSS files by removing unused styles
 
 ---
 
-Placeholder distractor 3
+To optimize images and fonts for better performance
 
 #### --answer--
 
-Placeholder answer
+To remove default browser styling and create a consistent baseline for styling across different browsers
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What are the common types of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bootstrap Reset, Tailwind Reset, and Foundation Reset
 
 ---
 
-Placeholder distractor 2
+Simple Reset, Comprehensive Reset, and Adaptive Reset
 
 ---
 
-Placeholder distractor 3
+Minimal Reset, Advanced Reset, and Legacy Reset
 
 #### --answer--
 
-Placeholder answer
+Normalize.css, Eric Meyer's Reset, and HTML5 Reset
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `scale3d()` property value do in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It rotates an element in 3D space
 
 ---
 
-Placeholder distractor 2
+It skews an element on the x, y, and z axes
 
 ---
 
-Placeholder distractor 3
+It translates an element in 3D space
 
 #### --answer--
 
-Placeholder answer
+It scales an element along the x, y, and z axes
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the total width of an element calculated in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Total width = width + margin + padding + border
 
 ---
 
-Placeholder distractor 2
+Total width = width + margin + padding
 
 ---
 
-Placeholder distractor 3
+Total width = width + margin + border
 
 #### --answer--
 
-Placeholder answer
+Total width = width + left padding + right padding + left border + right border
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the filter property in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the layout of the element on the page
 
 ---
 
-Placeholder distractor 2
+It changes the background color and texture of an element
 
 ---
 
-Placeholder distractor 3
+It alters the size and position of an element
 
 #### --answer--
 
-Placeholder answer
+It applies visual effects like blur and saturation to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the `filter` property specified in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+As only a single function, where percentage values must be used
 
 ---
 
-Placeholder distractor 2
+As `block` or `inline`, with values expressed in pixels
 
 ---
 
-Placeholder distractor 3
+As `none` or multiple functions, but only percentage values are accepted
 
 #### --answer--
 
-Placeholder answer
+As `none` or one or more functions, where percentage values can also be expressed as decimals
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `contrast()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white
 
 ---
 
-Placeholder distractor 2
+Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it
 
 ---
 
-Placeholder distractor 3
+Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque
 
 #### --answer--
 
-Placeholder answer
+Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `hue-rotate()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the brightness of the input image based on degrees
 
 ---
 
-Placeholder distractor 2
+It rotates an element's size and position in the document
 
 ---
 
-Placeholder distractor 3
+It adjusts the saturation and contrast of the input image
 
 #### --answer--
 
-Placeholder answer
+It applies a hue rotation, where the `<angle>` value defines the degrees around the hue color circle
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens when two animated filters have different function list lengths in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+The shorter list's filters override the longer list's filters
 
 ---
 
-Placeholder distractor 2
+The filters are discarded and no animation is applied
 
 ---
 
-Placeholder distractor 3
+Only the first filter function in each list is animated
 
 #### --answer--
 
-Placeholder answer
+The longer list's missing equivalent filter functions are added to the shorter list using their initial values
 
diff --git a/curriculum/challenges/portuguese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/portuguese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
index cf7150d6ca..57a0443872 100644
--- a/curriculum/challenges/portuguese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
+++ b/curriculum/challenges/portuguese/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A database structured to recognize non-relation between stored items.
 
 ---
 
-Placeholder distractor 2
+A database that stores unstructured data.
 
 ---
 
-Placeholder distractor 3
+A flat file-based system.
 
 #### --answer--
 
-Placeholder answer
+A database structured to recognize relations between stored items.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a non-relational database differ from a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Non-relational databases use tables, while relational databases do not.
 
 ---
 
-Placeholder distractor 2
+Relational databases can store unstructured data.
 
 ---
 
-Placeholder distractor 3
+Non-relational databases are slower than relational databases.
 
 #### --answer--
 
-Placeholder answer
+Non-relational databases can store unstructured data.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `\l` command do when executed in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all schemas
 
 ---
 
-Placeholder distractor 2
+Lists all tables
 
 ---
 
-Placeholder distractor 3
+Connects to a database
 
 #### --answer--
 
-Placeholder answer
+Lists all databases
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following commands creates a new table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD TABLE`
 
 ---
 
-Placeholder distractor 2
+`NEW TABLE`
 
 ---
 
-Placeholder distractor 3
+`ALTER TABLE`
 
 #### --answer--
 
-Placeholder answer
+`CREATE TABLE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of a foreign key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To allow duplication of data.
 
 ---
 
-Placeholder distractor 2
+To uniquely identify a row in the table.
 
 ---
 
-Placeholder distractor 3
+To store large amounts of text data.
 
 #### --answer--
 
-Placeholder answer
+To create a relationship between two tables.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command will add a new column to an existing table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD COLUMN column_name TO table_name data_type;`
 
 ---
 
-Placeholder distractor 2
+`INSERT COLUMN column_name INTO table_name data_type;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name ADD COLUMN column_name data_type;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name ADD COLUMN column_name data_type;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What type of relationship exists when one record in Table A corresponds to one or more records in Table B?
 
 #### --distractors--
 
-Placeholder distractor 1
+One-to-One (1-1)
 
 ---
 
-Placeholder distractor 2
+Many-to-Many (m-m)
 
 ---
 
-Placeholder distractor 3
+Many-to-one(m-1)
 
 #### --answer--
 
-Placeholder answer
+One-to-Many (1-m)
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary purpose of normalization in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To increase the speed of data retrieval.
 
 ---
 
-Placeholder distractor 2
+To enforce security measures.
 
 ---
 
-Placeholder distractor 3
+To simplify the database schema.
 
 #### --answer--
 
-Placeholder answer
+To eliminate data redundancy and ensure data integrity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you delete a column from a table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 2
+`DELETE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name DELETE column_name;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name DROP COLUMN column_name;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the function of the `PRIMARY KEY` constraint in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+To link two tables together.
 
 ---
 
-Placeholder distractor 2
+To define the default value for a column.
 
 ---
 
-Placeholder distractor 3
+To allow null values in the column.
 
 #### --answer--
 
-Placeholder answer
+To ensure that the column contains unique values.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the command `\c` do in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all tables in the current database.
 
 ---
 
-Placeholder distractor 2
+Displays the current database connection details.
 
 ---
 
-Placeholder distractor 3
+Exits the `psql` shell.
 
 #### --answer--
 
-Placeholder answer
+Connects to the specified database.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command inserts data into a table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`PUT VALUES`
 
 ---
 
-Placeholder distractor 2
+`UPDATE INTO`
 
 ---
 
-Placeholder distractor 3
+`ADD DATA`
 
 #### --answer--
 
-Placeholder answer
+`INSERT INTO`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you rename a column in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`MODIFY COLUMN`
 
 ---
 
-Placeholder distractor 2
+`CHANGE COLUMN`
 
 ---
 
-Placeholder distractor 3
+`ALTER COLUMN`
 
 #### --answer--
 
-Placeholder answer
+`RENAME COLUMN`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which query will delete all records from the employees table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE ALL`
 
 ---
 
-Placeholder distractor 2
+`TRUNCATE employees`
 
 ---
 
-Placeholder distractor 3
+`DROP RECORDS`
 
 #### --answer--
 
-Placeholder answer
+`DELETE FROM employees`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which SQL constraint specifically ensures that a column can contain only unique values, allowing nulls?
 
 #### --distractors--
 
-Placeholder distractor 1
+`NOT NULL`
 
 ---
 
-Placeholder distractor 2
+`FOREIGN KEY`
 
 ---
 
-Placeholder distractor 3
+`PRIMARY KEY`
 
 #### --answer--
 
-Placeholder answer
+`UNIQUE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a relational database, what is an index used for?
 
 #### --distractors--
 
-Placeholder distractor 1
+To store additional metadata about tables.
 
 ---
 
-Placeholder distractor 2
+To ensure unique values in a column.
 
 ---
 
-Placeholder distractor 3
+To enforce data integrity.
 
 #### --answer--
 
-Placeholder answer
+To speed up data retrieval.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does a one-to-one (1-1) relationship represent in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Each record in Table A corresponds to one or more records in Table B.
 
 ---
 
-Placeholder distractor 2
+Each record in Table A corresponds to no records in Table B.
 
 ---
 
-Placeholder distractor 3
+Each record in Table A corresponds to multiple records in Table B and vice versa.
 
 #### --answer--
 
-Placeholder answer
+Each record in Table A corresponds to exactly one record in Table B.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command will list all tables in the current PostgreSQL database?
 
 #### --distractors--
 
-Placeholder distractor 1
+`\l`
 
 ---
 
-Placeholder distractor 2
+`SHOW TABLES`
 
 ---
 
-Placeholder distractor 3
+`\t`
 
 #### --answer--
 
-Placeholder answer
+`\d`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
new file mode 100644
index 0000000000..6a1bfc5b2b
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
@@ -0,0 +1,65 @@
+---
+id: 619665c9abd72906f3ad30f9
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You will be building a happy Flappy Penguin, and further practicing CSS transforms and animations in the process.
+
+Begin with linking your stylesheet to the page.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.exists(document.querySelector('link'));
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
new file mode 100644
index 0000000000..2572b413a4
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
@@ -0,0 +1,56 @@
+---
+id: 61967e74a8e3690ab6292daa
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`.
+
+# --hints--
+
+You should use the `body` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+You should use the `background` property in the `body` selector.
+
+```js
+assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background'));
+```
+
+You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
new file mode 100644
index 0000000000..67e0a51de0
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
@@ -0,0 +1,53 @@
+---
+id: 61968df2acd5550bf1616c34
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Normalize your page's sizing, by removing the `body` element's `margin` and `padding`.
+
+# --hints--
+
+You should give `body` a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+You should give `body` a `padding` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
new file mode 100644
index 0000000000..ec42f16803
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
@@ -0,0 +1,51 @@
+---
+id: 61968e9243a4090cc805531c
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Remove both the horizontal and vertical scrollbars, using only one property.
+
+# --hints--
+
+You should give `body` an `overflow` of `--fcc-expected--`. But found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
new file mode 100644
index 0000000000..75b3097c34
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
@@ -0,0 +1,64 @@
+---
+id: 61968f8877c6720d6d61aaf5
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within the `body`, add a `div` with a `class` of `ground`.
+
+# --hints--
+
+You should add a new `div`.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+You should give the `div` a `class` of `ground`.
+
+```js
+assert.include(document.querySelector('div')?.className, 'ground');
+```
+
+You should place the `div` within the `body`.
+
+```js
+assert.exists(document.querySelector('body > div.ground'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
new file mode 100644
index 0000000000..2e20bd3589
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
@@ -0,0 +1,66 @@
+---
+id: 619691693bc14b0e528f5a20
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`.
+
+# --hints--
+
+You should use the `.ground` selector.
+
+```js
+assert.match(code, /\.ground\s*\{/);
+```
+
+You should give the `.ground` element a `width` of `100vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw');
+```
+
+You should give the `.ground` element a `height` of `400px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
new file mode 100644
index 0000000000..afa5d6f94b
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
@@ -0,0 +1,58 @@
+---
+id: 6196928658b6010f28c39484
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`.
+
+# --hints--
+
+You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
new file mode 100644
index 0000000000..606e749c43
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
@@ -0,0 +1,73 @@
+---
+id: 619692ff79f5770fc6d8c0b4
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin.
+
+# --hints--
+
+You should add a new `div` within the `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 2);
+```
+
+You should give the `div` a `class` of `penguin`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin');
+```
+
+You should place `div.penguin` before `div.ground`.
+
+```js
+assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
new file mode 100644
index 0000000000..46ebd08c10
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
@@ -0,0 +1,75 @@
+---
+id: 6196990f966e8f10a40094f6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Target the `.penguin` element, and set its `width` and `height` to `300px`.
+
+# --hints--
+
+You should use the `.penguin` selector.
+
+```js
+assert.match(code, /\.penguin\s*\{/);
+```
+
+You should give `.penguin` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
+```
+
+You should give `.penguin` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
new file mode 100644
index 0000000000..860cde3323
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
@@ -0,0 +1,74 @@
+---
+id: 619699c10a0f6e11591d73c4
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`.
+
+# --hints--
+
+You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto');
+```
+
+You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
new file mode 100644
index 0000000000..3fa5992f53
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
@@ -0,0 +1,83 @@
+---
+id: 61969aa6acef5b12200f672e
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To create some scenery in the background, you will add two mountains.
+
+Above the `.penguin` element, add a `div` with a `class` of `left-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `left-mountain`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain');
+```
+
+You should place `.left-mountain` before `.penguin`.
+
+```js
+assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
new file mode 100644
index 0000000000..3568d09eeb
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
@@ -0,0 +1,89 @@
+---
+id: 61969c487ced6f12db8fef94
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`.
+
+# --hints--
+
+You should use the `.left-mountain` selector.
+
+```js
+assert.match(code, /\.left-mountain\s*\{/);
+```
+
+You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
+```
+
+You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
+```
+
+You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
new file mode 100644
index 0000000000..e8eba6e4ec
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
@@ -0,0 +1,76 @@
+---
+id: 61969d66cfcdba137d021558
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
new file mode 100644
index 0000000000..a182060c6c
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
@@ -0,0 +1,91 @@
+---
+id: 61969e7451455614217e901b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by.
+
+Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis.
+
+# --hints--
+
+You should give `.left-mountain` a `transform` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
+```
+
+You should use the `skew` function on `transform`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
+```
+
+You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
new file mode 100644
index 0000000000..dc15f9983e
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
@@ -0,0 +1,90 @@
+---
+id: 6196adc17f77a714d51485f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Set the stack level of the mountain element such that it remains directly behind the `.ground` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+You should not change the `z-index` of the `.ground` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
new file mode 100644
index 0000000000..870ce25dc1
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
@@ -0,0 +1,86 @@
+---
+id: 6196aead7ac7bf1584b17a7f
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`.
+
+# --hints--
+
+You should give `.left-mountain` a `margin-top` of `100px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px');
+```
+
+You should give `.ground` a `margin-top` of `-58px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
new file mode 100644
index 0000000000..b6ddd5cad7
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
@@ -0,0 +1,92 @@
+---
+id: 6196ce0415498d2463989e84
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 4);
+```
+
+You should give the `div` a `class` of `back-mountain`.
+
+```js
+assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain');
+```
+
+You should place `.back-mountain` after `.left-mountain`.
+
+```js
+assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
new file mode 100644
index 0000000000..bcbe4d3e9d
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
@@ -0,0 +1,100 @@
+---
+id: 6196cee94c6da1253809dff9
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`.
+
+# --hints--
+
+You should use the `.back-mountain` selector.
+
+```js
+assert.match(code, /\.back-mountain\s*\{/);
+```
+
+You should give `.back-mountain` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px');
+```
+
+You should give `.back-mountain` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px');
+```
+
+You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
new file mode 100644
index 0000000000..4bb9ea8634
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
@@ -0,0 +1,87 @@
+---
+id: 6196d00a5d7292262bc02f4c
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.back-mountain` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
new file mode 100644
index 0000000000..d3fd004502
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
@@ -0,0 +1,100 @@
+---
+id: 6196d0cda039d026f7f78d1e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1');
+```
+
+You should not change the `z-index` of the `.left-mountain` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
new file mode 100644
index 0000000000..cdd348db03
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
@@ -0,0 +1,131 @@
+---
+id: 6196d1ac33c68d27dcda5796
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`.
+
+# --hints--
+
+You should use the `transform` property to rotate the element.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.notEmpty(backMountain?.transform);
+} else {
+  assert.notEmpty(backMountain?.rotate);
+}
+```
+
+You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.equal(backMountain?.transform, 'rotate(45deg)');
+} else {
+  assert.equal(backMountain?.rotate, '45deg');
+}
+```
+
+You should give `.back-mountain` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
+```
+
+You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
+```
+
+You should give `.back-mountain` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
+```
+
+You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
new file mode 100644
index 0000000000..151831dbd7
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
@@ -0,0 +1,104 @@
+---
+id: 6196d213d99f16287bff22ae
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`.
+
+# --hints--
+
+You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 5);
+```
+
+You should give the new `div` element a `class` of `sun`.
+
+```js
+assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun');
+```
+
+You should place the new `div` element immediately after the `.back-mountain` element.
+
+```js
+assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
new file mode 100644
index 0000000000..61cf99cfee
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
@@ -0,0 +1,112 @@
+---
+id: 6196d2c0f22ca0293107c048
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`.
+
+# --hints--
+
+You should use the `.sun` selector.
+
+```js
+assert.match(code, /\.sun\s*\{/);
+```
+
+You should give `.sun` a `width` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px');
+```
+
+You should give `.sun` a `height` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px');
+```
+
+You should give `.sun` a `background-color` of `yellow`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
new file mode 100644
index 0000000000..f924e1d525
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
@@ -0,0 +1,105 @@
+---
+id: 6196d32d1340d829f0f6f57d
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle.
+
+# --hints--
+
+You should give `.sun` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute');
+```
+
+You should give `.sun` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
new file mode 100644
index 0000000000..969618185d
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
@@ -0,0 +1,107 @@
+---
+id: 6196d41d40bf9b2aaea5d520
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen.
+
+# --hints--
+
+You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px');
+```
+
+You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
new file mode 100644
index 0000000000..1253455f06
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
@@ -0,0 +1,118 @@
+---
+id: 6197cff995d03905b0cca8ad
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Your penguin will consist of two main sections: the head, and the body.
+
+Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`.
+
+# --hints--
+
+You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `penguin-head`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head');
+```
+
+You should give the second `div` a `class` of `penguin-body`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+--fcc-editable-region--
+    <div class="penguin">
+
+    </div>
+--fcc-editable-region--
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
new file mode 100644
index 0000000000..5256d40e7d
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
@@ -0,0 +1,125 @@
+---
+id: 6197f40a16afea068c7e60c8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex);
+```
+
+You should give the `.penguin` element a `z-index` of `4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4');
+```
+
+You should give `.penguin` a `position` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position);
+```
+
+You should give `.penguin` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
new file mode 100644
index 0000000000..c34e5dc0b5
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
@@ -0,0 +1,65 @@
+---
+id: 6197f667297bb30a552ce017
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`.
+
+# --hints--
+
+You should give `.ground` a `z-index` of `3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+You should give `.ground` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
new file mode 100644
index 0000000000..4f42960c10
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
@@ -0,0 +1,128 @@
+---
+id: 61993b72e874e709b8dfd666
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`.
+
+# --hints--
+
+You should use the `.penguin-head` selector.
+
+```js
+assert.match(code, /\.penguin-head\s*\{/);
+```
+
+You should give `.penguin-head` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%');
+```
+
+You should give `.penguin-head` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`.
+
+```js
+assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
new file mode 100644
index 0000000000..837b66e7b8
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
@@ -0,0 +1,122 @@
+---
+id: 61993cf26a8e0f0a553db223
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+_Most_ penguins do not have a square head.
+
+Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`.
+
+# --hints--
+
+You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`.
+
+```js
+// Maybe check for individual border-radius properties?
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
new file mode 100644
index 0000000000..42992c942d
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
@@ -0,0 +1,139 @@
+---
+id: 61993dbb35adf30b10d49e38
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.
+
+# --hints--
+
+You should use the `.penguin-body` selector.
+
+```js
+assert.match(code, /\.penguin-body\s*\{/);
+```
+
+You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
+```
+
+You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
+```
+
+You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
new file mode 100644
index 0000000000..1304f820e2
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
@@ -0,0 +1,133 @@
+---
+id: 61993e9adc9e9a0bb4d28fff
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Another interesting fact about penguins is that they do not have square bodies.
+
+Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body.
+
+# --hints--
+
+You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
new file mode 100644
index 0000000000..177fa37ed7
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
@@ -0,0 +1,139 @@
+---
+id: 6199409834ccaf0d10736596
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`.
+
+# --hints--
+
+You should use the `.penguin *` selector.
+
+```js
+assert.match(code, /\.penguin\s*\*\s*\{/);
+```
+
+You should give `.penguin *` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
new file mode 100644
index 0000000000..39d2becaa7
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
@@ -0,0 +1,154 @@
+---
+id: 6199429802b7c10dc79ff871
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-head` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
+```
+
+You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
+```
+
+You should give `.penguin-head` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
+```
+
+You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
new file mode 100644
index 0000000000..06adbcbaed
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
@@ -0,0 +1,156 @@
+---
+id: 619943285a41720e6370d985
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top);
+```
+
+You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%');
+```
+
+You should give `.penguin-body` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left);
+```
+
+You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
new file mode 100644
index 0000000000..841e0fac70
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
@@ -0,0 +1,146 @@
+---
+id: 619943876b706d0f35c01dbc
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex);
+```
+
+You should give the `.penguin-head` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
new file mode 100644
index 0000000000..71620d485d
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
@@ -0,0 +1,148 @@
+---
+id: 6199442866286d0ff421a4fc
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string.
+
+# --hints--
+
+You should use the `.penguin-body::before` selector.
+
+```js
+assert.match(code, /\.penguin-body::before\s*\{/);
+```
+
+You should give `.penguin-body::before` a `content` of `""`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
new file mode 100644
index 0000000000..95939a0a79
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
@@ -0,0 +1,145 @@
+---
+id: 619bcf239fc15905ecd66fce
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Position the pseudo-element relative to its closest positioned ancestor.
+
+# --hints--
+
+You should give `.penguin-body::before` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
new file mode 100644
index 0000000000..144a263043
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
@@ -0,0 +1,158 @@
+---
+id: 619be73b3c806006ccc00bb0
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`.
+
+# --hints--
+
+You should give `.penguin-body::before` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
+```
+
+You should give `.penguin-body::before` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%');
+```
+
+You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
new file mode 100644
index 0000000000..32e8d7967e
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Position the pseudo-element `10%` from the top and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
new file mode 100644
index 0000000000..f22f0e3944
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
@@ -0,0 +1,160 @@
+---
+id: 619be80062551a080e32c821
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`.
+
+# --hints--
+
+You should use the `border-radius` property to round off the crest.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
+```
+
+You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
new file mode 100644
index 0000000000..1c9a12db86
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
@@ -0,0 +1,152 @@
+---
+id: 619be8ce4ea49008c5bfbc30
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Increase the pseudo-element's transparency by `30%`.
+
+# --hints--
+
+You should give `.penguin-body::before` an `opacity` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
new file mode 100644
index 0000000000..088e47ba55
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
@@ -0,0 +1,166 @@
+---
+id: 619be946958c6009844f1dee
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`.
+
+# --hints--
+
+You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
+```
+
+You should give the second `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
new file mode 100644
index 0000000000..e25cfd80ce
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
@@ -0,0 +1,193 @@
+---
+id: 619c155df0063a0a3fec0e32
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`.
+
+# --hints--
+
+You should use the `.face` selector.
+
+```js
+assert.match(code, /\.face\s*\{/);
+```
+
+You should give `.face` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
+```
+
+You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
+```
+
+You should give `.face` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
+```
+
+You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
+```
+
+You should give `.face` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
+```
+
+You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
new file mode 100644
index 0000000000..999faf2cd7
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
@@ -0,0 +1,165 @@
+---
+id: 619c16debd0c270b01c5ce38
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`.
+
+# --hints--
+
+You should give `.face` a `border-radius` of `70% 70% 60% 60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
new file mode 100644
index 0000000000..1204286781
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
@@ -0,0 +1,169 @@
+---
+id: 619cfdf2e63ddf05feab86ad
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Position the `.face` elements so that they are `15%` from the top.
+
+# --hints--
+
+You should give `.face` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top);
+```
+
+You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
new file mode 100644
index 0000000000..3529e08289
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
@@ -0,0 +1,171 @@
+---
+id: 619d019488f98c06acbbb71a
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Currently, the two `.face` elements are on top of each other.
+
+Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element.
+
+# --hints--
+
+You should give a `class` of `left` to the first `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left');
+```
+
+You should give a `class` of `right` to the second `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
new file mode 100644
index 0000000000..cdb0268e02
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
@@ -0,0 +1,177 @@
+---
+id: 619d022dc8400c0763829a17
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Target the `.face` element with the `left` class, and position it `5%` left of its parent.
+
+# --hints--
+
+You should use the `.face.left` selector.
+
+```js
+assert.match(code, /\.face\.left\s*\{/);
+```
+
+You should give `.face.left` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left);
+```
+
+You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
new file mode 100644
index 0000000000..c81e359b35
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
@@ -0,0 +1,181 @@
+---
+id: 619d02c7bc95bf0827a5d296
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Target the `.face` element with the `right` class, and position it `5%` right of its parent.
+
+# --hints--
+
+You should use the `.face.right` selector.
+
+```js
+assert.match(code, /\.face\.right\s*\{/);
+```
+
+You should give `.face.right` a `right` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
+```
+
+You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+.face.left {
+  left: 5%;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
new file mode 100644
index 0000000000..7101cc6218
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
@@ -0,0 +1,184 @@
+---
+id: 619d033915012509031f309a
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Below the `.face.right` element, add a `div` element with a `class` of `chin`.
+
+# --hints--
+
+You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `chin`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.chin'));
+```
+
+You should place the `div` element below the `.face.right` element.
+
+```js
+assert.exists(document.querySelector('.face.right + .chin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
new file mode 100644
index 0000000000..8ff7447615
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
@@ -0,0 +1,210 @@
+---
+id: 619d03dadadb6509a16f4f5f
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`.
+
+# --hints--
+
+You should use the `.chin` selector.
+
+```js
+assert.match(code, /\.chin\s*\{/);
+```
+
+You should give `.chin` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width);
+```
+
+You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%');
+```
+
+You should give `.chin` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height);
+```
+
+You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%');
+```
+
+You should give `.chin` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor);
+```
+
+You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
new file mode 100644
index 0000000000..9177d13254
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
@@ -0,0 +1,206 @@
+---
+id: 619d0503e03a790a4179d463
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`.
+
+# --hints--
+
+You should give `.chin` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top);
+```
+
+You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%');
+```
+
+You should give `.chin` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left);
+```
+
+You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%');
+```
+
+You should give `.chin` a `border-radius` of `70% 70% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
new file mode 100644
index 0000000000..ca096090f1
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
@@ -0,0 +1,197 @@
+---
+id: 619d05c54dabca0b10058235
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+So far, the `.face` and `.chin` elements have the same `background-color`.
+
+Create a custom CSS property called `--penguin-face`, and set it to `white`.
+
+# --hints--
+
+You should use the `:root` selector.
+
+```js
+assert.match(code, /:root\s*\{/);
+```
+
+You should give `:root` a `--penguin-face` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face'));
+```
+
+You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
new file mode 100644
index 0000000000..207c0664d1
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
@@ -0,0 +1,197 @@
+---
+id: 619d0882f54bf40bdc4671ed
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Where relevant, replace property values with your `--penguin-face` variable.
+
+# --hints--
+
+You should give `.face` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should give `.chin` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should not use `var(--penguin-face)` in the `.penguin-body` selector.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
new file mode 100644
index 0000000000..a7caac10b5
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
@@ -0,0 +1,222 @@
+---
+id: 619d090cd8d6db0c93dc5087
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5);
+```
+
+You should give the first new `div` a `class` of `eye`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye'));
+```
+
+You should give the second new `div` a `class` of `eye`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.right'));
+```
+
+You should place `div.eye.left` after `div.chin`.
+
+```js
+assert.exists(document.querySelector('.chin + .eye.left'));
+```
+
+You should place `div.eye.right` after `div.eye.left`.
+
+```js
+assert.exists(document.querySelector('.eye.left + .eye.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
new file mode 100644
index 0000000000..e2f3ce9e93
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
@@ -0,0 +1,207 @@
+---
+id: 619d0b51ca42ed0d74582186
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`.
+
+# --hints--
+
+You should use the `.eye` selector.
+
+```js
+assert.match(code, /\.eye\s*\{/);
+```
+
+You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%');
+```
+
+You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%');
+```
+
+You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
new file mode 100644
index 0000000000..a4e7d18c12
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
@@ -0,0 +1,200 @@
+---
+id: 619d0bc9cb05360e1bf549c3
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%');
+```
+
+You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
new file mode 100644
index 0000000000..b567a24805
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
@@ -0,0 +1,215 @@
+---
+id: 619d0c1594c38c0ebae75878
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent.
+
+# --hints--
+
+You should use the `.eye.left` selector.
+
+```js
+assert.match(code, /\.eye\.left\s*\{/);
+```
+
+You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%');
+```
+
+You should use the `.eye.right` selector.
+
+```js
+assert.match(code, /\.eye\.right\s*\{/);
+```
+
+You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
new file mode 100644
index 0000000000..2d324e7251
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
@@ -0,0 +1,225 @@
+---
+id: 619d0d18ca99870f884a7bff
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Within each `.eye` element, add a `div` with a `class` of `eye-lid`.
+
+# --hints--
+
+You should add one `div` element within `.eye.left`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
+```
+
+You should add one `div` element within `.eye.right`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
+```
+
+You should give the first new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.left > div.eye-lid'));
+```
+
+You should give the second new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.right > div.eye-lid'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+
+        </div>
+        <div class="eye right">
+
+        </div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
new file mode 100644
index 0000000000..224cfce88b
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
@@ -0,0 +1,227 @@
+---
+id: 619d0daf214542102739b0da
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`.
+
+# --hints--
+
+You should use the `.eye-lid` selector.
+
+```js
+assert.match(code, /\.eye-lid\s*\{/);
+```
+
+You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%');
+```
+
+You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%');
+```
+
+You should give `.eye-lid` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
new file mode 100644
index 0000000000..e779df5c2d
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
@@ -0,0 +1,226 @@
+---
+id: 619d0e56f9ca9710fcb974e3
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%');
+```
+
+You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%');
+```
+
+You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
new file mode 100644
index 0000000000..ed405abe92
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
@@ -0,0 +1,247 @@
+---
+id: 619d0eec0ac40611b41e2ccc
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7);
+```
+
+You should give the first new `div` a `class` of `blush`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush'));
+```
+
+You should give the second new `div` a `class` of `blush`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.right'));
+```
+
+You should place `.blush.right` after `.blush.left`.
+
+```js
+assert.exists(document.querySelector('.blush.left + .blush.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
new file mode 100644
index 0000000000..a346767374
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
@@ -0,0 +1,238 @@
+---
+id: 619d0fc9825c271253df28d4
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`.
+
+# --hints--
+
+You should use the `.blush` selector.
+
+```js
+assert.match(code, /\.blush\s*\{/);
+```
+
+You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%');
+```
+
+You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%');
+```
+
+You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
new file mode 100644
index 0000000000..78310b8e23
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
@@ -0,0 +1,231 @@
+---
+id: 619d102d786c3d13124c37c6
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%');
+```
+
+You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
new file mode 100644
index 0000000000..9431c4764e
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
@@ -0,0 +1,246 @@
+---
+id: 619d107edf7ddf13cc77106a
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent.
+
+# --hints--
+
+You should use the `.blush.left` selector.
+
+```js
+assert.match(code, /\.blush\.left\s*\{/);
+```
+
+You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%');
+```
+
+You should use the `.blush.right` selector.
+
+```js
+assert.match(code, /\.blush\.right\s*\{/);
+```
+
+You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
new file mode 100644
index 0000000000..39348186b5
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
@@ -0,0 +1,271 @@
+---
+id: 619d10cc98145f14820399c5
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9);
+```
+
+You should give the first new `div` a `class` of `beak`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak'));
+```
+
+You should give the second new `div` a `class` of `beak`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `top`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.top'));
+```
+
+You should give the second new `div` a `class` of `bottom`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.bottom'));
+```
+
+You should place `div.beak.top` after `div.blush.right`.
+
+```js
+assert.exists(document.querySelector('.blush.right + .beak.top'));
+```
+
+You should place `div.beak.bottom` after `div.beak.top`.
+
+```js
+assert.exists(document.querySelector('.beak.top + .beak.bottom'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
new file mode 100644
index 0000000000..ea381856af
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
@@ -0,0 +1,256 @@
+---
+id: 619d115e2adcd71538e82ebb
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should use the `.beak` selector.
+
+```js
+assert.match(code, /\.beak\s*\{/);
+```
+
+You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%');
+```
+
+You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange');
+```
+
+You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
new file mode 100644
index 0000000000..d1617d8dce
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
@@ -0,0 +1,262 @@
+---
+id: 619d11e6d5ef9515d2a16033
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent.
+
+# --hints--
+
+You should use the `.beak.top` selector.
+
+```js
+assert.match(code, /\.beak\.top\s*\{/);
+```
+
+You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%');
+```
+
+You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%');
+```
+
+You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
new file mode 100644
index 0000000000..e580633578
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
@@ -0,0 +1,267 @@
+---
+id: 619d129a417d0716a94de913
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`.
+
+# --hints--
+
+You should use the `.beak.bottom` selector.
+
+```js
+assert.match(code, /\.beak\.bottom\s*\{/);
+```
+
+You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%');
+```
+
+You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%');
+```
+
+You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
new file mode 100644
index 0000000000..4773a10cef
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
@@ -0,0 +1,267 @@
+---
+id: 619d1340361095175f4b5115
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element.
+
+# --hints--
+
+You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
+```
+
+You should give the new `div` a `class` of `shirt`.
+
+```js
+assert.exists(document.querySelector('.penguin > div.shirt'));
+```
+
+You should place the new `div` before `.penguin-body`.
+
+```js
+assert.exists(document.querySelector('.shirt + .penguin-body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
new file mode 100644
index 0000000000..ff117fcdd8
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
@@ -0,0 +1,263 @@
+---
+id: 619d15797b580c1828b05426
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Within the `.shirt` element, add a `div` with the following emoji as content: 💜
+
+# --hints--
+
+You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
+```
+
+You should give the new `div` a content of `💜`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > div')?.textContent, '💜');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
new file mode 100644
index 0000000000..b0330c317b
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
@@ -0,0 +1,264 @@
+---
+id: 619d15d955d9d418c4487bbc
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS`
+
+# --hints--
+
+You should add one `p` element within `.shirt`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > p')?.length, 1);
+```
+
+You should give the `p` element the content `I CSS`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+        <div>💜</div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
new file mode 100644
index 0000000000..2ca7d6a5d8
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
@@ -0,0 +1,278 @@
+---
+id: 619d1629a8adc61960ca8b40
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`.
+
+# --hints--
+
+You should use the `.shirt` selector.
+
+```js
+assert.match(code, /\.shirt\s*\{/);
+```
+
+You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px');
+```
+
+You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif');
+```
+
+You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
new file mode 100644
index 0000000000..c21bb0f24d
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
@@ -0,0 +1,272 @@
+---
+id: 619d1c5fc9f8941a400955da
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+In some browsers, the _heart_ emoji may look slightly different from the previous step. This is because some of the character's properties were overridden by the `font-weight` style of `bold`.
+
+Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value.
+
+# --hints--
+
+You should use the `.shirt div` selector to target the `div` with the heart emoji.
+
+```js
+assert.match(code, /\.shirt div\s*\{/);
+```
+
+You should give the `.shirt div` a `font-weight` of `initial` or `normal`.
+
+```js
+assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
new file mode 100644
index 0000000000..79b1e394fb
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
@@ -0,0 +1,273 @@
+---
+id: 619d1dab9ff3421ae1976991
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent.
+
+# --hints--
+
+You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px');
+```
+
+You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+.shirt div {
+  font-weight: initial;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
new file mode 100644
index 0000000000..0c23ce14f1
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
@@ -0,0 +1,281 @@
+---
+id: 619d1deb8b04811b8839ffe4
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element.
+
+# --hints--
+
+You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px');
+```
+
+You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px');
+```
+
+You should give the `.shirt` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
new file mode 100644
index 0000000000..e650139f7e
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
@@ -0,0 +1,272 @@
+---
+id: 619d1e7a8e81a61c5a819dc4
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+For the shirt's final touch, set the `color` to `#6a6969`.
+
+# --hints--
+
+You should give `.shirt` a `color` of `#6a6969`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
new file mode 100644
index 0000000000..a3dc1fdbf5
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
@@ -0,0 +1,306 @@
+---
+id: 619d1ed33c9a071cf657a0d6
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Fun fact: Penguins cannot stand without at least two feet.
+
+Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `foot`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot'));
+```
+
+You should give the second new `div` a `class` of `foot`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.right'));
+```
+
+You should place `.foot.right` after `.foot.left`.
+
+```js
+assert.exists(document.querySelector('.foot.left + .foot.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
new file mode 100644
index 0000000000..f685b84cb6
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
@@ -0,0 +1,295 @@
+---
+id: 619d1fb5d244c31db8a7fdb7
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`.
+
+# --hints--
+
+You should use the `.foot` selector.
+
+```js
+assert.match(code, /\.foot\s*\{/);
+```
+
+You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%');
+```
+
+You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%');
+```
+
+You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
new file mode 100644
index 0000000000..e26cf4e13a
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
@@ -0,0 +1,288 @@
+---
+id: 619d204bd73ae51e743b8e94
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%');
+```
+
+You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
new file mode 100644
index 0000000000..b4d5cd859d
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
@@ -0,0 +1,304 @@
+---
+id: 619d20b12996101f430920fb
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+The penguin's beak and feet share the same `color`.
+
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-picorna` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna'));
+```
+
+You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange');
+```
+
+You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+  top: 85%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
new file mode 100644
index 0000000000..d2083801b8
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
@@ -0,0 +1,304 @@
+---
+id: 619d21fe6a3f9b2016be9d9d
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent.
+
+# --hints--
+
+You should use the `.foot.left` selector.
+
+```js
+assert.match(code, /\.foot\.left\s*\{/);
+```
+
+You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%');
+```
+
+You should use the `.foot.right` selector.
+
+```js
+assert.match(code, /\.foot\.right\s*\{/);
+```
+
+You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
new file mode 100644
index 0000000000..003b9709c0
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
@@ -0,0 +1,312 @@
+---
+id: 619d229b0e542520cd91c685
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`.
+
+# --hints--
+
+You should give `.foot.left` a `transform` of `rotate(80deg)`.
+
+```js
+const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left');
+
+if (leftFoot?.transform) {
+  assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)');
+} else {
+  assert.equal(leftFoot.getPropVal('rotate', true), '80deg');
+}
+```
+
+You should give `.foot.right` a `transform` of `rotate(-80deg)`.
+
+```js
+const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right');
+
+if (rightFoot?.transform) {
+  assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)');
+} else {
+  assert.equal(rightFoot.getPropVal('rotate', true), '-80deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.foot.left {
+  left: 25%;
+
+}
+
+.foot.right {
+  right: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
new file mode 100644
index 0000000000..ef45038dbc
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
@@ -0,0 +1,295 @@
+---
+id: 619d23089e787e216a7043d6
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element.
+
+# --hints--
+
+You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
new file mode 100644
index 0000000000..906076ce8b
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
@@ -0,0 +1,328 @@
+---
+id: 619d237a107c10221ed743fa
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Fun fact: Penguins cannot fly without wings.
+
+Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4);
+```
+
+You should give the first new `div` a `class` of `arm`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm'));
+```
+
+You should give the second new `div` a `class` of `arm`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.right'));
+```
+
+You should place `.arm.right` after `.arm.left`.
+
+```js
+assert.exists(document.querySelector('.arm.left + .arm.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
new file mode 100644
index 0000000000..94dcb78521
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
@@ -0,0 +1,317 @@
+---
+id: 619d26b12e651022d80cd017
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`.
+
+# --hints--
+
+You should use the `.arm` selector.
+
+```js
+assert.match(code, /\.arm\s*\{/);
+```
+
+You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%');
+```
+
+You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
+
+```js
+assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
new file mode 100644
index 0000000000..a3333bcfba
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
@@ -0,0 +1,332 @@
+---
+id: 619d2712853306238f41828e
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-skin` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin'));
+```
+
+You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))');
+```
+
+You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    gray,
+    rgb(209, 210, 199)
+  );
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
new file mode 100644
index 0000000000..b897e4cc61
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
@@ -0,0 +1,340 @@
+---
+id: 619d2b7a84e78b246f2d17a2
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent.
+
+# --hints--
+
+You should use the `.arm.left` selector.
+
+```js
+assert.match(code, /\.arm\.left\s*\{/);
+```
+
+You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%');
+```
+
+You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%');
+```
+
+You should use the `.arm.right` selector.
+
+```js
+assert.match(code, /\.arm\.right\s*\{/);
+```
+
+You should give `.arm.right` a `top` of `0%`.
+
+```js
+assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top);
+```
+
+You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
new file mode 100644
index 0000000000..a677c9a443
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
@@ -0,0 +1,325 @@
+---
+id: 619d2bd9c1d43c2526e96f1f
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent.
+
+# --hints--
+
+You should use the `transform-origin` property to do this.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`.
+
+```js
+assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
new file mode 100644
index 0000000000..ce148c7f62
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
@@ -0,0 +1,326 @@
+---
+id: 619d2d4e80400325ff89664a
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis.
+
+# --hints--
+
+You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left');
+
+if (leftArm?.rotate && leftArm?.transform) {
+  assert.equal(leftArm.getPropVal('rotate', true), '130deg');
+  assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)');
+} else {
+  assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
new file mode 100644
index 0000000000..7b8d308ed3
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
@@ -0,0 +1,326 @@
+---
+id: 619d2ebc81ba81271460850d
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+Rotate the right arm by `45deg` counterclockwise.
+
+# --hints--
+
+You should give `.arm.right` a `transform` of `rotate(-45deg)`.
+
+```js
+const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right');
+
+if (rightArm?.transform) {
+  assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)');
+} else {
+  assert.equal(rightArm?.getPropVal('rotate', true), '-45deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+--fcc-editable-region--
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
new file mode 100644
index 0000000000..cb6dc37d62
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
@@ -0,0 +1,327 @@
+---
+id: 619d2f0e9440bc27caee1cec
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Fun fact: Most, if not all, flippers are not naturally rectangles.
+
+Give the `.arm` elements' top-left, top-right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`.
+
+# --hints--
+
+You should give `.arm` a `border-radius` of `30% 30% 30% 120%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
new file mode 100644
index 0000000000..81854db2b7
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
@@ -0,0 +1,323 @@
+---
+id: 619d2fd3ff4f772882e3d998
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element.
+
+# --hints--
+
+You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
new file mode 100644
index 0000000000..f11d2a97f4
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
@@ -0,0 +1,333 @@
+---
+id: 619d30350883802921bfcccc
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Now, you are going to use CSS animations to make the penguin wave.
+
+Define a new `@keyframes` named `wave`.
+
+# --hints--
+
+You should define a new `@keyframes` rule.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes'));
+```
+
+You should give the `@keyframes` rule a name of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
new file mode 100644
index 0000000000..3294c31569
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
@@ -0,0 +1,351 @@
+---
+id: 619d324f5915c929f36ae91d
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Give `wave` four waypoints starting at `10%`, and incrementing by `10%`.
+
+# --hints--
+
+You should add a `10%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
+```
+
+You should add a `20%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
+```
+
+You should add a `30%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
+```
+
+You should add a `40%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
+```
+
+You should have 4 waypoints in your keyframe.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
new file mode 100644
index 0000000000..74235426b5
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
@@ -0,0 +1,347 @@
+---
+id: 619d32c7fa21f32aaa91d499
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%');
+const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, '');
+const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
new file mode 100644
index 0000000000..ac97b33ea2
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
@@ -0,0 +1,347 @@
+---
+id: 619d333b738e3c2b5d58b095
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%');
+const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
new file mode 100644
index 0000000000..fd1c9193d0
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
@@ -0,0 +1,362 @@
+---
+id: 619d337765b9f02c10e93722
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+For the third and fourth waypoints, repeat the `transform` pattern once more.
+
+# --hints--
+
+You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%');
+const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%');
+const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
new file mode 100644
index 0000000000..caa7a1fe0a
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
@@ -0,0 +1,357 @@
+---
+id: 619d33c51140292cc5a21742
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function.
+
+# --hints--
+
+You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave');
+```
+
+You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s');
+```
+
+You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite');
+```
+
+You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
new file mode 100644
index 0000000000..e8ab0952d4
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
@@ -0,0 +1,347 @@
+---
+id: 619d3482f505452d861d0f62
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions.
+
+# --hints--
+
+You should use the `.penguin:active` selector.
+
+```js
+assert.match(code, /\.penguin:active\s*\{/);
+```
+
+You should give `.penguin:active` a `transform` of `scale(1.5)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
new file mode 100644
index 0000000000..3530454295
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
@@ -0,0 +1,346 @@
+---
+id: 619d3561a951bf2e41a24f10
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+When you activate the `.penguin` element, it might look as though you can drag it around. This is not true.
+
+Indicate this to users, by giving the active element a `cursor` property of `not-allowed`.
+
+# --hints--
+
+You should give `.penguin:active` a `cursor` property of `not-allowed`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin:active {
+  transform: scale(1.5);
+
+}
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
new file mode 100644
index 0000000000..b2fd620c1f
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
@@ -0,0 +1,357 @@
+---
+id: 619d36103839c82efa95dd34
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`.
+
+# --hints--
+
+You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s');
+```
+
+You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out');
+```
+
+You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+
+}
+--fcc-editable-region--
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
new file mode 100644
index 0000000000..18d3c26b52
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
@@ -0,0 +1,670 @@
+---
+id: 619d3711d04d623000013e9e
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element.
+
+Congratulations! You have completed the Flappy Penguin Workshop.
+
+# --hints--
+
+You should give `.ground` a `height` of `calc(100vh - 300px)`.
+
+```js
+assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: calc(100vh - 300px);
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
new file mode 100644
index 0000000000..9d306c557a
--- /dev/null
+++ b/curriculum/challenges/portuguese/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Normalize your page, by setting the `width` to `100%`, and `height` to `100vh`.
+
+# --hints--
+
+You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
index b1f394d825..cdf31ee15a 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
@@ -17,22 +17,36 @@ gradient-type(
 );
 ```
 
-Jaza `.bb3` kwa `repeating-linear-gradient`. Tumia `90deg` kwa mwelekeo, `building-color3` yako kwa rangi mbili za kwanza, na `window-color3` kwa `15%` kwa za tatu. Usipotaja umbali wa rangi, itatumia thamani zinazoeleweka. Katika hali hii, rangi mbili za kwanza zitabadilika kuwa `0%` na `7.5%` kwa sababu inaanzia `0%` na `7.5%` ni nusu ya `15%`.
+Jaza `.bb3` kwa `repeating-linear-gradient`. Tumia `90deg` kwa mwelekeo, `building-color3` yako kwa rangi mbili za kwanza, na `window-color3` kwa `15%` kwa za tatu.
+
+When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`, so you do not need to set them.
 
 # --hints--
 
-Unapaswa kuipa `.bb3` `background` kwa kutumia `repeating-linear-gradient`.
+You should give `.bb3` a `background` using `repeating-linear-gradient`.
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
 ```
 
-Unapaswa kutumia `90deg` kwa mwelekeo katika hoja ya kwanza ya `repeating-linear-gradient`.
+You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`.
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
 ```
 
+You should not set the percentage for the first color.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "var(--building-color3)0%");
+```
+
+You should not set the percentage for the second color.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "var(--building-color3)7.5%");
+```
+
 Unapaswa kutumia `--building-color3` kwa rangi mbili za kwanza.
 
 ```js
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
index 7a76a2c442..4157bc4055 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
@@ -9,7 +9,7 @@ dashedName: step-3
 
 The `p` element is used to create a paragraph of text on websites. Create a `p` element below your `h2` element and give it the following text:
 
-`See more cat photos in our gallery.`
+`Everyone loves cute cats online!`
 
 # --hints--
 
@@ -25,13 +25,13 @@ Kipengele chako cha `p` kinapaswa kuwa na tagi ya kufunga. Tagi za kufunga zina
 assert(code.match(/<\/p\>/));
 ```
 
-Your `p` element's text should be `See more cat photos in our gallery.` You have either omitted the text or have a typo.
+Your `p` element's text should be `Everyone loves cute cats online!` You have either omitted the text or have a typo.
 
 ```js
 const extraSpacesRemoved = document
   .querySelector('p')
   .innerText.replace(/\s+/g, ' ');
-assert(extraSpacesRemoved.match(/see more cat photos in our gallery\.?$/i));
+assert.match(extraSpacesRemoved, /everyone loves cute cats online!$/i);
 ```
 
 Kipengele chako cha `p` kinapaswa kuwa chini ya kipengele chako cha `h2`. Unazo katika mpangilio mbaya.
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
index ab12814697..0cf48789ae 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
@@ -49,12 +49,9 @@ assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/i));
 Your comment should be above the `p` element. You have them in the wrong order.
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
-    )
+assert.match(
+  code.replace(/\s/g, ''),
+  /<!--todo:addlinktocatphotos--><p>everyonelovescutecatsonline!<\/p>/i
 );
 ```
 
@@ -69,7 +66,7 @@ assert(
     <h2>Cat Photos</h2>
 --fcc-editable-region--
 
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
index c07c14b572..04ec536845 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -55,10 +55,8 @@ Your `main` element's closing tag should be below the `p` element. Unazo katika
 ```js
 const mainNode = document.querySelector('main');
 const pNode = document.querySelector('p');
-assert(
-  mainNode.contains(pNode) &&
-    pNode.textContent.toLowerCase().match(/see more cat photos in our gallery/)
-);
+assert.isTrue(mainNode.contains(pNode));
+assert.match(pNode.textContent.toLowerCase(), /everyone loves cute cats online!/);
 ```
 
 # --seed--
@@ -73,7 +71,7 @@ assert(
     <h1>CatPhotoApp</h1>
     <h2>Cat Photos</h2>
     <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 1f6f7925b4..4f65380640 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -74,14 +74,14 @@ Your code should have a `p` element. You have removed the `p` element from an ea
 assert(document.querySelector('p'));
 ```
 
-The text of the `p` element should be `See more cat photos in our gallery.` Do not change the text, spacing, or punctuation of the `p` element.
+The text of the `p` element should be `Everyone loves cute cats online!` Do not change the text, spacing, or punctuation of the `p` element.
 
 ```js
-assert(
+assert.match(
   document
     .querySelector('p')
-    .innerText.toLowerCase()
-    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
+    .innerText.toLowerCase(),
+    /everyone\s+loves\s+cute\s+cats\s+online!$/
 );
 ```
 
@@ -98,12 +98,12 @@ assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
     </main>
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index 92ef311a23..ca9f8fc101 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -52,7 +52,7 @@ assert(collection.indexOf('P') < collection.indexOf('IMG'));
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
     </main>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
index 8ffee0f967..4a8a5070a1 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
@@ -36,19 +36,19 @@ assert(document.querySelector('img').src);
 Kipengele cha `img` cha sifa yako ya `src` inapaswa kuwekwa kuwa '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. Aidha umesahau URL au umeandika makosa. Kesi ya URL ni muhimu.
 
 ```js
-assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
+assert.strictEqual(document.querySelector('img').src, 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
 ```
 
 Ingawa umeweka kipengele `img` cha `src` kwa URL sahihi, inashauriwa kuzunguka thamani ya sifa kila wakati kwa alama za nukuu.
 
 ```js
-assert(!/\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/);
 ```
 
 Your `img` element should be closed either with `>` or `/>`.
 
 ```js
-assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\1\s*\/?>/.test(code));
+assert.match(code, /<img\s+src\s*=\s*("|')\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\s*\1\s*\/?>/);
 ```
 
 # --seed--
@@ -62,7 +62,7 @@ assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img>
 --fcc-editable-region--
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
index d1a1203371..50c07d1e7b 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
@@ -54,7 +54,7 @@ assert(altText.match(/A cute orange cat lying on its back\.?$/i));
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
 --fcc-editable-region--
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index b975066fd2..630863f432 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -75,7 +75,7 @@ assert(
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index 9c70df3a30..832d21e8ee 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -15,7 +15,7 @@ Here is an example of a link with the text `click here to go to freeCodeCamp.org
 <a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>
 ```
 
-Add the anchor text `link to cat pictures` to the anchor element. This will become the link's text.
+Add the anchor text `cat photos` to the anchor element. This will become the link's text.
 
 # --hints--
 
@@ -31,12 +31,12 @@ Your anchor (`a`) element should have a closing tag. Tagi za kufunga zina `/` ma
 assert(code.match(/<\/a\>/));
 ```
 
-Your anchor (`a`) element's text should be `link to cat pictures`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag.
+Your anchor (`a`) element's text should be `cat photos`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag.
 
 ```js
-assert(
-  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
-    'link to cat pictures'
+assert.strictEqual(
+  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' '),
+    'cat photos'
 );
 ```
 
@@ -51,7 +51,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <a href="https://freecatphotoapp.com"></a>
 --fcc-editable-region--
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
index d14017f1e6..354a157e15 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa2407b521be39a3de7be1
-title: Hatua ya 14
+title: Step 15
 challengeType: 0
-dashedName: step-14
+dashedName: step-15
 ---
 
 # --description--
@@ -25,22 +25,20 @@ Your `p` element should have a nested anchor (`a`) element with the text `cat ph
 
 ```js
 const anchor = document.querySelectorAll('p > a');
-assert(
-  anchor.length &&
-    anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+assert.isNotEmpty(anchor);
+assert.strictEqual(anchor[1]?.innerText?.toLowerCase().replace(/\s+/g, ' '), 'cat photos')
 ```
 
 Your anchor (`a`) element does not have a `target` attribute. Hakikisha kuwa kuna nafasi baada ya jina la tagi inayofungua na/au kuna nafasi kabla ya majina yote ya sifa.
 
 ```js
-assert(document.querySelector('a').hasAttribute('target'));
+assert.isTrue(document.querySelectorAll('a')[1]?.hasAttribute('target'));
 ```
 
 The value of the `target` attribute should be `_blank`. Aidha umesahau maandishi, au kuna makosa ya maandishi. Kumbuka kwamba thamani za sifa zinapaswa kuzungukwa na alama za nukuu.
 
 ```js
-assert(document.querySelector('a').getAttribute('target') === '_blank');
+assert.strictEqual(document.querySelectorAll('a')[1]?.getAttribute('target'), '_blank');
 ```
 
 # --seed--
@@ -54,6 +52,7 @@ assert(document.querySelector('a').getAttribute('target') === '_blank');
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
 --fcc-editable-region--
       <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
index 32a292ff77..1355440130 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa30b9eacea3f48c6300ad
-title: Step 15
+title: Step 17
 challengeType: 0
-dashedName: step-15
+dashedName: step-17
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert(document.querySelectorAll('a').length >= 2);
 You are missing a closing (`a`) tag after the image.
 
 ```js
-assert(document.querySelectorAll('a').length === 2);
+assert.lengthOf(document.querySelectorAll('a'), 3);
 ```
 
 Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
@@ -52,7 +52,7 @@ assert(code.match(/<\/a>/g).length >= 2);
 You should only add one closing anchor (`a`) tag. Please remove any extras.
 
 ```js
-assert(code.match(/<\/a>/g).length === 2);
+assert.lengthOf(code.match(/<\/a>/g), 3);
 ```
 
 Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
@@ -86,7 +86,7 @@ assert(document.querySelector('img').parentNode.nodeName === 'A');
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
index 7311745c37..a102907ef3 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa3589eacea3f48c6300ae
-title: Hatua ya 18
+title: Step 20
 challengeType: 0
-dashedName: step-18
+dashedName: step-20
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
index 2325aa23c0..c37cfab38b 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa371beacea3f48c6300af
-title: Hatua ya 19
+title: Step 21
 challengeType: 0
-dashedName: step-19
+dashedName: step-21
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index 7e4c8a8d94..a4dfc6bbfe 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa37b9eacea3f48c6300b0
-title: Hatua ya 20
+title: Step 22
 challengeType: 0
-dashedName: step-20
+dashedName: step-22
 ---
 
 # --description--
@@ -43,7 +43,7 @@ assert.equal(secondSectionLastElemNode?.nodeName , 'UL');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
index 9d41c081ec..d97f5a238c 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb5ecbeacea3f48c6300b1
-title: Hatua ya 21
+title: Step 23
 challengeType: 0
-dashedName: step-21
+dashedName: step-23
 ---
 
 # --description--
@@ -63,7 +63,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
index 1a82d58e71..9c5c950b68 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6250eacea3f48c6300b2
-title: Hatua ya 22
+title: Step 24
 challengeType: 0
-dashedName: step-22
+dashedName: step-24
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert.isTrue(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curricu
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
index 969ce67fa2..d2b5cd2f5f 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb655eeacea3f48c6300b3
-title: Hatua ya 23
+title: Step 25
 challengeType: 0
-dashedName: step-23
+dashedName: step-25
 ---
 
 # --description--
@@ -34,11 +34,7 @@ assert.equal(document.querySelectorAll('section')?.[1]?.lastElementChild?.nodeNa
 Kipengee cha lasagna cha `img` kinapaswa kuwekwa katika kipengele cha `figure`.
 
 ```js
-assert(
-  document.querySelector('figure > img') &&
-    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
-      'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
-);
+assert.strictEqual(document.querySelector('figure > img')?.src.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg');
 ```
 
 # --seed--
@@ -52,7 +48,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
index 1c33f94f68..0fabd03890 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6a35eacea3f48c6300b4
-title: Hatua ya 24
+title: Step 26
 challengeType: 0
-dashedName: step-24
+dashedName: step-26
 ---
 
 # --description--
@@ -82,7 +82,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
index 53530fd809..eeb7782678 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d0
-title: Hatua ya 25
+title: Step 27
 challengeType: 0
-dashedName: step-25
+dashedName: step-27
 ---
 
 # --description--
@@ -61,7 +61,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
index 29d323fcee..c3d4989d78 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d1
-title: Hatua ya 26
+title: Step 28
 challengeType: 0
-dashedName: step-26
+dashedName: step-28
 ---
 
 # --description--
@@ -55,7 +55,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
index 3fc7ba1ab0..693b548dd5 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d2
-title: Hatua ya 27
+title: Step 29
 challengeType: 0
-dashedName: step-27
+dashedName: step-29
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert([...document.querySelectorAll('ol')].length == 1);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
index e5f4676a94..c3261093ec 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d3
-title: Hatua ya 28
+title: Step 30
 challengeType: 0
-dashedName: step-28
+dashedName: step-30
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert.equal(document.querySelectorAll('main > section')?.[1]?.lastElementChild?
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
index f238529b9f..5e83e97989 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d4
-title: Hatua ya 32
+title: Step 34
 challengeType: 0
-dashedName: step-32
+dashedName: step-34
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
index 52c4ed6d40..354493ea13 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d5
-title: Hatua ya 34
+title: Step 36
 challengeType: 0
-dashedName: step-34
+dashedName: step-36
 ---
 
 # --description--
@@ -67,7 +67,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
index dbc256b7bb..d6780868fb 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d6
-title: Hatua ya 35
+title: Step 37
 challengeType: 0
-dashedName: step-35
+dashedName: step-37
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
index c29021c0a8..390521105f 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d7
-title: Hatua ya 36
+title: Step 38
 challengeType: 0
-dashedName: step-36
+dashedName: step-38
 ---
 
 # --description--
@@ -83,7 +83,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
index 6a2bcf5d3a..a8a5f7d8d2 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d8
-title: Step 37
+title: Step 39
 challengeType: 0
-dashedName: step-37
+dashedName: step-39
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.isTrue(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
index b9972686de..3e470728c2 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d9
-title: Hatua ya 40
+title: Step 42
 challengeType: 0
-dashedName: step-40
+dashedName: step-42
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
index a61bd20582..84507e0ee7 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804da
-title: Hatua ya 42
+title: Step 44
 challengeType: 0
-dashedName: step-42
+dashedName: step-44
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
index bf9384f1d3..b2b215f3d2 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804db
-title: Hatua ya 41
+title: Step 43
 challengeType: 0
-dashedName: step-41
+dashedName: step-43
 ---
 
 # --description--
@@ -49,7 +49,7 @@ assert.strictEqual(document.querySelector('input')?.getAttribute('required'), ''
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
index 0d28bed4fe..7a52d7f2e5 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dc
-title: Hatua ya 44
+title: Step 46
 challengeType: 0
-dashedName: step-44
+dashedName: step-46
 ---
 
 # --description--
@@ -107,7 +107,7 @@ assert.match(radioInputElem?.nextSibling?.nodeValue?.replace(/\s+/g, ' '), /\s*I
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
index a1961865ed..78c8cba66b 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dd
-title: Step 45
+title: Step 47
 challengeType: 0
-dashedName: step-45
+dashedName: step-47
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
index f05242aaab..c902225f56 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804de
-title: Hatua ya 48
+title: Step 50
 challengeType: 0
-dashedName: step-48
+dashedName: step-50
 ---
 
 # --description--
@@ -68,9 +68,10 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
index d0a7d2b9d0..ae52714fab 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804df
-title: Hatua ya 46
+title: Step 48
 challengeType: 0
-dashedName: step-46
+dashedName: step-48
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert.match(document.querySelector('input')?.id, /^indoor$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
index 8ac5785f05..85c8519505 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e1
-title: Hatua ya 50
+title: Step 52
 challengeType: 0
-dashedName: step-50
+dashedName: step-52
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
index 249ee484f5..0f38794cf2 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e2
-title: Hatua ya 54
+title: Step 56
 challengeType: 0
-dashedName: step-54
+dashedName: step-56
 ---
 
 # --description--
@@ -76,7 +76,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
index 3520ed3116..ecf8218fcb 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e3
-title: Hatua ya 58
+title: Step 60
 challengeType: 0
-dashedName: step-58
+dashedName: step-60
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
index 7fa935454a..b813bc74a5 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e5
-title: Hatua ya 61
+title: Step 63
 challengeType: 0
-dashedName: step-61
+dashedName: step-63
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.isFalse(document.querySelectorAll('input[type="checkbox"]')?.[2]?.hasAttr
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
index 40cc5ca634..8795845753 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e7
-title: Hatua ya 62
+title: Step 64
 challengeType: 0
-dashedName: step-62
+dashedName: step-64
 ---
 
 # --description--
@@ -48,7 +48,7 @@ assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
index 319c4c0b6e..ab3587b5a1 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e8
-title: Hatua ya 63
+title: Step 65
 challengeType: 0
-dashedName: step-63
+dashedName: step-65
 ---
 
 # --description--
@@ -23,11 +23,11 @@ Kipengele chako cha `footer` kinapaswa kuwa na kipengele cha `p`. Hakikisha umeo
 assert(document.querySelector('footer > p'));
 ```
 
-Kipengele chako cha `footer` kinapaswa kuwa na tagi ya kufunga. Tagi za kufunga zina `/` mara baada ya herufi ya `<`.
+Your `p` element should have a closing tag. Tagi za kufunga zina `/` mara baada ya herufi ya `<`.
 
 ```js
 const pElemClosingTags = code.match(/<\/p\>/g);
-assert(pElemClosingTags && pElemClosingTags.length === 2);
+assert.lengthOf(pElemClosingTags, 3);
 ```
 
 Maandishi ya kipengele chako cha `p` yanapaswa kuwa `No Copyright - freeCodeCamp.org`. Aidha umeacha maandishi, umeandika makosa, au haiko kati ya tagi za kufungua na kufunga za kipengele cha `p`.
@@ -48,7 +48,7 @@ assert.match(extraSpacesRemoved, /No Copyright - freeCodeCamp\.org$/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
index bce453e2fc..b6b7cabe22 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e9
-title: Hatua ya 64
+title: Step 66
 challengeType: 0
-dashedName: step-64
+dashedName: step-66
 ---
 
 # --description--
@@ -21,7 +21,7 @@ Kipengele chako cha nanga (`a`) kinapaswa kuwa na tagi ya kufunga. Tagi za kufun
 
 ```js
 const aElemClosingTags = code.match(/<\/a\>/g);
-assert(aElemClosingTags && aElemClosingTags.length === 3);
+assert.lengthOf(aElemClosingTags, 4);
 ```
 
 Kipengele chako cha (`a`) kinafaa kuwa na sifa ya `href` yenye thamani `https://www.freecodecamp.org`. Aidha umesahau sifa au umeandika makosa.
@@ -59,7 +59,7 @@ assert.match(pText, /^no copyright - freecodecamp.org$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
index f1c89dc0ed..7c02e7a2ef 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ea
-title: Hatua ya 65
+title: Step 67
 challengeType: 0
-dashedName: step-65
+dashedName: step-67
 ---
 
 # --description--
@@ -54,7 +54,7 @@ assert(noSpaces.match(/\<\/head\>\<body\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
index ff73cdcd2e..b17fdcff1e 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804eb
-title: Hatua ya 66
+title: Step 68
 challengeType: 0
-dashedName: step-66
+dashedName: step-68
 ---
 
 # --description--
@@ -56,7 +56,7 @@ assert(document.title && document.title.toLowerCase() === 'catphotoapp');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
index d3959677f8..435f6d2c66 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ec
-title: Hatua ya 67
+title: Step 69
 challengeType: 0
-dashedName: step-67
+dashedName: step-69
 ---
 
 # --description--
@@ -44,7 +44,7 @@ assert(extraSpacesRemoved.match(/\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
index e82bd9003c..a01a428a2f 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ee
-title: Hatua ya 68
+title: Step 70
 challengeType: 0
-dashedName: step-68
+dashedName: step-70
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\<html/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
index 121d7aa341..6d0fcb3277 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
@@ -1,8 +1,8 @@
 ---
 id: 5efada803cbd2bbdab94e332
-title: Hatua ya 29
+title: Step 31
 challengeType: 0
-dashedName: step-29
+dashedName: step-31
 ---
 
 # --description--
@@ -42,16 +42,15 @@ The third image should have a `src` attribute set to `https://cdn.freecodecamp.o
 
 ```js
 const catsImg = document.querySelectorAll('figure > img')[1];
-assert(
-  catsImg &&
-    catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
+assert.strictEqual(
+  catsImg?.src?.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
 );
 ```
 
 Ingawa umeweka `src` ya picha mpya kwenye URL sahihi, inashauriwa kuzunguka thamani ya sifa kila wakati kwa alama za nukuu.
 
 ```js
-assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/);
 ```
 
 # --seed--
@@ -65,7 +64,7 @@ assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/ca
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
index 8fcde0021d..e8a7a52086 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae0543cbd2bbdab94e333
-title: Hatua ya 30
+title: Step 32
 challengeType: 0
-dashedName: step-30
+dashedName: step-32
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
index a33061ffbb..3554f10e02 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae16e3cbd2bbdab94e334
-title: Hatua ya 31
+title: Step 33
 challengeType: 0
-dashedName: step-31
+dashedName: step-33
 ---
 
 # --description--
@@ -88,7 +88,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
index 7557d8fda3..5325c59fe8 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb23e70dc218d6c85f89b1
-title: Hatua ya 38
+title: Step 40
 challengeType: 0
-dashedName: step-38
+dashedName: step-40
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(!/\<input\s+type\s*=\s*text/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
index f6956ee216..078cfa74b3 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb2c990dc218d6c85f89b2
-title: Hatua ya 43
+title: Step 45
 challengeType: 0
-dashedName: step-43
+dashedName: step-45
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
index 6a50fd5834..279e4134d1 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc4f528d6a74d05e68af74
-title: Hatua ya 56
+title: Step 58
 challengeType: 0
-dashedName: step-56
+dashedName: step-58
 ---
 
 # --description--
@@ -110,7 +110,7 @@ assert.match(code, />\s+<label\s+for\s*=\s*('|")loving/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
index c66b5194a1..9c771a8966 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc518e8d6a74d05e68af75
-title: Step 57
+title: Step 59
 challengeType: 0
-dashedName: step-57
+dashedName: step-59
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
index 2b3403fe62..3272dd8452 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc54138d6a74d05e68af76
-title: Hatua ya 55
+title: Step 57
 challengeType: 0
-dashedName: step-55
+dashedName: step-57
 ---
 
 # --description--
@@ -34,7 +34,7 @@ assert.match(document.querySelector('input[type="checkbox"]')?.id, /^loving$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
index 80f79c4296..ad0a79bb34 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc575c8d6a74d05e68af77
-title: Hatua ya 59
+title: Step 61
 challengeType: 0
-dashedName: step-59
+dashedName: step-61
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
index a6bc4857b7..3a135d63ba 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5f05a1d8e233dff4a68508d8
-title: Hatua ya 47
+title: Step 49
 challengeType: 0
-dashedName: step-47
+dashedName: step-49
 ---
 
 # --description--
@@ -92,7 +92,7 @@ assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
index f9f123d522..093d8d06ec 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07be6ef7412fbad0c5626b
-title: Hatua ya 16
+title: Step 18
 challengeType: 0
-dashedName: step-16
+dashedName: step-18
 ---
 
 # --description--
@@ -40,14 +40,14 @@ The entire `section` element should be between the opening and closing tags of t
 assert(document.querySelector('section').parentNode.nodeName === 'MAIN');
 ```
 
-The existing `h2`, comment, `p` element, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
+The existing `h2`, comment, two `p` elements, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
 
 ```js
 const childrenOfSection = [...document.querySelector('section').childNodes];
 const foundElements = childrenOfSection.filter((child) => {
   return ['H2', 'A', 'P'].includes(child.nodeName);
 });
-assert(foundElements.length === 3);
+assert.lengthOf(foundElements, 4);
 ```
 
 The `h1` element should not be nested in the `section` element.
@@ -65,12 +65,12 @@ assert.isFalse(includesH1);
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
 
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
       <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
index cf2c0803eb..f5042db13a 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07c98cdb9413cbd4b16750
-title: Hatua ya 17
+title: Step 19
 challengeType: 0
-dashedName: step-17
+dashedName: step-19
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(foundElems.length === 2);
 --fcc-editable-region--
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
index aa399f87f9..11aa484ca6 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07fb1579dc934717801375
-title: Hatua ya 33
+title: Step 35
 challengeType: 0
-dashedName: step-33
+dashedName: step-35
 ---
 
 # --description--
@@ -62,7 +62,7 @@ assert.lengthOf(document.querySelectorAll('main > section')?.[2]?.children, 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
index d7dd8ecc88..f1037f4b36 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d48e7b435f13ab6550051
-title: Hatua ya 51
+title: Step 53
 challengeType: 0
-dashedName: step-51
+dashedName: step-53
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
index 48e1778b78..ca316fdfac 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4ab1b435f13ab6550052
-title: Hatua ya 52
+title: Step 54
 challengeType: 0
-dashedName: step-52
+dashedName: step-54
 ---
 
 # --description--
@@ -79,7 +79,7 @@ assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
index 5cea934f00..57757efa41 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4d04b435f13ab6550053
-title: Step 53
+title: Step 55
 challengeType: 0
-dashedName: step-53
+dashedName: step-55
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
index 7a2c2b166d..201cd28a50 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a80975fc4bcae0edb3497
-title: Hatua ya 49
+title: Step 51
 challengeType: 0
-dashedName: step-49
+dashedName: step-51
 ---
 
 # --description--
@@ -64,9 +64,10 @@ assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
index 992c4aba95..05da7c27d3 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a89f1190aff21ae42105a
-title: Hatua ya 60
+title: Step 62
 challengeType: 0
-dashedName: step-60
+dashedName: step-62
 ---
 
 # --description--
@@ -52,7 +52,7 @@ assert(energeticCheckbox.getAttribute('value').match(/^energetic$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
index e11de54aa4..ef72569973 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
@@ -1,8 +1,8 @@
 ---
 id: 62bb4009e3458a128ff57d5d
-title: Hatua ya 69
+title: Step 71
 challengeType: 0
-dashedName: step-69
+dashedName: step-71
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
@@ -127,7 +127,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
new file mode 100644
index 0000000000..aa057f8e17
--- /dev/null
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
@@ -0,0 +1,57 @@
+---
+id: 671141d8e32fe934c26fa1be
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Add the words `See more` before the anchor element and `in our gallery` after the anchor element
+
+# --hints--
+
+You should use the existing anchor element, do not create a new one.
+
+```js
+assert.lengthOf(document.querySelectorAll('a'), 1);
+```
+
+You should have the words `See more` before the anchor element.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a>/)
+```
+
+You should have the words `in our gallery` after the anchor element.
+
+```js
+assert.match(code, /<a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+You should have `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery` in your code.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <a href="https://freecatphotoapp.com">cat photos</a>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
new file mode 100644
index 0000000000..78aae1394e
--- /dev/null
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
@@ -0,0 +1,48 @@
+---
+id: 671141f948cbab359e74cc93
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Add `p` tags to turn `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.` into a paragraph.
+
+# --hints--
+
+You should add a `p` element around `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.`.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P);
+assert.strictEqual(P.innerText, "See more cat photos in our gallery.");
+```
+
+You should still have the anchor element inside the new paragraph.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P.querySelector('a'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
new file mode 100644
index 0000000000..57b4139497
--- /dev/null
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -0,0 +1,57 @@
+---
+id: 671141feba228a35cefba82d
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Turn the text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+# --hints--
+
+There should be a new anchor element in the first `p` element.
+
+```js
+assert.exists(document.querySelector('p')?.querySelector('a'));
+```
+
+The anchor text should be `cute cats`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.innerText, "cute cats");
+```
+
+The `href` attrivute of the new anchor element should be `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.href, "https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg");
+```
+
+The text of the `p` element should still be `Everyone loves cute cats online!`.
+
+```js
+assert.strictEqual(document.querySelector('p')?.innerText, "Everyone loves cute cats online!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
new file mode 100644
index 0000000000..7256f63593
--- /dev/null
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
@@ -0,0 +1,47 @@
+---
+id: 671144cdcc01d73f7dd79dc9
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have added the link you can remove the comment.
+
+# --hints--
+
+There should not be any comment in your code.
+
+```js
+assert.notMatch(code, /<!--/);
+assert.notMatch(code, /-->/);
+```
+
+The text `TODO: Add link to cat photos` should not be present anymore.
+
+```js
+assert.notMatch(code, /TODO:?/i)
+assert.notMatch(code, /Add\s*link\s*to\s*cat\s*photos/i)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+--fcc-editable-region--
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
+      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
index 90668973d1..4ad7ecb600 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
@@ -1,8 +1,8 @@
 ---
 id: 7cf9b03d81a65668421804c3
-title: Hatua ya 39
+title: Step 41
 challengeType: 0
-dashedName: step-39
+dashedName: step-41
 ---
 
 # --description--
@@ -66,7 +66,7 @@ assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
index 93597f0d81..418e21789b 100644
--- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
+++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
@@ -56,9 +56,29 @@ Rentals are usually stationary services, not something that stops.
 # --scene--
 
 ```json
-{ "setup": { "background": "company2-center.png", "characters": [
-      { "character": "Maria", "position": {"x":50,"y":0,"z":1.5}, "opacity": 0 } ], "audio": { "filename": "1.3-5.mp3", "startTime": 1, "startTimestamp": 37.92, "finishTimestamp": 42.38 } }, "commands": [
-    { "character": "Maria", "opacity": 1, "startTime": 0 },
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {"x":50,"y":0,"z":1.5},
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "1.3-5.mp3",
+      "startTime": 1,
+      "startTimestamp": 37.92,
+      "finishTimestamp": 42.38
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
     {
       "character": "Maria",
       "startTime": 1,
@@ -73,4 +93,6 @@ Rentals are usually stationary services, not something that stops.
       "opacity": 0,
       "startTime": 5.96
     }
-  ] }
+  ]
+}
+```
diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
index d4e08d4892..b7c5edd310 100644
--- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
+++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
@@ -39,9 +39,29 @@ Refers to the act of being introduced to someone for the first time.
 # --scene--
 
 ```json
-{ "setup": { "background": "company1-boardroom.png", "characters": [
-      { "character": "David", "position": {"x":50,"y":0,"z":1.4}, "opacity": 0 } ], "audio": { "filename": "1.2-5.mp3", "startTime": 1, "startTimestamp": 27.38, "finishTimestamp": 29.06 } }, "commands": [
-    { "character": "David", "opacity": 1, "startTime": 0 },
+{
+  "setup": {
+    "background": "company1-boardroom.png",
+    "characters": [
+      {
+        "character": "David",
+        "position": {"x":50,"y":0,"z":1.4},
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "1.2-5.mp3",
+      "startTime": 1,
+      "startTimestamp": 27.38,
+      "finishTimestamp": 29.06
+    }
+  },
+  "commands": [
+    {
+      "character": "David",
+      "opacity": 1,
+      "startTime": 0
+    },
     {
       "character": "David",
       "startTime": 1,
@@ -56,4 +76,6 @@ Refers to the act of being introduced to someone for the first time.
       "opacity": 0,
       "startTime": 3.18
     }
-  ] }
+  ]
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md b/curriculum/challenges/swahili/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
index e20e552f62..0a780050f2 100644
--- a/curriculum/challenges/swahili/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
+++ b/curriculum/challenges/swahili/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
@@ -24,13 +24,13 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 # --hints--
 
-You should define a funtion named `maskEmail`.
+You should define a function named `maskEmail`.
 
 ```js
 assert.isFunction(maskEmail);
 ```
 
-The `maskEmail` funtion should take a string, `email` as an argument.
+The `maskEmail` function should take a string, `email` as an argument.
 
 ```js
 assert.match(maskEmail.toString(), /\s*maskEmail\(\s*\w+\s*\)/);
diff --git a/curriculum/challenges/swahili/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md b/curriculum/challenges/swahili/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
index cefbcfd944..6ebd40d2b4 100644
--- a/curriculum/challenges/swahili/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
+++ b/curriculum/challenges/swahili/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
@@ -15,7 +15,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 1. Define a function called `isLeapYear` that takes a number as an argument.
 2. Outside the function, declare a variable `year` that stores the value of the year you want to check.
-3. Inside the funtion, use an `if/ else` statement or a ternary operator to check if the year is a leap year.
+3. Inside the function, use an `if/ else` statement or a ternary operator to check if the year is a leap year.
 4. To check if the year is a leap year, fulfill the following conditions:
 
    - If the year is divisible by `4`, then it is a leap year.
@@ -34,7 +34,7 @@ You should define a function named `isLeapYear`.
 assert(typeof isLeapYear === 'function');
 ```
 
-The `isLeapYear` funtion should take a number as an argument.
+The `isLeapYear` function should take a number as an argument.
 
 ```js
 assert.match(isLeapYear.toString(), /\s*isLeapYear\(\s*\w+\s*\)/);
diff --git a/curriculum/challenges/swahili/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md b/curriculum/challenges/swahili/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
index 378c73b4ec..b59f9d7e00 100644
--- a/curriculum/challenges/swahili/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
+++ b/curriculum/challenges/swahili/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
@@ -343,7 +343,7 @@ assert(usesFlex || usesFlexMedia)
                     <div class="desc">
                         <h2>Fast Shipping</h2>
                         <p>
-                            We make sure you recieve your trombone as soon as we have
+                            We make sure you receive your trombone as soon as we have
                             finished making it. We also provide free returns if you are not
                             satisfied.
                         </p>
diff --git a/curriculum/challenges/swahili/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md b/curriculum/challenges/swahili/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
index 908020e6f2..3c9dbc515d 100644
--- a/curriculum/challenges/swahili/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
+++ b/curriculum/challenges/swahili/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
@@ -248,7 +248,7 @@ for (let anchor of anchors) {
         <h1>Discover Italy</h1>
         <p>Art, folklore, food, nature, and more. Choose among our wide selection of guided tours and excursions, and live an unforgettable experience exploring Italy.</p>
         <h2>Packages</h2>
-        <p>We offer an extensive range of holiday solutions to accomodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
+        <p>We offer an extensive range of holiday solutions to accommodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
         <ul>
             <li><a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li>
             <li><a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</a></li>
diff --git a/curriculum/challenges/swahili/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md b/curriculum/challenges/swahili/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
index e3173d0635..284d9508e4 100644
--- a/curriculum/challenges/swahili/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
+++ b/curriculum/challenges/swahili/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
@@ -278,7 +278,7 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
           </li>
           <li>
             <strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat
-            with a high-yeidling American breed, creating a strain that responds
+            with a high-yielding American breed, creating a strain that responds
             well to fertilizer. It goes on to provide 95% of Mexico's wheat.
           </li>
           <li>
diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
new file mode 100644
index 0000000000..6ced83e0fe
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
@@ -0,0 +1,121 @@
+---
+id: 670803abcb3e980233da4768
+title: What Are Divs and Spans, and When Should You Use Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-divs-and-spans
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What type of element is a `div` element?
+
+## --answers--
+
+An inline-level element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+An inline-block element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+A block-inline element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+A block-level element.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What kind of an element is a `span` element?
+
+## --answers--
+
+An inline-level element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+---
+
+An inline element.
+
+---
+
+A block element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+---
+
+A block-level element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What should you group using a `div` element?
+
+## --answers--
+
+Block-level content and larger sections.
+
+---
+
+Inline texts and smaller sections.
+
+### --feedback--
+
+Think about related and larger content.
+
+---
+
+The whole HTML content.
+
+### --feedback--
+
+Think about related and larger content.
+
+---
+
+A small chuck of text.
+
+### --feedback--
+
+Think about related and larger content.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
new file mode 100644
index 0000000000..6c660565a2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
@@ -0,0 +1,121 @@
+---
+id: 6708143cab2b583ecd3324f5
+title: What Are Attributes, and How Do They Work?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-attributes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of these best describes a boolean attribute?
+
+## --answers--
+
+They always require a value.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+---
+
+They add JavaScript functionality to your code.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+---
+
+Their presence implies true.
+
+---
+
+They are not different from regular attributes.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What do regular attributes do in HTML?
+
+## --answers--
+
+They provide additional information about an element.
+
+---
+
+They provide the background information about an element.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+---
+
+They are replacements for HTML elements.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+---
+
+They allow developers to toggle a feature on and off.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of these differentiates a boolean attribute from a regular attribute?
+
+## --answers--
+
+A boolean attribute is true and a regular attribute is false.
+
+---
+
+A boolean attribute requires a value but a regular attribute does not.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+---
+
+A boolean attribute provides additional information about an element but a regular attribute does not.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+---
+
+A boolean attribute does not require a value but a regular attribute does.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
new file mode 100644
index 0000000000..4007ac4197
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
@@ -0,0 +1,125 @@
+---
+id: 6708382cf088b216580a9ff1
+title: What Are IDs and Classes, and When Should You Use Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-ids-and-classes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+When should you use an `id` versus a `class`?
+
+## --answers--
+
+Use a `class` when you want a unique identifier that should only apply to one element.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Use an `id` when you need a unique identifier for a specific element, and use a `class` when you want to apply styles or behavior to multiple elements.
+
+---
+
+Use an `id` when you want to style multiple elements consistently across different parts of your webpage.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Use an `id` when you want to apply styles that can be easily overridden by other styles in your CSS.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What happens if you try to use duplicate an `id` in your HTML?
+
+## --answers--
+
+It can lead to unwanted results and issues when trying to apply styles or targeting an element in JavaScript.
+
+---
+
+The program will crash.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Nothing will happen.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+There will be a popup alert message in the browser window.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of the following is NOT a correct value for the `id` attribute?
+
+## --answers--
+
+`id="heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main-heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
new file mode 100644
index 0000000000..3ea5a03c99
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
@@ -0,0 +1,121 @@
+---
+id: 67083868d5fdcb17bf8c14bd
+title: What Are HTML Entities, and What Are Some Common Examples?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-html-entities
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is an HTML entity (character reference)?
+
+## --answers--
+
+A set of Google fonts.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A group of images and captions.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A set of characters used to represent JavaScript code.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A set of characters used to represent a reserved character in HTML.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What are the three types of character references?
+
+## --answers--
+
+Named, Roman and Hexadecimal numeric character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+---
+
+Octal, Named and Binary character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+---
+
+Named, Decimal numeric, and Hexadecimal numeric character references.
+
+---
+
+Asymmetric, Decimal numeric, and Hexadecimal numeric character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which of the following is the correct syntax for a named character reference?
+
+## --answers--
+
+`&amp;`
+
+---
+
+`;amp;`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+---
+
+`&amp>>`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+---
+
+`&amp&`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
new file mode 100644
index 0000000000..7412866fc7
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
@@ -0,0 +1,121 @@
+---
+id: 670838977810401844af6fe0
+title: What Is the Role of the Link Element in HTML, and How Can It Be Used to Link to External Stylesheets?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-link-element-in-html
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the role of the `link` element in HTML?
+
+## --answers--
+
+It specifies the content type of the linked resource.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It determines the visibility of the linked resource on the webpage.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It defines the font size of the linked resource when displayed.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It is used to link to external resources like stylesheets and site icons.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is the role of the `rel` attribute inside the `link` element?
+
+## --answers--
+
+It is used to indicate the language of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+---
+
+It is used to specify the relationship between the linked resource and the HTML document.
+
+---
+
+It is used to define the media type of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+---
+
+It is used to determine the size of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What is a favicon?
+
+## --answers--
+
+A type of JavaScript file used to enhance website functionality.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+---
+
+A type of font used to style text on a website.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+---
+
+A small icon typically displayed in the browser tab next to the site title.
+
+---
+
+A security feature used to prevent cross-site scripting attacks.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
new file mode 100644
index 0000000000..85b77abd45
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
@@ -0,0 +1,121 @@
+---
+id: 670838b10ee87a18e5faff62
+title: What Is the Role of the Script Element in HTML, and How Can It Be Used to Link to External JavaScript Files?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-script-element-in-html
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which attribute is used to link to an external JavaScript file?
+
+## --answers--
+
+The `div` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location/
+
+---
+
+The `defer` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location.
+
+---
+
+The `async` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location.
+
+---
+
+The `src` attribute.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is separation of concerns?
+
+## --answers--
+
+It's about making sure everyone on the team has their own clear responsibilities.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+---
+
+A design principle where you separate your programs into distinct sections and have each section address a separate concern.
+
+---
+
+The act of combining all aspects of a program into a single module for simplicity.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+---
+
+It involves dividing up tasks among team members without considering how they might overlap or affect each other.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which of the following is the correct syntax for linking to an external JavaScript file?
+
+## --answers--
+
+`<script div="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+---
+
+`<script alt="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+---
+
+`<script src="path-to-javascript-file.js"></script>`
+
+---
+
+`<script defer="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
new file mode 100644
index 0000000000..dd0270925c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
@@ -0,0 +1,121 @@
+---
+id: 670838e914096b194b0c51aa
+title: What Is an HTML Boilerplate, and Why Is It Important?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-an-html-boilerplate
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Where would you set the character encoding for your page?
+
+## --answers--
+
+A `meta` element in the `body`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+---
+
+A `head` element in the `body`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+---
+
+A `meta` element in the `head`.
+
+---
+
+In the `DOCTYPE`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Where would you set the language for your page?
+
+## --answers--
+
+In the opening `html` tag.
+
+---
+
+A `meta` element in the `body`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+---
+
+A `head` element in the `body`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+---
+
+A `meta` element in the `head`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+## --video-solution--
+
+1
+
+## --text--
+
+What purpose does a boilerplate serve?
+
+## --answers--
+
+Provides a starting structure for your websites.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+Ensures you are not missing any essential elements.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+Allows you to get started writing the content of your page faster.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+All of the above.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
new file mode 100644
index 0000000000..57fce3537b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
@@ -0,0 +1,120 @@
+---
+id: 670839051794aa19fcef6dc8
+title: What Is UTF-8 Character Encoding and Why Is It Needed?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-utf-8-character-encoding
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+Which attribute is used to set the UTF-8 character encoding for HTML documents?
+
+## --answers--
+
+`pattern`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+---
+
+`content`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+---
+
+`charset`
+
+---
+
+`lang`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is character encoding?
+
+## --answers--
+
+A method computers use to store characters as data.
+
+---
+
+A way to compress text files.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+---
+
+It determines the font used to display text on a screen.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+---
+
+It refers to the process of converting spoken language into written text.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+## --video-solution--
+
+1
+
+## --text--
+
+How many bits are inside of a byte?
+
+## --answers--
+
+1
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+33
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+7
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+8
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
new file mode 100644
index 0000000000..96e393015a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
@@ -0,0 +1,121 @@
+---
+id: 67083952f800051a8a21fcfd
+title: What Is the Role of the Meta Description, and How Does It Affect SEO?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-meta-description
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which element is used to set the description for a web page?
+
+## --answers--
+
+`img`
+
+### --feedback--
+
+Look closely to the title of this video
+
+---
+
+`meta`
+
+---
+
+`slot`
+
+### --feedback--
+
+Look closely to the title of this video
+
+---
+
+`figure`
+
+### --feedback--
+
+Look closely to the title of this video
+
+## --video-solution--
+
+2
+
+## --text--
+
+What does SEO stand for?
+
+## --answers--
+
+Slot Engine Optimization
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Site Enhancement Outreach
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Social Engagement Optimization
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Search Engine Optimization
+
+## --video-solution--
+
+4
+
+## --text--
+
+Where does the page's description typically show up?
+
+## --answers--
+
+Inside the `figure` element.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+---
+
+Inside the `footer` element.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+---
+
+In the search engine results page.
+
+---
+
+In a popup alert message.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
new file mode 100644
index 0000000000..7977b8cc03
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
@@ -0,0 +1,121 @@
+---
+id: 6708396caa00e11b597b3365
+title: What Is the Role of Open Graph Tags, and How Do They Affect SEO?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-open-graph-tags
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What are open graph properties used for?
+
+## --answers--
+
+For embedding interactive multimedia content directly into web pages.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+---
+
+To set how your website's content will be seen on different social media platforms.
+
+---
+
+For generating dynamic pop-up advertisements on websites.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+---
+
+For encrypting sensitive data transmitted between web servers and users' browsers.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What does the `name="og:title"` do in the `meta` element?
+
+## --answers--
+
+It automatically adjusts the font size and style of the webpage title based on user preferences.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It directs the browser to display a specific emoticon or emoji as the title of the webpage.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It causes the webpage to play a specific audio file when the title is displayed in the browser tab.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It specifies the title of your web page content when it is shared on social media platforms.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What does the `property="og:type"` do in the `meta` element?
+
+## --answers--
+
+It selects the page's default font style.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+---
+
+It triggers a pop-up advertisement when the webpage is loaded.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+---
+
+It specifies the type of content used for your web page when it is shared on social media platforms.
+
+---
+
+It changes the webpage's background color based on the user's time zone.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/swahili/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
index 692385ab63..c833584c2d 100644
--- a/curriculum/challenges/swahili/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
+++ b/curriculum/challenges/swahili/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is asynchronous programming?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to execute code in a sequential order.
 
 ---
 
-Placeholder distractor 2
+A technique to handle errors in synchronous code.
 
 ---
 
-Placeholder distractor 3
+A way to guarantee task order.
 
 #### --answer--
 
-Placeholder answer
+A method to execute code concurrently without blocking the main thread.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `async` attribute do when used in a `<script>` tag?
 
 #### --distractors--
 
-Placeholder distractor 1
+It allows the script to be executed after the HTML document has been completely parsed.
 
 ---
 
-Placeholder distractor 2
+It ensures the script runs in a synchronous manner.
 
 ---
 
-Placeholder distractor 3
+It delays the script execution until the browser is idle.
 
 #### --answer--
 
-Placeholder answer
+The script is downloaded in parallel with parsing the page and executed as soon as it is available.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Fetch API in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manage asynchronous callbacks.
 
 ---
 
-Placeholder distractor 2
+To create and manage cookies.
 
 ---
 
-Placeholder distractor 3
+To render dynamic HTML content.
 
 #### --answer--
 
-Placeholder answer
+To make network requests to servers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which `HTTP` method is used to send data to a server for processing?
 
 #### --distractors--
 
-Placeholder distractor 1
+`GET`
 
 ---
 
-Placeholder distractor 2
+`DELETE`
 
 ---
 
-Placeholder distractor 3
+`HEAD`
 
 #### --answer--
 
-Placeholder answer
+`POST`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `res.json()` method do in Express.js?
 
 #### --distractors--
 
-Placeholder distractor 1
+It retrieves data from a JSON file.
 
 ---
 
-Placeholder distractor 2
+It parses a JSON string into a JavaScript object.
 
 ---
 
-Placeholder distractor 3
+It sends raw JSON as a response without any processing.
 
 #### --answer--
 
-Placeholder answer
+It converts a JavaScript object to a JSON string and sends it as a response.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a promise in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to synchronize multiple operations.
 
 ---
 
-Placeholder distractor 2
+A callback function that runs after an operation.
 
 ---
 
-Placeholder distractor 3
+A technique to handle errors in asynchronous code.
 
 #### --answer--
 
-Placeholder answer
+An object that represents the eventual completion (or failure) of an asynchronous operation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does promise chaining allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Execute multiple asynchronous operations in parallel.
 
 ---
 
-Placeholder distractor 2
+Handle synchronous operations more efficiently.
 
 ---
 
-Placeholder distractor 3
+Retry failed operations automatically.
 
 #### --answer--
 
-Placeholder answer
+Pass the result of one promise to the next.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle successful completion of a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.catch()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.then()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle errors in a promise chain?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.then()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.catch()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the use of the `.finally()` method in a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+It returns the result of the promise.
 
 ---
 
-Placeholder distractor 2
+It stops the execution of subsequent promise handlers.
 
 ---
 
-Placeholder distractor 3
+It retries the promise if it fails.
 
 #### --answer--
 
-Placeholder answer
+It executes code after a promise is fulfilled or rejected, regardless of the outcome.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the syntax for declaring an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+`function myFunction() {}`
 
 ---
 
-Placeholder distractor 2
+`function async myFunction() {}`
 
 ---
 
-Placeholder distractor 3
+`async {} => ()`
 
 #### --answer--
 
-Placeholder answer
+`async function myFunction() {}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `await` keyword do in an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+It creates a new promise.
 
 ---
 
-Placeholder distractor 2
+It executes code immediately without waiting.
 
 ---
 
-Placeholder distractor 3
+It returns the result of the promise.
 
 #### --answer--
 
-Placeholder answer
+It pauses the execution of the function until the promise is resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Geolocation API?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manipulate HTML elements.
 
 ---
 
-Placeholder distractor 2
+To create and manage map elements.
 
 ---
 
-Placeholder distractor 3
+To control the device's camera.
 
 #### --answer--
 
-Placeholder answer
+To retrieve the geographical location of a device.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method of the Geolocation API is used to get the current position of the device?
 
 #### --distractors--
 
-Placeholder distractor 1
+`getLocation()`
 
 ---
 
-Placeholder distractor 2
+`getPosition()`
 
 ---
 
-Placeholder distractor 3
+`getLatLong()`
 
 #### --answer--
 
-Placeholder answer
+`getCurrentPosition()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What parameters can be passed to the `getCurrentPosition()` method?
 
 #### --distractors--
 
-Placeholder distractor 1
+Only the success callback function.
 
 ---
 
-Placeholder distractor 2
+Only options.
 
 ---
 
-Placeholder distractor 3
+One the error callback function.
 
 #### --answer--
 
-Placeholder answer
+Success and error callback functions, along with options.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What will the following code return? `fetch('https://api.example.com/data')`
 
 #### --distractors--
 
-Placeholder distractor 1
+The JSON response directly.
 
 ---
 
-Placeholder distractor 2
+An error if the URL is not reachable.
 
 ---
 
-Placeholder distractor 3
+A synchronous response.
 
 #### --answer--
 
-Placeholder answer
+A `Promise` that resolves to a `Response` object
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default HTTP method for the Fetch API?
 
 #### --distractors--
 
-Placeholder distractor 1
+`POST`
 
 ---
 
-Placeholder distractor 2
+`PUT`
 
 ---
 
-Placeholder distractor 3
+`DELETE`
 
 #### --answer--
 
-Placeholder answer
+`GET`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `Promise.all()` method do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resolves a single promise.
 
 ---
 
-Placeholder distractor 2
+It rejects the first promise that fails.
 
 ---
 
-Placeholder distractor 3
+It runs all promises sequentially.
 
 #### --answer--
 
-Placeholder answer
+It executes multiple promises concurrently and returns the results when all are resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you handle multiple asynchronous operations using async/await?
 
 #### --distractors--
 
-Placeholder distractor 1
+You must always use `.then()` for each operation.
 
 ---
 
-Placeholder distractor 2
+You cannot handle multiple operations with async/await.
 
 ---
 
-Placeholder distractor 3
+You must use callback functions for all operations.
 
 #### --answer--
 
-Placeholder answer
+You can use `await` for each operation in sequence and put them inside an async function.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is true about the `fetch` API?
 
 #### --distractors--
 
-Placeholder distractor 1
+It can only handle `GET` requests.
 
 ---
 
-Placeholder distractor 2
+It requires a callback function for handling responses.
 
 ---
 
-Placeholder distractor 3
+It only works in synchronous code.
 
 #### --answer--
 
-Placeholder answer
+It is used to make HTTP requests to a server.
 
diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md b/curriculum/challenges/swahili/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
index b43c4043e7..b6812d1bbf 100644
--- a/curriculum/challenges/swahili/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
+++ b/curriculum/challenges/swahili/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
@@ -381,7 +381,7 @@ Gives animations to the page.
 
 ---
 
-Improves Search Emgine Optimiztion (SEO).
+Improves Search Emgine Optimization (SEO).
 
 #### --answer--
 
diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/swahili/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
index 80af1166b6..cac5b80e72 100644
--- a/curriculum/challenges/swahili/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
+++ b/curriculum/challenges/swahili/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What happens when there is too much content to fit in an element box?
 
 #### --distractors--
 
-Placeholder distractor 1
+Underflow
 
 ---
 
-Placeholder distractor 2
+Compression
 
 ---
 
-Placeholder distractor 3
+Padding
 
 #### --answer--
 
-Placeholder answer
+Overflow
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default behavior of CSS when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+Content is hidden
 
 ---
 
-Placeholder distractor 2
+Content is clipped
 
 ---
 
-Placeholder distractor 3
+Content is resized
 
 #### --answer--
 
-Placeholder answer
+Content is visible
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why does CSS typically avoid hiding content when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+To enhance page design by hiding irrelevant content
 
 ---
 
-Placeholder distractor 2
+To save memory and load pages faster
 
 ---
 
-Placeholder distractor 3
+To automatically fix broken layout issues
 
 #### --answer--
 
-Placeholder answer
+To prevent data loss and make issues noticeable
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you handle overflow in CSS to hide content or add scrollbars?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars
 
 ---
 
-Placeholder distractor 2
+Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars
 
 ---
 
-Placeholder distractor 3
+Use `overflow: none` to hide content and `overflow: show` to display scrollbars
 
 #### --answer--
 
-Placeholder answer
+Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you specify different scrolling behaviors for the x-axis and y-axis in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+By using `scroll-x` and `scroll-y` properties
 
 ---
 
-Placeholder distractor 2
+By using `overflow-x` and `overflow-y` separately in every case
 
 ---
 
-Placeholder distractor 3
+By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x`
 
 #### --answer--
 
-Placeholder answer
+By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform` CSS property allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Change the color and font style of an element
 
 ---
 
-Placeholder distractor 2
+Adjust the margin and padding of an element
 
 ---
 
-Placeholder distractor 3
+Modify the visibility and display of an element
 
 #### --answer--
 
-Placeholder answer
+Rotate, scale, skew, or translate an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform-box: fill-box` property do in an animation that rotates an element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resizes the element to fit the canvas during the transformation
 
 ---
 
-Placeholder distractor 2
+It changes the background of the element during transformation
 
 ---
 
-Placeholder distractor 3
+It sets the transform origin to the top-left corner of the element
 
 #### --answer--
 
-Placeholder answer
+It sets the transform origin to the center of the element's bounding box, allowing it to spin in place
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `transform-origin` property in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It controls the animation speed of transformed elements
 
 ---
 
-Placeholder distractor 2
+It defines the display type of transformed elements
 
 ---
 
-Placeholder distractor 3
+It sets the background of transformed elements
 
 #### --answer--
 
-Placeholder answer
+It specifies the point around which a transformation is applied to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does margin affect the size of an element in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Margin increases the actual size of the element's box
 
 ---
 
-Placeholder distractor 2
+Margin has no effect on the element's size or position
 
 ---
 
-Placeholder distractor 3
+Margin decreases the total area the element occupies on the page
 
 #### --answer--
 
-Placeholder answer
+Margin affects the total area an element occupies but is not part of the actual size of the box
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the content area of an element in CSS represent?
 
 #### --distractors--
 
-Placeholder distractor 1
+It defines the margins and padding around the element
 
 ---
 
-Placeholder distractor 2
+It specifies the border thickness of the element
 
 ---
 
-Placeholder distractor 3
+It controls the visibility of the element on the page
 
 #### --answer--
 
-Placeholder answer
+It contains the "real" content of the element, such as text, images, or videos
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the difference between `content-box` and `border-box` in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`content-box` includes padding and border, while `border-box` includes only content dimensions
 
 ---
 
-Placeholder distractor 2
+Both `content-box` and `border-box` include only the border dimensions
 
 ---
 
-Placeholder distractor 3
+`content-box` is used for 2D elements, while `border-box` is used for 3D elements
 
 #### --answer--
 
-Placeholder answer
+`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+To apply default styles to all elements for faster loading
 
 ---
 
-Placeholder distractor 2
+To minimize the size of CSS files by removing unused styles
 
 ---
 
-Placeholder distractor 3
+To optimize images and fonts for better performance
 
 #### --answer--
 
-Placeholder answer
+To remove default browser styling and create a consistent baseline for styling across different browsers
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What are the common types of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bootstrap Reset, Tailwind Reset, and Foundation Reset
 
 ---
 
-Placeholder distractor 2
+Simple Reset, Comprehensive Reset, and Adaptive Reset
 
 ---
 
-Placeholder distractor 3
+Minimal Reset, Advanced Reset, and Legacy Reset
 
 #### --answer--
 
-Placeholder answer
+Normalize.css, Eric Meyer's Reset, and HTML5 Reset
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `scale3d()` property value do in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It rotates an element in 3D space
 
 ---
 
-Placeholder distractor 2
+It skews an element on the x, y, and z axes
 
 ---
 
-Placeholder distractor 3
+It translates an element in 3D space
 
 #### --answer--
 
-Placeholder answer
+It scales an element along the x, y, and z axes
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the total width of an element calculated in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Total width = width + margin + padding + border
 
 ---
 
-Placeholder distractor 2
+Total width = width + margin + padding
 
 ---
 
-Placeholder distractor 3
+Total width = width + margin + border
 
 #### --answer--
 
-Placeholder answer
+Total width = width + left padding + right padding + left border + right border
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the filter property in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the layout of the element on the page
 
 ---
 
-Placeholder distractor 2
+It changes the background color and texture of an element
 
 ---
 
-Placeholder distractor 3
+It alters the size and position of an element
 
 #### --answer--
 
-Placeholder answer
+It applies visual effects like blur and saturation to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the `filter` property specified in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+As only a single function, where percentage values must be used
 
 ---
 
-Placeholder distractor 2
+As `block` or `inline`, with values expressed in pixels
 
 ---
 
-Placeholder distractor 3
+As `none` or multiple functions, but only percentage values are accepted
 
 #### --answer--
 
-Placeholder answer
+As `none` or one or more functions, where percentage values can also be expressed as decimals
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `contrast()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white
 
 ---
 
-Placeholder distractor 2
+Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it
 
 ---
 
-Placeholder distractor 3
+Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque
 
 #### --answer--
 
-Placeholder answer
+Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `hue-rotate()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the brightness of the input image based on degrees
 
 ---
 
-Placeholder distractor 2
+It rotates an element's size and position in the document
 
 ---
 
-Placeholder distractor 3
+It adjusts the saturation and contrast of the input image
 
 #### --answer--
 
-Placeholder answer
+It applies a hue rotation, where the `<angle>` value defines the degrees around the hue color circle
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens when two animated filters have different function list lengths in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+The shorter list's filters override the longer list's filters
 
 ---
 
-Placeholder distractor 2
+The filters are discarded and no animation is applied
 
 ---
 
-Placeholder distractor 3
+Only the first filter function in each list is animated
 
 #### --answer--
 
-Placeholder answer
+The longer list's missing equivalent filter functions are added to the shorter list using their initial values
 
diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md b/curriculum/challenges/swahili/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
index 2f36f50f71..698708ccfd 100644
--- a/curriculum/challenges/swahili/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
+++ b/curriculum/challenges/swahili/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+Which method is used to check if an `input` element's value satisfies the validation rules?
 
 #### --distractors--
 
-Placeholder distractor 1
+`validateInput()`
 
 ---
 
-Placeholder distractor 2
+`isValid()`
 
 ---
 
-Placeholder distractor 3
+`checkValue()`
 
 #### --answer--
 
-Placeholder answer
+`checkValidity()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if the `checkValidity()` method finds an invalid `input`?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is automatically submitted
 
 ---
 
-Placeholder distractor 2
+Nothing happens
 
 ---
 
-Placeholder distractor 3
+The `input` value is cleared
 
 #### --answer--
 
-Placeholder answer
+The browser displays a validation message
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to customize the message shown during validation failure?
 
 #### --distractors--
 
-Placeholder distractor 1
+`setErrorMessage()`
 
 ---
 
-Placeholder distractor 2
+`setValidationMessage()`
 
 ---
 
-Placeholder distractor 3
+`customMessage()`
 
 #### --answer--
 
-Placeholder answer
+`setCustomValidity()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default validation behavior for required fields when the form is submitted?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is submitted even if required fields are empty
 
 ---
 
-Placeholder distractor 2
+The form submits but gives a warning
 
 ---
 
-Placeholder distractor 3
+The form resets the `input` values
 
 #### --answer--
 
-Placeholder answer
+The browser stops the form submission if required fields are empty
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which actions does not cause an HTML form to be checked for errors?
 
 #### --distractors--
 
-Placeholder distractor 1
+Changing the `input` value
 
 ---
 
-Placeholder distractor 2
+Submitting the form
 
 ---
 
-Placeholder distractor 3
+Calling `reportValidity()`
 
 #### --answer--
 
-Placeholder answer
+Clicking a reset button
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does `checkValidity()` return when all form inputs are valid?
 
 #### --distractors--
 
-Placeholder distractor 1
+`false`
 
 ---
 
-Placeholder distractor 2
+`undefined`
 
 ---
 
-Placeholder distractor 3
+`null`
 
 #### --answer--
 
-Placeholder answer
+`true`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When does the `checkValidity()` method stop form submission?
 
 #### --distractors--
 
-Placeholder distractor 1
+When the form has no submit button
 
 ---
 
-Placeholder distractor 2
+When the form `action` is empty
 
 ---
 
-Placeholder distractor 3
+When the form method is POST
 
 #### --answer--
 
-Placeholder answer
+When the form has at least one invalid `input` (and the default behavior of form submission is prevented).
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if `checkValidity()` is called, but a field fails validation?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form submits without error
 
 ---
 
-Placeholder distractor 2
+The `input` values are cleared
 
 ---
 
-Placeholder distractor 3
+The form closes immediately
 
 #### --answer--
 
-Placeholder answer
+The invalid field is highlighted and a message appears
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which action will make `checkValidity()` run?
 
 #### --distractors--
 
-Placeholder distractor 1
+Resetting the form
 
 ---
 
-Placeholder distractor 2
+Changing an `input` value
 
 ---
 
-Placeholder distractor 3
+Clicking an anchor tag
 
 #### --answer--
 
-Placeholder answer
+Submitting the form manually
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of calling `checkValidity()` before submitting a form?
 
 #### --distractors--
 
-Placeholder distractor 1
+To automatically submit the form
 
 ---
 
-Placeholder distractor 2
+To reload the page
 
 ---
 
-Placeholder distractor 3
+To clear all `input` fields
 
 #### --answer--
 
-Placeholder answer
+To check if all `input` elements meet their specified constraints
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the main purpose of `e.preventDefault()`?
 
 #### --distractors--
 
-Placeholder distractor 1
+To reload the form
 
 ---
 
-Placeholder distractor 2
+To clear form data
 
 ---
 
-Placeholder distractor 3
+To reset the form values
 
 #### --answer--
 
-Placeholder answer
+To stop the default action of an event
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When used on a form's submit event, what does `e.preventDefault()` do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It submits the form
 
 ---
 
-Placeholder distractor 2
+It clears all form fields
 
 ---
 
-Placeholder distractor 3
+It disables the form temporarily
 
 #### --answer--
 
-Placeholder answer
+It prevents the form from being submitted
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In which scenario is `e.preventDefault()` most useful?
 
 #### --distractors--
 
-Placeholder distractor 1
+When handling a button click that submits a form
 
 ---
 
-Placeholder distractor 2
+When closing a modal dialog
 
 ---
 
-Placeholder distractor 3
+When opening a new page
 
 #### --answer--
 
-Placeholder answer
+When submitting a form via AJAX and preventing a page reload
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if you forget to call `e.preventDefault()` on a form submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is submitted via AJAX
 
 ---
 
-Placeholder distractor 2
+The form does not submit
 
 ---
 
-Placeholder distractor 3
+The form data is lost
 
 #### --answer--
 
-Placeholder answer
+The form submits and refreshes the page
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which default behavior can be prevented using `e.preventDefault()`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Editing a form
 
 ---
 
-Placeholder distractor 2
+Rendering the form
 
 ---
 
-Placeholder distractor 3
+Reloading the form
 
 #### --answer--
 
-Placeholder answer
+The default behavior caused by submitting a form (e.g., page refresh or POST call).
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What triggers the form's submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+When an input field changes
 
 ---
 
-Placeholder distractor 2
+When the form is reset
 
 ---
 
-Placeholder distractor 3
+When the form's action is cleared
 
 #### --answer--
 
-Placeholder answer
+When a form's submit button is clicked or Enter is pressed
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Where do you usually handle the submit event in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+On a text input element
 
 ---
 
-Placeholder distractor 2
+On any field in the form
 
 ---
 
-Placeholder distractor 3
+On a button element outside the form
 
 #### --answer--
 
-Placeholder answer
+On the form element itself
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the submit event do by default?
 
 #### --distractors--
 
-Placeholder distractor 1
+It validates the form but doesn’t submit it
 
 ---
 
-Placeholder distractor 2
+It clears the form fields
 
 ---
 
-Placeholder distractor 3
+It cancels form submission
 
 #### --answer--
 
-Placeholder answer
+It sends form data to the server specified in the form's action
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which event should you listen for to handle form data when the form is submitted in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+`"input"`
 
 ---
 
-Placeholder distractor 2
+`"change"`
 
 ---
 
-Placeholder distractor 3
+`"focus"`
 
 #### --answer--
 
-Placeholder answer
+`"submit"`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What must be done to prevent the default form submission behavior in the submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+Call `submit.preventDefault()`
 
 ---
 
-Placeholder distractor 2
+Stop the form from being displayed
 
 ---
 
-Placeholder distractor 3
+Set the form's `method` to `"GET"`
 
 #### --answer--
 
-Placeholder answer
+Call `e.preventDefault()`
 
diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md b/curriculum/challenges/swahili/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
index 022a3aef8b..07bda7d052 100644
--- a/curriculum/challenges/swahili/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
+++ b/curriculum/challenges/swahili/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+The Fibonacci sequence is a series where each number is the sum of the two preceding ones, starting with `0` and `1`. The sequence goes: `0, 1, 1, 2, 3, 5, 8, 13, 21...` and so on. What is the best approach to calculate `nth` number in the sequence?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use the formula `fib(n) = fib(n-1) * fib(n-2)`.
 
 ---
 
-Placeholder distractor 2
+Use recursion with memoization to avoid recalculating subproblems where `fib(n) = (n-1) + (n-2)`.
 
 ---
 
-Placeholder distractor 3
+Use a for loop to calculate iteratively where `fib(n) = fib(n-1) + (n-2)`.
 
 #### --answer--
 
-Placeholder answer
+Use recursion with memoization to avoid recalculating subproblems where `fib(n) = fib(n-1) + fib(n-2)`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+A binary string, such as `"1011"`, represents a number in base-2, where each digit corresponds to a power of `2`. What process can be used to convert this binary string into its decimal equivalent?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use the `parseInt()` function with base `10`.
 
 ---
 
-Placeholder distractor 2
+Convert the string to an array, then sum the digits using bitwise operations.
 
 ---
 
-Placeholder distractor 3
+Use the `Number()` function directly with a binary string.
 
 #### --answer--
 
-Placeholder answer
+Multiply each character by powers of `2` and sum them up.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following algorithm will move all zeroes in an array to the end while keeping the order of other elements unchanged? For example, given `[0, 1, 0, 3, 12]`, return `[1, 3, 12, 0, 0]`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Sort the array in decreasing order and place zeros at the start.
 
 ---
 
-Placeholder distractor 2
+Sort the array in ascending order.
 
 ---
 
-Placeholder distractor 3
+Use recursion to remove all zeros and add them to the front.
 
 #### --answer--
 
-Placeholder answer
+Use a two-pointer technique to swap non-zero elements with zero elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a sentence, such as `"I am a frontend engineer"`, what approach can be taken to reverse the order of the words, producing the output `"engineer frontend a am I"`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Split the string into words using `split(" ")`, reverse the array, and join it back into a string using `join("_")`.
 
 ---
 
-Placeholder distractor 2
+Sort the words alphabetically and return the result.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to reverse each word.
 
 #### --answer--
 
-Placeholder answer
+Split the string into words using `split(" ")`, reverse the array, and join it back into a string using `join(" ")`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a string, what approach would be used to find the first non-repeating character? For example, in the string `"codecamp"`, it would be `'o'`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Sort the string and check for consecutive duplicates.
 
 ---
 
-Placeholder distractor 2
+Convert the string to an array, then filter for unique elements.
 
 ---
 
-Placeholder distractor 3
+Use a regular expression to find the first non-repeat.
 
 #### --answer--
 
-Placeholder answer
+Iterate over the string twice, once to count number of occurrences and once to find the first unique character.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach can be used to encode a string by counting consecutive repeated characters? For example, given the input`"mississippi"`, the output should be `"m1i1s2i1s2i1p2i1"`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Use regular expressions to match repeated characters.
 
 ---
 
-Placeholder distractor 2
+Use `map()` to map consecutive characters to the output.
 
 ---
 
-Placeholder distractor 3
+Sort the string and count occurrences.
 
 #### --answer--
 
-Placeholder answer
+Iterate through the string, counting consecutive occurrences of each character while building the answer.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach can be used to reverse the digits of an integer? For example, given the input `1234`, the output should be `4321`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Use bitwise operations to reverse the digits.
 
 ---
 
-Placeholder distractor 2
+Convert the integer to a binary number and reverse it.
 
 ---
 
-Placeholder distractor 3
+Use the `reverse()` method directly on the integer.
 
 #### --answer--
 
-Placeholder answer
+Use a loop to extract digits from the integer and reconstruct the reversed integer.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach would be used to generate Pascal's Triangle up to `n` rows? For example, for `n = 3`, the result would be `[[1], [1, 1], [1, 2, 1]]`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Generate rows by using a function that outputs prime numbers and maps them to each row.
 
 ---
 
-Placeholder distractor 2
+Use a loop to generate each row by multiplying adjacent elements from the previous row.
 
 ---
 
-Placeholder distractor 3
+Use `Math.random()` to generate the rows.
 
 #### --answer--
 
-Placeholder answer
+Use a loop to generate each row by adding adjacent elements from the previous row.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which algorithm is most efficient for sorting an array of size `n` containing numbers from `1` to `n`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bubble Sort
 
 ---
 
-Placeholder distractor 2
+Merge Sort
 
 ---
 
-Placeholder distractor 3
+Quick Sort
 
 #### --answer--
 
-Placeholder answer
+Cyclic Sort
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which algorithmic approach is best for solving the problem of finding the minimum number of coins for a given amount when only one type of coin is provided?
 
 #### --distractors--
 
-Placeholder distractor 1
+Dynamic Programming
 
 ---
 
-Placeholder distractor 2
+Divide and Conquer
 
 ---
 
-Placeholder distractor 3
+Backtracking
 
 #### --answer--
 
-Placeholder answer
+Greedy Algorithm
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following problems can be solved efficiently using the two-pointer technique?
 
 #### --distractors--
 
-Placeholder distractor 1
+Sorting an array.
 
 ---
 
-Placeholder distractor 2
+Traversing a tree level by level.
 
 ---
 
-Placeholder distractor 3
+Finding the middle element of a linked list.
 
 #### --answer--
 
-Placeholder answer
+Finding two numbers in a sorted array that sum up to a target value.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a Roman numeral string, convert it to its corresponding integer value. For example, `"IX"` should return `9`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Parse the string from left to right and add the values of individual numerals.
 
 ---
 
-Placeholder distractor 2
+Parse each character and multiply by its index.
 
 ---
 
-Placeholder distractor 3
+Use the `parseInt()` function on the Roman numeral string.
 
 #### --answer--
 
-Placeholder answer
+Parse the string from right to left, adding the values of individual numerals and subtracting when a smaller numeral comes before a larger numeral.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can one check if a given string is a palindrome (the same forwards and backwards), for example `"madam"`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use Slow and Fast Pointer.
 
 ---
 
-Placeholder distractor 2
+Compare it to its reverse after sorting the string.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to remove all non-alphabetic characters and check equality.
 
 #### --answer--
 
-Placeholder answer
+Compare the string to its reverse.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a number `n`, write a function that prints numbers from `1` to `n`. For multiples of `3`, print `"Fizz"` for multiples of `5`, print `"Buzz"` and for multiples of both `3` and `5`, print `"FizzBuzz"`. What is the simplest approach to this?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `Math.random()` to generate numbers between `1` and `n` and check the result.
 
 ---
 
-Placeholder distractor 2
+Use a for loop and check divisibility in-order of `3`, `5` and `15` with if conditions or switch.
 
 ---
 
-Placeholder distractor 3
+Create a recursive function that checks divisibility by `3` and `5`.
 
 #### --answer--
 
-Placeholder answer
+Use a for loop and check divisibility in-order of `15`, `5` and `3` with if conditions or switch.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+The Caesar cipher is a simple encryption technique where each letter in a string is shifted forward by a fixed number of positions in the alphabet. How would you shift all letters in a string by `3` positions?
 
 #### --distractors--
 
-Placeholder distractor 1
+Subtract `3` from the ASCII value of each character.
 
 ---
 
-Placeholder distractor 2
+Replace each vowel with the next consonant.
 
 ---
 
-Placeholder distractor 3
+Add `3` to the ASCII value of each character, but only for uppercase letters.
 
 #### --answer--
 
-Placeholder answer
+Add `3` to the ASCII value of each character, wrapping around for `'z'` and `'Z'`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Anagrams are words formed by rearranging letters of another word. How can one determine if two strings are anagrams?
 
 #### --distractors--
 
-Placeholder distractor 1
+Compare total number of letters in both strings.
 
 ---
 
-Placeholder distractor 2
+Reverse one string and compare with the other.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to remove duplicate letters and check equality.
 
 #### --answer--
 
-Placeholder answer
+Sort both strings and check if they are equal.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is the correct approach to check if a given number is prime?
 
 #### --distractors--
 
-Placeholder distractor 1
+Check if the number is divisible by `2` and `3`. If not, it's prime.
 
 ---
 
-Placeholder distractor 2
+Check if the number is divisible by any odd number between `3` and the square root of the number.
 
 ---
 
-Placeholder distractor 3
+Convert the number to binary and check if it has exactly two 1s.
 
 #### --answer--
 
-Placeholder answer
+Loop from `2` to up to the square root of the prime candidate, and make sure none of the number divides it evenly.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following describes the correct approach to find the greatest common divisor (GCD) of two numbers?
 
 #### --distractors--
 
-Placeholder distractor 1
+Find the average of the two numbers and round to the nearest integer.
 
 ---
 
-Placeholder distractor 2
+Multiply the two numbers together and then divide by their least common divisor.
 
 ---
 
-Placeholder distractor 3
+Add the two numbers together and divide by `2`.
 
 #### --answer--
 
-Placeholder answer
+Use recursion where `gcd(a, b) = gcd(b, a % b)` where the base case would be to return first parameter when second parameter is zero.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+The factorial of a non-negative integer `n` (denoted `n!`) is the product of all positive integers from `1` to `n`, with `0! = 1`. Which of the following approaches can be used to calculate the factorial of a given number `n`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Add the numbers from `1` to `n`.
 
 ---
 
-Placeholder distractor 2
+Raise `n` to the power of `n-1`.
 
 ---
 
-Placeholder distractor 3
+Find the prime factorization of n and then multiply the prime factors together.
 
 #### --answer--
 
-Placeholder answer
+Multiplying numbers from `1` to `n` in a loop.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is the most efficient approach to search for a given integer within a distinct, sorted array of integers?
 
 #### --distractors--
 
-Placeholder distractor 1
+Linear Search.
 
 ---
 
-Placeholder distractor 2
+Sort the array and search using Linear Search.
 
 ---
 
-Placeholder distractor 3
+Create a hash table with the array elements and check for the given integer.
 
 #### --answer--
 
-Placeholder answer
+Binary Search.
 
diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md b/curriculum/challenges/swahili/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
index bf02c6d126..30b6619cac 100644
--- a/curriculum/challenges/swahili/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
+++ b/curriculum/challenges/swahili/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
@@ -83,7 +83,7 @@ Type `nano [FILE]`, then press the **Enter** key
 
 #### --text--
 
-What type of files is nano capable of creating and modifiying?
+What type of files is nano capable of creating and modifying?
 
 #### --distractors--
 
diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md b/curriculum/challenges/swahili/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
index fb4f4e6437..f73b3b9e1d 100644
--- a/curriculum/challenges/swahili/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
+++ b/curriculum/challenges/swahili/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
@@ -17,439 +17,440 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+How do you handle a click event in a React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<button onClick='handleClick()'>Click me</button>`
 
 ---
 
-Placeholder distractor 2
+`<button onClick={() => handleClick}>Click me</button>`
 
 ---
 
-Placeholder distractor 3
+`<button click={handleClick}>Click me</button>`
 
 #### --answer--
 
-Placeholder answer
+`<button onClick={handleClick}>Click me</button>`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is NOT a method for conditional rendering in React?
 
 #### --distractors--
 
-Placeholder distractor 1
+Ternary operators
 
 ---
 
-Placeholder distractor 2
+Logical `&&` operator
 
 ---
 
-Placeholder distractor 3
+`switch` statements
 
 #### --answer--
 
-Placeholder answer
+`setTimeout`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does `<React.Fragment>` do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Wraps components with adding extra DOM nodes.
 
 ---
 
-Placeholder distractor 2
+Creates a new HTML element.
 
 ---
 
-Placeholder distractor 3
+Deletes an existing element.
 
 #### --answer--
 
-Placeholder answer
+Wraps components without adding extra DOM nodes.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of React Context?
 
 #### --distractors--
 
-Placeholder distractor 1
+Managing component styles.
 
 ---
 
-Placeholder distractor 2
+Passing data through the component.
 
 ---
 
-Placeholder distractor 3
+Controlling component re-renders.
 
 #### --answer--
 
-Placeholder answer
+Passing data through the component tree without props.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is TRUE about JSX?
 
 #### --distractors--
 
-Placeholder distractor 1
+JSX must always be written in separate files from JavaScript.
 
 ---
 
-Placeholder distractor 2
+JSX cannot use JavaScript expressions.
 
 ---
 
-Placeholder distractor 3
+JSX is not recommended for React applications.
 
 #### --answer--
 
-Placeholder answer
+JSX allows writing HTML within JavaScript code.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a con of using Vanilla JS instead of a framework?
 
 #### --distractors--
 
-Placeholder distractor 1
+Automatic state management.
 
 ---
 
-Placeholder distractor 2
+Built-in routing capabilities.
 
 ---
 
-Placeholder distractor 3
+Declarative UI rendering.
 
 #### --answer--
 
-Placeholder answer
+Increased verbosity and manual DOM manipulation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a single-page application typically update the view?
 
 #### --distractors--
 
-Placeholder distractor 1
+By making a full server reload.
 
 ---
 
-Placeholder distractor 2
+By reloading the entire HTML document.
 
 ---
 
-Placeholder distractor 3
+By using server-side rendering only.
 
 #### --answer--
 
-Placeholder answer
+By updating only the necessary parts of the page.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to create a functional React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+Using classes only.
 
 ---
 
-Placeholder distractor 2
+Using the `React.Component` only.
 
 ---
 
-Placeholder distractor 3
+Using JavaScript constructors.
 
 #### --answer--
 
-Placeholder answer
+Using the `function` keyword or arrow functions.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is not a valid JSX element?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<div className='class'></div>`
 
 ---
 
-Placeholder distractor 2
+`<span>Hello World</span>`
 
 ---
 
-Placeholder distractor 3
+`<button>Click Me</button>`
 
 #### --answer--
 
-Placeholder answer
+`<img class='img'>`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is an example of a meta framework for React?
 
 #### --distractors--
 
-Placeholder distractor 1
+Vue.js
 
 ---
 
-Placeholder distractor 2
+Angular
 
 ---
 
-Placeholder distractor 3
+Svelte
 
 #### --answer--
 
-Placeholder answer
+Next.js
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What tool would you use to bootstrap a new React project?
 
 #### --distractors--
 
-Placeholder distractor 1
+Webpack
 
 ---
 
-Placeholder distractor 2
+npm
 
 ---
 
-Placeholder distractor 3
+Babel
 
 #### --answer--
 
-Placeholder answer
+Vite
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command installs dependencies listed in `package.json`?
 
 #### --distractors--
 
-Placeholder distractor 1
+`npm run`
 
 ---
 
-Placeholder distractor 2
+`npm update`
 
 ---
 
-Placeholder distractor 3
+`npm build`
 
 #### --answer--
 
-Placeholder answer
+`npm install`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How would you pass a `name` prop to a child component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<ChildComponent props="name" />`
 
 ---
 
-Placeholder distractor 2
+`<ChildComponent {props} />`
 
 ---
 
-Placeholder distractor 3
+`<ChildComponent {'John'} />`
 
 #### --answer--
 
-Placeholder answer
+`<ChildComponent name="Vignesh" />`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to conditionally render a component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<Home/>`
 
 ---
 
-Placeholder distractor 2
+`<Home>isLoggedIn</Home>`
 
 ---
 
-Placeholder distractor 3
+`<Home showIf={isLoggedIn} />`
 
 #### --answer--
 
-Placeholder answer
+`{isLoggedIn ? <Home /> : <Login />}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a child component, how do you access the `name` prop passed from a parent component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`this.props.name`
 
 ---
 
-Placeholder distractor 2
+`this.name`
 
 ---
 
-Placeholder distractor 3
+`{props}.name`
 
 #### --answer--
 
-Placeholder answer
+`props.name`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to add an inline style in React?
 
 #### --distractors--
 
-Placeholder distractor 1
+`style={{ color: blue }}`
 
 ---
 
-Placeholder distractor 2
+`style="color: blue"`
 
 ---
 
-Placeholder distractor 3
+`style: { color: 'blue' }`
 
 #### --answer--
 
-Placeholder answer
+`style={{ color: 'blue' }}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to conditionally render a React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+Using `if` statements inside JSX.
 
 ---
 
-Placeholder distractor 2
+Declaring a new component inside a `render()` method.
 
 ---
 
-Placeholder distractor 3
+Using `while` loops inside JSX.
 
 #### --answer--
 
-Placeholder answer
+Using ternary operators or logical `&&` operators within JSX.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What causes a React component to re-render?
 
 #### --distractors--
 
-Placeholder distractor 1
+Directly modifying the state variable.
 
 ---
 
-Placeholder distractor 2
+Calling the `render()` method.
 
 ---
 
-Placeholder distractor 3
+Recompiling the project.
 
 #### --answer--
 
-Placeholder answer
+Changing the state using `setState`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How would you specify a required `name` prop using `PropTypes`?
 
 #### --distractors--
 
-Placeholder distractor 1
+`name: PropTypes.bool`
 
 ---
 
-Placeholder distractor 2
+`name: PropTypes.array.isRequired`
 
 ---
 
-Placeholder distractor 3
+`name: PropTypes.string`
 
 #### --answer--
 
-Placeholder answer
+`name: PropTypes.string.isRequired`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What file is used to define project dependencies in a React/Node.js project?
 
 #### --distractors--
 
-Placeholder distractor 1
+`package.lock.json`
 
 ---
 
-Placeholder distractor 2
+`index.html`
 
 ---
 
-Placeholder distractor 3
+`webpack.config.js`
 
 #### --answer--
 
-Placeholder answer
+`package.json`
+
 
diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/swahili/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
index 79e4cb7a88..6855b5dea7 100644
--- a/curriculum/challenges/swahili/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
+++ b/curriculum/challenges/swahili/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What is a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A database structured to recognize non-relation between stored items.
 
 ---
 
-Placeholder distractor 2
+A database that stores unstructured data.
 
 ---
 
-Placeholder distractor 3
+A flat file-based system.
 
 #### --answer--
 
-Placeholder answer
+A database structured to recognize relations between stored items.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a non-relational database differ from a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Non-relational databases use tables, while relational databases do not.
 
 ---
 
-Placeholder distractor 2
+Relational databases can store unstructured data.
 
 ---
 
-Placeholder distractor 3
+Non-relational databases are slower than relational databases.
 
 #### --answer--
 
-Placeholder answer
+Non-relational databases can store unstructured data.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `\l` command do when executed in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all schemas
 
 ---
 
-Placeholder distractor 2
+Lists all tables
 
 ---
 
-Placeholder distractor 3
+Connects to a database
 
 #### --answer--
 
-Placeholder answer
+Lists all databases
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following commands creates a new table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD TABLE`
 
 ---
 
-Placeholder distractor 2
+`NEW TABLE`
 
 ---
 
-Placeholder distractor 3
+`ALTER TABLE`
 
 #### --answer--
 
-Placeholder answer
+`CREATE TABLE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of a foreign key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To allow duplication of data.
 
 ---
 
-Placeholder distractor 2
+To uniquely identify a row in the table.
 
 ---
 
-Placeholder distractor 3
+To store large amounts of text data.
 
 #### --answer--
 
-Placeholder answer
+To create a relationship between two tables.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command will add a new column to an existing table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD COLUMN column_name TO table_name data_type;`
 
 ---
 
-Placeholder distractor 2
+`INSERT COLUMN column_name INTO table_name data_type;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name ADD COLUMN column_name data_type;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name ADD COLUMN column_name data_type;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What type of relationship exists when one record in Table A corresponds to one or more records in Table B?
 
 #### --distractors--
 
-Placeholder distractor 1
+One-to-One (1-1)
 
 ---
 
-Placeholder distractor 2
+Many-to-Many (m-m)
 
 ---
 
-Placeholder distractor 3
+Many-to-one(m-1)
 
 #### --answer--
 
-Placeholder answer
+One-to-Many (1-m)
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary purpose of normalization in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To increase the speed of data retrieval.
 
 ---
 
-Placeholder distractor 2
+To enforce security measures.
 
 ---
 
-Placeholder distractor 3
+To simplify the database schema.
 
 #### --answer--
 
-Placeholder answer
+To eliminate data redundancy and ensure data integrity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you delete a column from a table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 2
+`DELETE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name DELETE column_name;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name DROP COLUMN column_name;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the function of the `PRIMARY KEY` constraint in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+To link two tables together.
 
 ---
 
-Placeholder distractor 2
+To define the default value for a column.
 
 ---
 
-Placeholder distractor 3
+To allow null values in the column.
 
 #### --answer--
 
-Placeholder answer
+To ensure that the column contains unique values.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the command `\c` do in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all tables in the current database.
 
 ---
 
-Placeholder distractor 2
+Displays the current database connection details.
 
 ---
 
-Placeholder distractor 3
+Exits the `psql` shell.
 
 #### --answer--
 
-Placeholder answer
+Connects to the specified database.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command inserts data into a table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`PUT VALUES`
 
 ---
 
-Placeholder distractor 2
+`UPDATE INTO`
 
 ---
 
-Placeholder distractor 3
+`ADD DATA`
 
 #### --answer--
 
-Placeholder answer
+`INSERT INTO`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you rename a column in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`MODIFY COLUMN`
 
 ---
 
-Placeholder distractor 2
+`CHANGE COLUMN`
 
 ---
 
-Placeholder distractor 3
+`ALTER COLUMN`
 
 #### --answer--
 
-Placeholder answer
+`RENAME COLUMN`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which query will delete all records from the employees table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE ALL`
 
 ---
 
-Placeholder distractor 2
+`TRUNCATE employees`
 
 ---
 
-Placeholder distractor 3
+`DROP RECORDS`
 
 #### --answer--
 
-Placeholder answer
+`DELETE FROM employees`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which SQL constraint specifically ensures that a column can contain only unique values, allowing nulls?
 
 #### --distractors--
 
-Placeholder distractor 1
+`NOT NULL`
 
 ---
 
-Placeholder distractor 2
+`FOREIGN KEY`
 
 ---
 
-Placeholder distractor 3
+`PRIMARY KEY`
 
 #### --answer--
 
-Placeholder answer
+`UNIQUE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a relational database, what is an index used for?
 
 #### --distractors--
 
-Placeholder distractor 1
+To store additional metadata about tables.
 
 ---
 
-Placeholder distractor 2
+To ensure unique values in a column.
 
 ---
 
-Placeholder distractor 3
+To enforce data integrity.
 
 #### --answer--
 
-Placeholder answer
+To speed up data retrieval.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does a one-to-one (1-1) relationship represent in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Each record in Table A corresponds to one or more records in Table B.
 
 ---
 
-Placeholder distractor 2
+Each record in Table A corresponds to no records in Table B.
 
 ---
 
-Placeholder distractor 3
+Each record in Table A corresponds to multiple records in Table B and vice versa.
 
 #### --answer--
 
-Placeholder answer
+Each record in Table A corresponds to exactly one record in Table B.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command will list all tables in the current PostgreSQL database?
 
 #### --distractors--
 
-Placeholder distractor 1
+`\l`
 
 ---
 
-Placeholder distractor 2
+`SHOW TABLES`
 
 ---
 
-Placeholder distractor 3
+`\t`
 
 #### --answer--
 
-Placeholder answer
+`\d`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md b/curriculum/challenges/swahili/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
index 6a4965d122..af439d1aab 100644
--- a/curriculum/challenges/swahili/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
+++ b/curriculum/challenges/swahili/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+What CSS property is commonly used to create a flexible layout in a container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`display: block;`
 
 ---
 
-Placeholder distractor 2
+`display: inline;`
 
 ---
 
-Placeholder distractor 3
+`display: table;`
 
 #### --answer--
 
-Placeholder answer
+`display: flex;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the main purpose of media queries in responsive web design?
 
 #### --distractors--
 
-Placeholder distractor 1
+To change the color scheme of the page.
 
 ---
 
-Placeholder distractor 2
+To create animations.
 
 ---
 
-Placeholder distractor 3
+To adjust margins for print pages.
 
 #### --answer--
 
-Placeholder answer
+To apply different styles based on the screen size or device type.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which media feature in a media query checks the width of the browser window?
 
 #### --distractors--
 
-Placeholder distractor 1
+`min-height`
 
 ---
 
-Placeholder distractor 2
+`max-aspect-ratio`
 
 ---
 
-Placeholder distractor 3
+`resolution`
 
 #### --answer--
 
-Placeholder answer
+`min-width`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which CSS unit is relative to the width of the viewport?
 
 #### --distractors--
 
-Placeholder distractor 1
+`em`
 
 ---
 
-Placeholder distractor 2
+`px`
 
 ---
 
-Placeholder distractor 3
+`rem`
 
 #### --answer--
 
-Placeholder answer
+`vw`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does mobile-first design emphasize?
 
 #### --distractors--
 
-Placeholder distractor 1
+Designing for desktops and scaling down for smaller devices.
 
 ---
 
-Placeholder distractor 2
+Using only desktop breakpoints.
 
 ---
 
-Placeholder distractor 3
+Focusing on the highest resolution devices first.
 
 #### --answer--
 
-Placeholder answer
+Designing for smaller screens first and scaling up for larger devices.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which media query will apply styles when the device's width is between 600px and 1200px?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 1200px)`
 
 ---
 
-Placeholder distractor 2
+`@media screen and (min-width: 600px)`
 
 ---
 
-Placeholder distractor 3
+`@media screen and (width: 800px)`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 600px) and (max-width: 1200px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default flex-direction value in Flexbox?
 
 #### --distractors--
 
-Placeholder distractor 1
+`column`
 
 ---
 
-Placeholder distractor 2
+`row-reverse`
 
 ---
 
-Placeholder distractor 3
+`column-reverse`
 
 #### --answer--
 
-Placeholder answer
+`row`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In Flexbox, how do you distribute space between items in a container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`align-items`
 
 ---
 
-Placeholder distractor 2
+`flex-grow`
 
 ---
 
-Placeholder distractor 3
+`flex-wrap`
 
 #### --answer--
 
-Placeholder answer
+`justify-content`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you apply a grid layout to a container in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`display: flexbox;`
 
 ---
 
-Placeholder distractor 2
+`display: block;`
 
 ---
 
-Placeholder distractor 3
+`display: table;`
 
 #### --answer--
 
-Placeholder answer
+`display: grid;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `fr` unit represent in CSS Grid?
 
 #### --distractors--
 
-Placeholder distractor 1
+Flexible ratio
 
 ---
 
-Placeholder distractor 2
+Frame ratio
 
 ---
 
-Placeholder distractor 3
+Fixed region
 
 #### --answer--
 
-Placeholder answer
+Fraction of available space
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is a valid media query for targeting devices with a resolution of 2x or higher?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media (resolution: 2x)`
 
 ---
 
-Placeholder distractor 2
+`@media (max-resolution: 2x)`
 
 ---
 
-Placeholder distractor 3
+`@media screen and (min-width: 1200px)`
 
 #### --answer--
 
-Placeholder answer
+`@media (min-resolution: 2px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which property controls the number of columns in a grid container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`grid-template-rows`
 
 ---
 
-Placeholder distractor 2
+`grid-auto-rows`
 
 ---
 
-Placeholder distractor 3
+`grid-template`
 
 #### --answer--
 
-Placeholder answer
+`grid-template-columns`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you set up a media query for screens larger than 768px?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 768px)`
 
 ---
 
-Placeholder distractor 2
+`@media only screen and (width > 768px)`
 
 ---
 
-Placeholder distractor 3
+`@media (screen-width: 768px)`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 768px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `flex-wrap` property in Flexbox?
 
 #### --distractors--
 
-Placeholder distractor 1
+To align items along the cross axis.
 
 ---
 
-Placeholder distractor 2
+To reverse the order of flex items.
 
 ---
 
-Placeholder distractor 3
+To distribute space evenly between items.
 
 #### --answer--
 
-Placeholder answer
+To allow flex items to wrap onto multiple lines.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following breakpoints is commonly used for tablets in responsive web design?
 
 #### --distractors--
 
-Placeholder distractor 1
+`480px`
 
 ---
 
-Placeholder distractor 2
+`1920px`
 
 ---
 
-Placeholder distractor 3
+`2560px`
 
 #### --answer--
 
-Placeholder answer
+`768px`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you center an item horizontally in a flex container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`align-items: center;`
 
 ---
 
-Placeholder distractor 2
+`flex-direction: row;`
 
 ---
 
-Placeholder distractor 3
+`flex-grow: 1;`
 
 #### --answer--
 
-Placeholder answer
+`justify-content: center;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In mobile-first design, which media query should be used to target larger screens?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 600px)`
 
 ---
 
-Placeholder distractor 2
+`@media screen and (height: 600px)`
 
 ---
 
-Placeholder distractor 3
+`@media only screen`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 600px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which CSS property is used to create a layout that adjusts based on screen size without media queries?
 
 #### --distractors--
 
-Placeholder distractor 1
+`float`
 
 ---
 
-Placeholder distractor 2
+`display: block`
 
 ---
 
-Placeholder distractor 3
+`width: 100%`
 
 #### --answer--
 
-Placeholder answer
+`flex`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you prevent a flex container from shrinking smaller than its content?
 
 #### --distractors--
 
-Placeholder distractor 1
+`flex-shrink: 1;`
 
 ---
 
-Placeholder distractor 2
+`flex-direction: column;`
 
 ---
 
-Placeholder distractor 3
+`align-items: flex-start;`
 
 #### --answer--
 
-Placeholder answer
+`flex-shrink: 0;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you create a responsive image that scales with the width of its container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`max-height: 100%;`
 
 ---
 
-Placeholder distractor 2
+`object-fit: contain;`
 
 ---
 
-Placeholder distractor 3
+`min-width: 100%;`
 
 #### --answer--
 
-Placeholder answer
+`max-width: 100%;`
 
diff --git a/curriculum/challenges/swahili/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md b/curriculum/challenges/swahili/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
index 47b4ceeba0..4d67427ccc 100644
--- a/curriculum/challenges/swahili/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
+++ b/curriculum/challenges/swahili/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
 
 #### --text--
 
-Placeholder question
+Which of the following is a common issue with the `datetime-local` input type?
 
 #### --distractors--
 
-Placeholder distractor 1
+It cannot be used with CSS variables.
 
 ---
 
-Placeholder distractor 2
+It automatically submits the form upon value selection.
 
 ---
 
-Placeholder distractor 3
+It does not support real-time updates.
 
 #### --answer--
 
-Placeholder answer
+The input format is different across browsers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why is it important to use `box-sizing: border-box;` when styling text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the text input focusable with a keyboard.
 
 ---
 
-Placeholder distractor 2
+It hides the input’s placeholder text.
 
 ---
 
-Placeholder distractor 3
+It removes the default browser styling for inputs.
 
 #### --answer--
 
-Placeholder answer
+It ensures padding and borders are included in the element’s width and height.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a benefit of setting a max-width for text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It prevents users from entering long text.
 
 ---
 
-Placeholder distractor 2
+It makes the input unresponsive on larger screens.
 
 ---
 
-Placeholder distractor 3
+It automatically adjusts the font size.
 
 #### --answer--
 
-Placeholder answer
+It ensures the input doesn’t stretch too wide on larger screens.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should you add `:focus` styles to text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It hides the input’s border.
 
 ---
 
-Placeholder distractor 2
+It disables user input.
 
 ---
 
-Placeholder distractor 3
+It forces the browser to ignore default styles.
 
 #### --answer--
 
-Placeholder answer
+It improves accessibility by making the input easier to identify when focused.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you prevent text inputs from being cut off when resized?
 
 #### --distractors--
 
-Placeholder distractor 1
+By adding `overflow: hidden;`.
 
 ---
 
-Placeholder distractor 2
+By setting a fixed height and width.
 
 ---
 
-Placeholder distractor 3
+By removing padding from the input.
 
 #### --answer--
 
-Placeholder answer
+By using padding and line-height with flexible units like `em` or `rem`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why is it important to use descriptive placeholder text in form inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It helps to pre-fill the form for the user.
 
 ---
 
-Placeholder distractor 2
+It automatically validates the input as the user types.
 
 ---
 
-Placeholder distractor 3
+It hides the input label, reducing visual clutter.
 
 #### --answer--
 
-Placeholder answer
+It provides users with guidance on the expected input format without cluttering the interface.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should you avoid using `outline: none;` without adding a custom focus style?
 
 #### --distractors--
 
-Placeholder distractor 1
+It reduces the size of the text input.
 
 ---
 
-Placeholder distractor 2
+It hides the input from assistive technology users.
 
 ---
 
-Placeholder distractor 3
+It makes the input read-only.
 
 #### --answer--
 
-Placeholder answer
+It removes the focus outline, which may confuse users about which field is selected.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of using Flexbox or Grid for form layout?
 
 #### --distractors--
 
-Placeholder distractor 1
+To make form controls appear in random positions.
 
 ---
 
-Placeholder distractor 2
+To make the form smaller on mobile devices.
 
 ---
 
-Placeholder distractor 3
+To hide form controls on large screens.
 
 #### --answer--
 
-Placeholder answer
+To create a well-structured and responsive form layout.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should input elements be styled with a solid border?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the form look more colorful.
 
 ---
 
-Placeholder distractor 2
+It automatically increases form field size.
 
 ---
 
-Placeholder distractor 3
+It forces users to zoom in on mobile devices.
 
 #### --answer--
 
-Placeholder answer
+To ensure input fields are clearly visible and easily recognizable as form controls.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does increasing the margin between form elements affect form usability?
 
 #### --distractors--
 
-Placeholder distractor 1
+It decreases accessibility on mobile devices.
 
 ---
 
-Placeholder distractor 2
+It prevents users from submitting the form.
 
 ---
 
-Placeholder distractor 3
+It hides form labels.
 
 #### --answer--
 
-Placeholder answer
+It improves readability by helping users see the grouping of related form elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary reason for using `appearance: none` in form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+To add new default styles to form elements.
 
 ---
 
-Placeholder distractor 2
+To enable form elements to appear larger on mobile devices.
 
 ---
 
-Placeholder distractor 3
+To disable form validation for specific elements.
 
 #### --answer--
 
-Placeholder answer
+To remove the default browser styling from form elements and apply custom styles.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which type of form elements is commonly styled using `appearance: none` to remove their default look?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<label>` elements
 
 ---
 
-Placeholder distractor 2
+`<div>` elements
 
 ---
 
-Placeholder distractor 3
+`<span>` elements
 
 #### --answer--
 
-Placeholder answer
+`<input>` and `<select>` elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When should you avoid using `appearance: none` on form controls?
 
 #### --distractors--
 
-Placeholder distractor 1
+When you want to fully customize the form control's style.
 
 ---
 
-Placeholder distractor 2
+When the browser’s default styles are hard to override.
 
 ---
 
-Placeholder distractor 3
+When you are building a mobile-first responsive form.
 
 #### --answer--
 
-Placeholder answer
+When relying on the accessibility and familiarity of native form control appearances.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can using `appearance: none` improve the design of radio buttons and checkboxes?
 
 #### --distractors--
 
-Placeholder distractor 1
+It increases the size of radio buttons and checkboxes.
 
 ---
 
-Placeholder distractor 2
+It automatically creates animation effects for radio buttons and checkboxes.
 
 ---
 
-Placeholder distractor 3
+It prevents users from interacting with radio buttons and checkboxes.
 
 #### --answer--
 
-Placeholder answer
+It removes the browser's default appearance, allowing you to fully customize the design.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a common issue that arises when using `appearance: none` on a select element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the `select` element invisible.
 
 ---
 
-Placeholder distractor 2
+It disables the dropdown functionality.
 
 ---
 
-Placeholder distractor 3
+It breaks form validation.
 
 #### --answer--
 
-Placeholder answer
+It removes the dropdown arrow, requiring you to add a custom arrow or indicator.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can occur when using HTML5 validation attributes like `required` without custom messaging?
 
 #### --distractors--
 
-Placeholder distractor 1
+It automatically validates all inputs without user interaction.
 
 ---
 
-Placeholder distractor 2
+It prevents the form from being submitted if all fields are filled.
 
 ---
 
-Placeholder distractor 3
+It allows users to see detailed error messages for each input.
 
 #### --answer--
 
-Placeholder answer
+Users may not understand why their submission fails, leading to frustration if no helpful feedback is provided.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can arise when no margin is added between the header and the content?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the content load faster.
 
 ---
 
-Placeholder distractor 2
+It improves the overall readability of the content.
 
 ---
 
-Placeholder distractor 3
+It automatically centers the content under the header.
 
 #### --answer--
 
-Placeholder answer
+The content may appear cramped or overlap with the header, making it difficult to read and reducing visual clarity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue may arise with custom fonts when used in form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+They may not display correctly on all browsers.
 
 ---
 
-Placeholder distractor 2
+They always load faster than system fonts.
 
 ---
 
-Placeholder distractor 3
+They prevent the use of responsive design.
 
 #### --answer--
 
-Placeholder answer
+Custom fonts may not be accessible to users if they are not properly loaded or fallback fonts are not specified.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can arise when using `overflow: hidden;` on form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+It improves the form’s overall accessibility.
 
 ---
 
-Placeholder distractor 2
+It automatically adjusts the form to fit within smaller screens.
 
 ---
 
-Placeholder distractor 3
+It ensures that all text content is always visible.
 
 #### --answer--
 
-Placeholder answer
+It can cause content, such as text or labels, to be cut off if the element is resized or if padding is used incorrectly.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What common problem arises when submitting form data that includes `color` input?
 
 #### --distractors--
 
-Placeholder distractor 1
+The `color` value gets automatically converted to grayscale.
 
 ---
 
-Placeholder distractor 2
+The browser displays an alert before submitting the form.
 
 ---
 
-Placeholder distractor 3
+It replaces the `color` value with a default value.
 
 #### --answer--
 
-Placeholder answer
+The `color` input value is submitted as a hexadecimal string, which may require formatting on the server.
 
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
new file mode 100644
index 0000000000..8931930aa3
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
@@ -0,0 +1,61 @@
+---
+id: 61fd5a93fd62bb35968adeab
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Begin your project by giving your `head` element a `link` element for your stylesheet.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert(/<link/.test(code))
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i))
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
new file mode 100644
index 0000000000..ae59503cca
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
@@ -0,0 +1,48 @@
+---
+id: 61fd6343fb42013d99bcd7f3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Within your `body` element, nest a `section` element within a `main` element.
+
+# --hints--
+
+The first element inside the `body` element should be your `main` element.
+
+```js
+assert(document.querySelector('body')?.children?.[0]?.localName === 'main');
+```
+
+You should have a `section` element within your `main` element.
+
+```js
+assert(document.querySelector('main')?.children?.[0]?.localName === 'section');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
new file mode 100644
index 0000000000..345621fb1d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
@@ -0,0 +1,52 @@
+---
+id: 61fd66c687e610436494c6f1
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `section` element, add an `h1` element with a nested `span` element.
+
+# --hints--
+
+Your `section` element should have an `h1` element.
+
+```js
+assert(document.querySelector('section')?.children?.[0]?.localName === 'h1');
+```
+
+Your `h1` element should have a `span` element.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.localName === 'span');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+--fcc-editable-region--
+      <section>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
new file mode 100644
index 0000000000..0be766dccc
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
@@ -0,0 +1,78 @@
+---
+id: 61fd67a656743144844941cb
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Screen readers announce HTML elements based on the document flow. We will eventually want the balance sheet to have a heading of "Balance Sheet" and a subheading of "AcmeWidgetCorp". However, this order does not make sense if announced by a screen reader.
+
+Give your existing `span` the `class` attribute set to `flex`, and add two `span` elements within it. Give the first the text `AcmeWidgetCorp`. Give the second the text `Balance Sheet`. You will use CSS to reverse the order of the text on the page, but the HTML order will make more sense for a screen reader.
+
+# --hints--
+
+Your existing `span` element should have the `class` attribute set to `flex`.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
+```
+
+Your existing `span` element should have two new `span` elements within it.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
+assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
+```
+
+Your new `span` elements should not have a `class` attribute.
+
+```js
+assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
+assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
+```
+
+Your first new `span` element should have the text `AcmeWidgetCorp`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
+```
+
+Your second new `span` element should have the text `Balance Sheet`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+--fcc-editable-region--
+          <span>
+          </span>
+--fcc-editable-region--
+        </h1>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
new file mode 100644
index 0000000000..2d5052298f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
@@ -0,0 +1,65 @@
+---
+id: 61fd6ab779390f49148773bb
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Below your `h1` element, create a `div` element. Give it an `id` attribute set to `years`. You want this particular element to be hidden from screen readers, so give it the `aria-hidden` attribute set to `true`.
+
+# --hints--
+
+You should create a new `div` element after your `h1` element.
+
+```js
+assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div');
+```
+
+Your new `div` element should have an `id` attribute set to `years`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('id') === 'years');
+```
+
+Your new `div` element should have the `aria-hidden` attribute set to `true`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
new file mode 100644
index 0000000000..f01ff5c2b6
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
@@ -0,0 +1,79 @@
+---
+id: 61fd6b7c83dbf54a08cf0498
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within your `div` element, add three `span` elements. Give each of them a `class` attribute set to `year`, and add the following text (in order): `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Your `div` element should have three `span` elements.
+
+```js
+assert(document.querySelector('div')?.children?.length === 3);
+```
+
+Each `span` element should have a `class` attribute set to `year`.
+
+```js
+const spans = [...document.querySelector('div')?.children];
+spans.forEach(span => assert(span?.classList?.contains('year')));
+```
+
+Your first `span` should have the text `2019`.
+
+```js
+assert(document.querySelector('div')?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` should have the text `2020`.
+
+```js
+assert(document.querySelector('div')?.children?.[1]?.textContent === '2020');
+```
+
+Your third `span` should have the text `2021`.
+
+```js
+assert(document.querySelector('div')?.children?.[2]?.textContent === '2021');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+        <div id="years" aria-hidden="true">
+        </div>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
new file mode 100644
index 0000000000..b8ccec8b81
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
@@ -0,0 +1,80 @@
+---
+id: 61fd6cc9475a784b7776233e
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Below your existing `div` element, add a new `div` element with a `class` set to `table-wrap`. This will be the container for your tables.
+
+Within that, add three `table` elements. You will be using CSS to style these into a single table, but using separate tables will help screen readers understand the document flow.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+Your new `div` element should have the `class` set to `table-wrap`.
+
+```js
+assert(document.querySelector('.table-wrap')?.localName === 'div');
+```
+
+Your `.table-wrap` element should come after your existing `div`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap'));
+```
+
+Your `.table-wrap` element should have three `table` elements.
+
+```js
+const children = [...(document.querySelector('.table-wrap')?.children ?? [])];
+assert(children?.length === 3);
+children.forEach(child => assert(child?.localName === 'table'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
new file mode 100644
index 0000000000..630d13d656
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
@@ -0,0 +1,73 @@
+---
+id: 61fd70336ebb3e4f62ee81ba
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+HTML tables use the `caption` element to describe what the table is about. The `caption` element should always be the first child of a `table`, but can be positioned with the `caption-side` CSS property.
+
+Add a `caption` element to your first `table`, and give it the text `Assets`.
+
+# --hints--
+
+Your first `table` element should have a `caption` element.
+
+```js
+assert(document.querySelector('table')?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Assets`.
+
+```js
+assert(document.querySelector('caption')?.textContent === 'Assets');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
new file mode 100644
index 0000000000..2e0c363fd1
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
@@ -0,0 +1,86 @@
+---
+id: 61fd719788899952e67692b9
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+The `thead` and `tbody` elements are used to indicate which portion of your table is the header, and which portion contains the primary data or content.
+
+Add a `thead` and `tbody` to your first `table`, below the `caption` element.
+
+# --hints--
+
+Your first `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('thead'));
+```
+
+Your first `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+            <caption>Assets</caption>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
new file mode 100644
index 0000000000..083e60b9e9
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
@@ -0,0 +1,86 @@
+---
+id: 61fd71d596e8f253b9408b39
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+The `tr` element is used to indicate a table row. Add a `tr` element within your `thead` element. In your new `tr` element, add a `td` element, followed by three `th` elements.
+
+The `td` element indicates a data cell, while the `th` element indicates a header cell.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
new file mode 100644
index 0000000000..2bb7733877
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
@@ -0,0 +1,125 @@
+---
+id: 61fd75ea7f663457612dba02
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Within each of your new `th` elements, nest a `span` element with the `class` set to `sr-only year`. Give them the following text (in order): `2019`, `2020`, and `2021`.
+
+Give your third `th` element the `class` attribute set to `current`.
+
+Leave the `td` element empty. This element exists only to ensure your table has a four-column layout and associate the headers with the correct columns.
+
+# --hints--
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only year`.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+  assert(th?.children?.[0]?.classList?.contains('year'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your third `th` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current'));
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
new file mode 100644
index 0000000000..e45bc92ba6
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
@@ -0,0 +1,96 @@
+---
+id: 61fd7648a7ba2e5882436831
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Within your `tbody` element, add four `tr` elements. Give the first three a `class` attribute set to `data`, and the fourth a `class` attribute set to `total`.
+
+# --hints--
+
+Your `tbody` element should have four `tr` elements.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+Your first three `tr` elements should have the `class` attribute set to `data`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+Your fourth `tr` element should have the `class` attribute set to `total`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+--fcc-editable-region--
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
new file mode 100644
index 0000000000..413771781f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
@@ -0,0 +1,134 @@
+---
+id: 61fd778081276b59d59abad6
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+In your first `tr`, add a `th` element with the text `Cash This is the cash we currently have on hand.`. Wrap all of that text except `Cash` in a `span` element with the `class` set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$25`, `$30`, `$28`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your first `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Cash This is the cash we currently have on hand.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.');
+```
+
+You should wrap the text `This is the cash we currently have on hand.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$25`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$25');
+```
+
+Your second `td` element should have the text `$30`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$30');
+```
+
+Your third `td` element should have the text `$28`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$28');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
new file mode 100644
index 0000000000..65782d0b1e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
@@ -0,0 +1,138 @@
+---
+id: 61fd77f7ad2aeb5ae34d07d6
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In your second `tr` element, add a `th` element with the text `Checking Our primary transactional account.`. Wrap that text, except for `Checking`, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$54`, `$56`, `$53`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your second `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Checking Our primary transactional account.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.');
+```
+
+You should wrap the text `Our primary transactional account.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$54`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$54');
+```
+
+Your second `td` element should have the text `$56`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$56');
+```
+
+Your third `td` element should have the text `$53`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$53');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
new file mode 100644
index 0000000000..e0aef0b407
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
@@ -0,0 +1,142 @@
+---
+id: 61fd78621573aa5e8b512f5e
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In your third `tr` element, add a `th` element with the text `Savings Funds set aside for emergencies.`. Wrap that text, except for `Savings`, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$500`, `$650`, `$728`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your third `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Savings Funds set aside for emergencies.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.');
+```
+
+You should wrap the text `Funds set aside for emergencies.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$500`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+Your second `td` element should have the text `$650`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650');
+```
+
+Your third `td` element should have the text `$728`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
new file mode 100644
index 0000000000..2f7c60f29f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
@@ -0,0 +1,146 @@
+---
+id: 61fd7a160ed17960e971f28b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+In your fourth `tr` element, add a `th` element with the text `Total Assets`. Wrap the text `Assets` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$579`, `$736`, `$809`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your fourth `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Assets`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets');
+```
+
+You should wrap the text `Assets` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Assets');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$579`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579');
+```
+
+Your second `td` element should have the text `$736`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736');
+```
+
+Your third `td` element should have the text `$809`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
+```
+
+Your third `td` element should have the `class` attribute set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
new file mode 100644
index 0000000000..184f5dee82
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
@@ -0,0 +1,130 @@
+---
+id: 61fd7b3fcaa5406257abc5d1
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Time to move on to your second table. Start by giving it a `caption` element set to `Liabilities`. Then add your `thead` and `tbody`.
+
+# --hints--
+
+Your second `table` element should have a `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities');
+```
+
+Your second `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead'));
+```
+
+Your second `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
new file mode 100644
index 0000000000..40f7da84cd
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
@@ -0,0 +1,119 @@
+---
+id: 61fd8e491324ce717da97ffe
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Within your `thead`, add a `tr`. Inside that, add a `td` and three `th` elements.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
new file mode 100644
index 0000000000..55c85fb133
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
@@ -0,0 +1,149 @@
+---
+id: 61fd8fd08af43372f02952d0
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Give each `th` element a `span` element with the class set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
new file mode 100644
index 0000000000..abec451e89
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
@@ -0,0 +1,131 @@
+---
+id: 61fd9126aa72a474301fc49f
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Within the `tbody` element, add four `tr` elements. Give the first three the `class` attribute set to `data`, and the fourth the `class` attribute set to `total`.
+
+# --hints--
+
+Your `tbody` element should have four `tr` elements.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+Your first three `tr` elements should have the `class` attribute set to `data`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+Your fourth `tr` element should have the `class` attribute set to `total`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
new file mode 100644
index 0000000000..58a2b1e9bc
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
@@ -0,0 +1,169 @@
+---
+id: 61fd933ba685de776a94997e
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Within the first `tr`, add a `th` element with the text `Loans The outstanding balance on our startup loan.`. Wrap that text, except for `Loans`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$500`, `$250`, and `$0`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your first `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Loans The outstanding balance on our startup loan.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.');
+```
+
+You should wrap the text `The outstanding balance on our startup loan.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$500`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+Your second `td` element should have the text `$250`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$250');
+```
+
+Your third `td` element should have the text `$0`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$0');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
new file mode 100644
index 0000000000..1f8839c68a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
@@ -0,0 +1,173 @@
+---
+id: 61fd94056e0355785fbba4d3
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Within the second `tr`, add a `th` element with the text `Expenses Annual anticipated expenses, such as payroll.`. Wrap that text, except for `Expenses`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$200`, `$300`, and `$400`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your second `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Expenses Annual anticipated expenses, such as payroll.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.');
+```
+
+You should wrap the text `Annual anticipated expenses, such as payroll.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$200`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$200');
+```
+
+Your second `td` element should have the text `$300`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$300');
+```
+
+Your third `td` element should have the text `$400`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$400');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
new file mode 100644
index 0000000000..a7289e5738
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
@@ -0,0 +1,177 @@
+---
+id: 61fd986ddbcbd47ba8fbc5ec
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Within the third `tr`, add a `th` element with the text `Credit The outstanding balance on our credit card.`. Wrap that text, except for `Credit`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$50`, `$50`, and `$75`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your third `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Credit The outstanding balance on our credit card.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.');
+```
+
+You should wrap the text `The outstanding balance on our credit card.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$50');
+```
+
+Your second `td` element should have the text `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$50');
+```
+
+Your third `td` element should have the text `$75`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$75');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
new file mode 100644
index 0000000000..630afca73e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -0,0 +1,181 @@
+---
+id: 61fd990577d8227dd93fbeeb
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In your fourth `tr` element, add a `th` element with the text `Total Liabilities`. Wrap the text `Liabilities` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$750`, `$600`, `$475`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your fourth `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities');
+```
+
+You should wrap the text `Liabilities` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$750`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750');
+```
+
+Your second `td` element should have the text `$600`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600');
+```
+
+Your third `td` element should have the text `$475`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
new file mode 100644
index 0000000000..e2d2e4f80e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
@@ -0,0 +1,165 @@
+---
+id: 61fd9a4ff2fc4481b9157bd7
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+For your third table, add a `caption` with the text `Net Worth`, and set up a table header and table body.
+
+# --hints--
+
+Your third `table` element should have a `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth');
+```
+
+Your third `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead'));
+```
+
+Your third `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
new file mode 100644
index 0000000000..a6d495c907
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
@@ -0,0 +1,198 @@
+---
+id: 61fd9ad665a4a282c8106be3
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Within your `thead`, create a `tr` element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
new file mode 100644
index 0000000000..d0c5452488
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
@@ -0,0 +1,208 @@
+---
+id: 61fd9b7285bde783ad5b8aac
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Within the `tbody`, add a `tr` with the `class` set to `total`. In that, add a `th` with the text `Total Net Worth`, and wrap `Net Worth` in a `span` with the `class` set to `sr-only`.
+
+Then add three `td` elements, giving the third a `class` set to `current`, and giving each the following text: `$-171`, `$136`, `$334`.
+
+# --hints--
+
+Your `tbody` element should have one `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
+```
+
+Your `tr` element should have the `class` set to `total`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total'));
+```
+
+Your `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth');
+```
+
+You should wrap the text `Net Worth` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$-171`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171');
+```
+
+Your second `td` element should have the text `$136`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136');
+```
+
+Your third `td` element should have the text `$334`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
new file mode 100644
index 0000000000..a48fc24190
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
@@ -0,0 +1,158 @@
+---
+id: 61fd9d9fbdfe078800317055
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Time to style your table. Start by resetting the box model. Create an `html` selector and give it a `box-sizing` property set to `border-box`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have a `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
new file mode 100644
index 0000000000..2830b424ad
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
@@ -0,0 +1,168 @@
+---
+id: 61fda307bde0b091cf7d884a
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Create a `body` selector and give it a `font-family` property set to `sans-serif` and a `color` set to `#0a0a23`.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `font-family` property set to `sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family') === 'sans-serif');
+```
+
+Your `body` selector should have a `color` property set to `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
new file mode 100644
index 0000000000..fb2d7e6f93
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
@@ -0,0 +1,171 @@
+---
+id: 61fda339eadcfd92a6812bed
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Before you get too far into your styling, you should make use of the `sr-only` class. You can use CSS to make elements with this class completely hidden from the visual page, but still be announced by screen readers.
+
+The CSS you are about to write is a common set of properties used to ensure elements are completely hidden visually.
+
+The `span[class~="sr-only"]` selector will select any `span` element whose `class` *includes* `sr-only`. Create that selector, and give it a `border` property set to `0`.
+
+# --hints--
+
+You should have an `span[class~="sr-only"]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]'));
+```
+
+Your `span[class~="sr-only"]` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
new file mode 100644
index 0000000000..546bcc8998
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
@@ -0,0 +1,172 @@
+---
+id: 61fdac1e31692f9a9ad97295
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The CSS `clip` property is used to define the visible portions of an element. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
+
+The `clip-path` property determines the shape the `clip` property should take. Set the `clip-path` property to the value of `inset(50%)`, forming the clip-path into a rectangle within the element.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `clip` property set to `rect(1px, 1px, 1px, 1px)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)');
+```
+
+Your `span[class~="sr-only"]` selector should have a `clip-path` property set to `inset(50%)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
new file mode 100644
index 0000000000..e964962f3f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
@@ -0,0 +1,172 @@
+---
+id: 61fdaea3999cb19d76ce717b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Now you need to size these elements down. Give your `span[class~="sr-only"]` selector a `width` and `height` property set to `1px`.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `width` property set to `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px');
+```
+
+Your `span[class~="sr-only"]` selector should have a `height` property set to `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
new file mode 100644
index 0000000000..2865fbb968
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
@@ -0,0 +1,174 @@
+---
+id: 61fdaf9ff894b6a084ecdc1b
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+To prevent the text content from overflowing, give your `span[class~="sr-only"]` selector an `overflow` property set to `hidden` and a `white-space` property set to `nowrap`.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have an `overflow` property set to `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden');
+```
+
+Your `span[class~="sr-only"]` selector should have a `white-space` property set to `nowrap`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
new file mode 100644
index 0000000000..5a05cb1e81
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
@@ -0,0 +1,182 @@
+---
+id: 61fdafe6f07fd7a1c6785bc2
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Finally, you need to take these hidden elements out of the document flow. Give the `span[class~="sr-only"]` selector a `position` property set to `absolute`, a `padding` property set to `0`, and a `margin` property set to `-1px`. This will ensure that not only are they no longer visible, but they are not even within the page view.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute');
+```
+
+Your `span[class~="sr-only"]` selector should have a `padding` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px');
+```
+
+Your `span[class~="sr-only"]` selector should have a `margin` property set to `-1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
new file mode 100644
index 0000000000..f23a9e5e35
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
@@ -0,0 +1,192 @@
+---
+id: 61fdb04d9939f0a26ca51c2b
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Time to style your table heading. Create an `h1` selector. Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`.
+
+# --hints--
+
+You should have an `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+Your `h1` selector should have a `max-width` property set to `37.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width') === '37.25rem');
+```
+
+Your `h1` selector should have a `margin` property set to `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin') === '0px auto');
+```
+
+Your `h1` selector should have a `padding` property set to `1.5rem 1.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding') === '1.5rem 1.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
new file mode 100644
index 0000000000..04dd430379
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
@@ -0,0 +1,198 @@
+---
+id: 620159cd5431aa34bc6a4c9c
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Target your flex container with an `h1 .flex` selector. Give it a `display` property set to `flex` to enable the flexbox layout. Then set the `flex-direction` property to `column-reverse` - this will display the nested elements from bottom to top. Finally, set the `gap` property to `1rem` to create some space between the elements.
+
+# --hints--
+
+You should have an `h1 .flex` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex'));
+```
+
+Your `h1 .flex` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('display') === 'flex');
+```
+
+Your `h1 .flex` selector should have a `flex-direction` property set to `column-reverse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('flex-direction') === 'column-reverse');
+```
+
+Your `h1 .flex` selector should have a `gap` property set to `1rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
new file mode 100644
index 0000000000..c376c6a27a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
@@ -0,0 +1,194 @@
+---
+id: 62015a5da1c95c358f079ebb
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+The `:first-of-type` pseudo-selector is used to target the first element that matches the selector. Create an `h1 .flex span:first-of-type` selector to target the first `span` element in your `.flex` container. Remember that your `span` elements are reversed, visually, so this will appear to be the second element on the page.
+
+Give your new selector a `font-size` property of `0.7em` to make it look like a sub-heading.
+
+# --hints--
+
+You should have an `h1 .flex span:first-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type'));
+```
+
+Your `h1 .flex span:first-of-type` selector should have a `font-size` property set to `0.7em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.getPropertyValue('font-size') === '0.7em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
new file mode 100644
index 0000000000..988875664f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
@@ -0,0 +1,196 @@
+---
+id: 62015cd2654a1139321a89d2
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+The `:last-of-type` pseudo-selector does the exact opposite - it targets the last element that matches the selector. Create an `h1 .flex span:last-of-type` selector to target the last `span` in your flex container, and give it a `font-size` property set to `1.2em` to make it look like a header.
+
+# --hints--
+
+You should have an `h1 .flex span:last-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type'));
+```
+
+Your `h1 .flex span:last-of-type` selector should have a `font-size` property set to `1.2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.getPropertyValue('font-size') === '1.2em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
new file mode 100644
index 0000000000..bea49bb7f9
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
@@ -0,0 +1,212 @@
+---
+id: 62015d8942384c3aed48329e
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+You wrapped your table in a section element - now you can style that to give your table a border. Create a `section` selector, and give it a `max-width` property set to `40rem` for responsive design. Set the `margin` property to `0 auto` to center it, and set the `border` property to `2px solid #d0d0d5`.
+
+# --hints--
+
+You should have a `section` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section'));
+```
+
+Your `section` selector should have a `max-width` property set to `40rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('max-width') === '40rem');
+```
+
+Your `section` selector should have a `margin` property set to `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('margin') === '0px auto');
+```
+
+Your `section` selector should have a `border` property set to `2px solid #d0d0d5`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('border') === '2px solid rgb(208, 208, 213)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
new file mode 100644
index 0000000000..ec97094732
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
@@ -0,0 +1,224 @@
+---
+id: 620167374bb8b4455cd11125
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+The last part of your table heading is your years. Create a `#years` selector, and enable flexbox. Justify the content to the end of the flex direction, and make the element sticky. Fix it to the top of its container with `top: 0`.
+
+# --hints--
+
+You should have a `#years` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years'));
+```
+
+Your `#years` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex');
+```
+
+Your `#years` selector should have a `justify-content` property set to `flex-end`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('justify-content') === 'flex-end');
+```
+
+Your `#years` selector should have a `position` property set to `sticky`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('position') === 'sticky');
+```
+
+Your `#years` selector should have a `top` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
new file mode 100644
index 0000000000..be6eec61b2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
@@ -0,0 +1,212 @@
+---
+id: 620174ed519dd7506c1a4b61
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Now apply some color to your `#years`. Make the text `#fff` and the background `#0a0a23`.
+
+# --hints--
+
+Your `#years` should have a `color` property set to `#fff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)');
+```
+
+Your `#years` should have a `background-color` property set to `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
new file mode 100644
index 0000000000..9067889bef
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
@@ -0,0 +1,223 @@
+---
+id: 620175b3710a0951cfa86edf
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+The `calc()` function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:
+
+```css
+.example {
+  margin: 10px;
+  width: calc(100% - 20px);
+}
+```
+
+Give `#years` a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+# --hints--
+
+Your `#years` selector should have a `margin` property set to `0 -2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
+```
+
+Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+```js
+const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding');
+assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5rem 0px'].includes(padding));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
new file mode 100644
index 0000000000..bf3e0d8e19
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
@@ -0,0 +1,232 @@
+---
+id: 6201782cc420715562f36271
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Style the text within your `#years` element by creating a `#years span[class]` selector. The `span[class]` syntax will target any `span` element that has a `class` attribute set, regardless of the attribute's value.
+
+Give your new selector a `bold` font, a width of `4.5rem`, and text aligned to the right.
+
+# --hints--
+
+You should have a `#years span[class]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]'));
+```
+
+Your `#years span[class]` selector should have a `font-weight` property set to `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+Your `#years span[class]` selector should have a `width` property set to `4.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('width') === '4.5rem');
+```
+
+Your `#years span[class]` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('text-align') === 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
new file mode 100644
index 0000000000..4c0ab4ab20
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
@@ -0,0 +1,224 @@
+---
+id: 620179bc0a6a2358c72b90ad
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+You wrapped your tables in a container with the `table-wrap` class. Create a selector for that class, and give it a `padding` set to `0 0.75rem 1.5rem 0.75rem`.
+
+# --hints--
+
+You should have a `.table-wrap` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap'));
+```
+
+Your `.table-wrap` selector should have a `padding` property set to `0 0.75rem 1.5rem 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
new file mode 100644
index 0000000000..df7a3d561d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
@@ -0,0 +1,230 @@
+---
+id: 62017b6f47454059bf2d3bd1
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Before you start diving in to the table itself, your `span` elements are currently bolded. Create a `span:not(.sr-only)` selector and give it a `font-weight` property set to `normal`.
+
+The `:not()` pseudo-selector is used to target all elements that do not match the selector - in this case, any of your `span` elements that do not have the `sr-only` class. This ensures that your earlier rules for the `span[class~="sr-only"]` selector are not overwritten.
+
+# --hints--
+
+You should have a `span:not(.sr-only)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
+```
+
+Your `span:not(.sr-only)` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
new file mode 100644
index 0000000000..6563d6a1d2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
@@ -0,0 +1,291 @@
+---
+id: 62017f47c87be96457c49f46
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Rather than having to constantly double-check you are not overwriting your earlier properties, you can use the `!important` keyword to ensure these properties are always applied, regardless of order or specificity.
+
+Give each property in your `span[class~="sr-only"]` selector an `!important` keyword. Do not change any of the values.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have the `border` property set to `0 !important`.
+
+```js
+// log it
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `clip` property set to `rect(1px, 1px, 1px, 1px) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `clip-path` property set to `inset(50%) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip-path: inset(50%) !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `height` property set to `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('height: 1px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `width` property set to `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('width: 1px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `position` property set to `absolute !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('position: absolute !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `overflow` property set to `hidden !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('overflow: hidden !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `white-space` property set to `nowrap !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('white-space: nowrap !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `padding` property set to `0 !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('padding: 0px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `margin` property set to `-1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('margin: -1px !important;'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span:not(.sr-only) {
+  font-weight: normal;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
new file mode 100644
index 0000000000..131df23ce9
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
@@ -0,0 +1,236 @@
+---
+id: 62017fa5bbef406580ceb44f
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Now that you have added the `!important` keyword, you can remove the `:not(.sr-only)` from your `span` selector.
+
+# --hints--
+
+You should not have a `span:not(.sr-only)` selector.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')));
+```
+
+You should have a `span` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span'));
+```
+
+You should not change the `font-weight`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span:not(.sr-only) {
+  font-weight: normal;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
new file mode 100644
index 0000000000..68b9ddf74a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
@@ -0,0 +1,238 @@
+---
+id: 62018243f046a368fab8ffb6
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Create a `table` selector to target your tables. Set the `border-collapse` property to `collapse`, which will allow cell borders to collapse into a single border, instead of a border around each cell. Also set the `border` property to `0` to hide the borders themselves.
+
+# --hints--
+
+You should have a `table` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table'));
+```
+
+Your `table` selector should have a `border-collapse` property set to `collapse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-collapse') === 'collapse');
+```
+
+Your `table` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
new file mode 100644
index 0000000000..37746c9d7e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
@@ -0,0 +1,242 @@
+---
+id: 6201830cb0c74b69f1b41635
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Ensure your table fills its container with a `width` property set to `100%`, then position it relatively and give it a top margin of `3rem`.
+
+# --hints--
+
+Your `table` selector should have a `width` property set to `100%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%');
+```
+
+Your `table` selector should have a `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('position') === 'relative');
+```
+
+Your `table` selector should have a `margin-top` property set to `3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('margin-top') === '3rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+table {
+  border-collapse: collapse;
+  border: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
new file mode 100644
index 0000000000..a59b2617ab
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
@@ -0,0 +1,252 @@
+---
+id: 620186f4b6b8356d2def576b
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Next you need to style your `caption` elements to look more like headers. Create a `table caption` selector. Set the text to have a color of `#356eaf`, a size of `1.3em`, and a normal weight.
+
+# --hints--
+
+You should have a `table caption` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption'));
+```
+
+Your `table caption` selector should have a `color` property set to `#356eaf`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('color') === 'rgb(53, 110, 175)');
+```
+
+Your `table caption` selector should have a `font-size` property set to `1.3em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-size') === '1.3em');
+```
+
+Your `table caption` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
new file mode 100644
index 0000000000..c3938b04ac
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
@@ -0,0 +1,251 @@
+---
+id: 62018ba1aa263770c953be66
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Now give the captions an absolute position, and shift them `-2.25rem` from the top and `0.5rem` from the left.
+
+# --hints--
+
+Your `table caption` selector should have the `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute');
+```
+
+Your `table caption` selector should have the `top` property set to `-2.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('top') === '-2.25rem');
+```
+
+Your `table caption` selector should have the `left` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
new file mode 100644
index 0000000000..5d92ebdef9
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
@@ -0,0 +1,261 @@
+---
+id: 62018c3e94434a71af1d5eaa
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Create a selector to target your `td` elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container.
+
+# --hints--
+
+You should have a `tbody td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td'));
+```
+
+Your `tbody td` selector should have a `width` property set to `100vw`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('width') === '100vw');
+```
+
+Your `tbody td` selector should have a `min-width` property set to `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('min-width') === '4rem');
+```
+
+Your `tbody td` selector should have a `max-width` property set to `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('max-width') === '4rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
new file mode 100644
index 0000000000..842e7f51b6
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
@@ -0,0 +1,255 @@
+---
+id: 62018ec29b3ae674f40bef31
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Now target the `th` elements within your table body, and give them a width of the entire container, less `12rem`.
+
+# --hints--
+
+You should have a `tbody th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th'));
+```
+
+Your `tbody th` selector should have a `width` property set to `calc(100% - 12rem)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('width') === 'calc(100% - 12rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
new file mode 100644
index 0000000000..f20111ca92
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
@@ -0,0 +1,265 @@
+---
+id: 62019093fe30e278e797d2f6
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+The `[attribute="value"]` selector targets any element that has an attribute with a specific value. Create a `tr[class="total"]` selector to target specifically your `tr` elements with the `total` class. Give it a bottom border of `4px double #0a0a23` and make the font bold.
+
+# --hints--
+
+You should have a `tr[class="total"]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]'));
+```
+
+Your `tr[class="total"]` selector should have a `border-bottom` property set to `4px double #0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('border-bottom') === '4px double rgb(10, 10, 35)');
+```
+
+Your `tr[class="total"]` selector should have a `font-weight` property set to `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
new file mode 100644
index 0000000000..da1b2b6db3
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
@@ -0,0 +1,270 @@
+---
+id: 620191707bc65579ddd3ce15
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Using the same selector syntax, target the `th` elements within your table rows where the `class` is `total`. Align the text to the left, and give them a padding of `0.5rem 0 0.25rem 0.5rem`.
+
+# --hints--
+
+You should have a `tr[class="total"] th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th'));
+```
+
+Your `tr[class="total"] th` selector should have a `text-align` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left');
+```
+
+Your `tr[class="total"] th` selector should have a `padding` property set to `0.5rem 0 0.25rem 0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
new file mode 100644
index 0000000000..7b947bb3ee
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
@@ -0,0 +1,277 @@
+---
+id: 620192a767533a7ad19d96d7
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+The key difference between `tr[class="total"]` and `tr.total` is that the first will select `tr` elements where the *only* class is `total`. The second will select `tr` elements where the class *includes* `total`.
+
+In your case, `tr.total` will work. You can use this selector to target all `td` elements within your `.total` rows. Align the text to the right, and give them a padding of `0 0.25rem`.
+
+# --hints--
+
+You should have a `tr.total td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td'));
+```
+
+Your `tr.total td` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('text-align') === 'right');
+```
+
+Your `tr.total td` selector should have a `padding` property set to `0 0.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('padding') === '0px 0.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
new file mode 100644
index 0000000000..40864c9312
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
@@ -0,0 +1,274 @@
+---
+id: 6201995d9ab88e80f1989dce
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+The `:nth-of-type()` pseudo-selector is used to target specific elements based on their order among siblings of the same type. Use this pseudo-selector to target the third `td` element within your `total` table rows. Give it a right padding of `0.5rem`.
+
+# --hints--
+
+You should have a `tr.total td:nth-of-type(3)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)'));
+```
+
+Your `tr.total td:nth-of-type(3)` selector should have a `padding-right` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
new file mode 100644
index 0000000000..d0ec48a16c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
@@ -0,0 +1,278 @@
+---
+id: 620199c7a7a32c81d4db3410
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Give your `tr.total` elements a hover effect that changes the background to `#99c9ff`.
+
+# --hints--
+
+You should have a `tr.total:hover` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover'));
+```
+
+Your `tr.total:hover` selector should have the `background-color` property set to `#99c9ff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyValue('background-color') === 'rgb(153, 201, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
new file mode 100644
index 0000000000..8446e4d528
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
@@ -0,0 +1,284 @@
+---
+id: 6201a1a7af32c287bd6b8183
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Select your `td` elements with the `class` value of `current`, and make the font italic.
+
+# --hints--
+
+You should have a `td.current` selector.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('td.current') || def('td[class="current"]'));
+```
+
+Your `td.current` selector should have the `font-style` property set to `italic`.
+
+```js
+const font = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style');
+assert((font('td.current') || font('td[class="current"]')) === 'italic');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
new file mode 100644
index 0000000000..a1ea3f0dcd
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
@@ -0,0 +1,288 @@
+---
+id: 6201a1cc668a34888f5b2f52
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Select the `tr` elements with the `class` set to `data`. Give them a background image of `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+# --hints--
+
+You should have a `tr.data` selector.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('tr.data') || def('tr[class="data"]'));
+```
+
+Your `tr.data` selector should have the `background-image` property set to `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+```js
+const bg = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('background-image');
+assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
new file mode 100644
index 0000000000..0853021d6c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
@@ -0,0 +1,302 @@
+---
+id: 6201a20d742f5c89736c8cfb
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Select the `th` elements within your `tr.data` elements. Align the text to the left, and give them a top padding of `0.3rem` and a left padding of `0.5rem`.
+
+# --hints--
+
+You should have a `tr.data th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th'));
+```
+
+Your `tr.data th` selector should have a `text-align` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('text-align') === 'left');
+```
+
+Your `tr.data th` selector should have a `padding-top` property set to `0.3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-top') === '0.3rem');
+```
+
+Your `tr.data th` selector should have a `padding-left` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
new file mode 100644
index 0000000000..66cc4c45f6
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
@@ -0,0 +1,320 @@
+---
+id: 6201a42e39bf3b95b6a33bf3
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Create a `tr.data th .description` selector to target the elements with the `class` set to `description` that are within your `th` elements in your `.data` table rows. Give them a block display, make the text italic with a normal weight, and position them with a `padding` set to `1rem 0 0.75rem` and a right margin of `-13.5rem`.
+
+# --hints--
+
+You should have a `tr.data th .description` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description'));
+```
+
+Your `tr.data th .description` selector should have a `display` property set to `block`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('display') === 'block');
+```
+
+Your `tr.data th .description` selector should have a `font-style` property set to `italic`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-style') === 'italic');
+```
+
+Your `tr.data th .description` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-weight') === 'normal');
+```
+
+Your `tr.data th .description` selector should have a `padding` property set to `1rem 0 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('padding') === '1rem 0px 0.75rem');
+```
+
+Your `tr.data th .description` selector should have a `margin-right` property set to `-13.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('margin-right') === '-13.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
new file mode 100644
index 0000000000..55d65268a3
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
@@ -0,0 +1,296 @@
+---
+id: 6201a4adcc6414968b391592
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Your `span` elements now all have more specific styling, which means you can remove your `span` rule.
+
+# --hints--
+
+You should not have a `span` selector.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span {
+  font-weight: normal;
+}
+--fcc-editable-region--
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
new file mode 100644
index 0000000000..74ca4c192b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
@@ -0,0 +1,312 @@
+---
+id: 6201a5258af7b398b030bfaf
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Your dollar amounts are currently misaligned. Create a selector to target the `td` elements within your `tr.data` elements. Vertically align the text to the top, horizontally align the text to the right, and set the padding to `0.3rem 0.25rem 0`.
+
+# --hints--
+
+You should have a `tr.data td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td'));
+```
+
+Your `tr.data td` selector should have a `vertical-align` property set to `top`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('vertical-align') === 'top');
+```
+
+Your `tr.data td` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('text-align') === 'right');
+```
+
+Your `tr.data td` selector should have a `padding` property set to `0.3rem 0.25rem 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('padding') === '0.3rem 0.25rem 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
new file mode 100644
index 0000000000..672e43ac9c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
@@ -0,0 +1,589 @@
+---
+id: 6201a59be346d399c21d10b1
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Create another selector for the `td` elements within your `tr.data` element, but specifically select the last one. Give this a right padding of `0.5rem`.
+
+With this, your balance sheet is complete!
+
+# --hints--
+
+You should have a `tr.data td:last-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type'));
+```
+
+Your `tr.data td:last-of-type` selector should have a `padding-right` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+tr.data td:last-of-type {
+  padding-right: 0.5rem;
+}
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
new file mode 100644
index 0000000000..71388718e0
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
@@ -0,0 +1,209 @@
+---
+id: 64076bbeba941114b0027b6a
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Adding position `sticky` moved the element into its own stack. To ensure your `#years` element does not get hidden by different stacks, add a `z-index` property set to `999` in the `#years` rule.
+
+# --hints--
+
+Your `#years` selector should have a `z-index` property set to `999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index'), '999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
new file mode 100644
index 0000000000..6295eb77a1
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
@@ -0,0 +1,76 @@
+---
+id: 5d822fd413a79914d39e98cc
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Welcome to the CSS Variables Skyline project! Start by adding a `link` element that links your `styles.css` file within the `head` element.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.isNotNull(document.querySelector('link'));
+```
+
+You should not change your existing `head` tags. Make sure you did not delete the closing tag.
+
+```js
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
+```
+
+You should have one void `link` element.
+
+```js
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>    
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
new file mode 100644
index 0000000000..866b58f80c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
@@ -0,0 +1,56 @@
+---
+id: 5d822fd413a79914d39e98cd
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick that helps visualize where elements are and their size. You will remove this later.
+
+# --hints--
+
+You should use the `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+You should use the `border` property to style all the elements.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('border'));
+```
+
+All elements should have a `1px solid black` border.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles?.border, '1px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
new file mode 100644
index 0000000000..1ea4cc4156
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
@@ -0,0 +1,61 @@
+---
+id: 5d822fd413a79914d39e98ce
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements.
+
+# --hints--
+
+You should use the `box-sizing` property.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing'));
+```
+
+You should make use of the existing `*` selector.
+
+```js
+// Two selectors create two CSSStyleRule objects
+assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1);
+```
+
+All elements should have a `box-sizing` of `border-box`.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles.boxSizing, 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+}
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
new file mode 100644
index 0000000000..90efe5f935
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
@@ -0,0 +1,69 @@
+---
+id: 5d822fd413a79914d39e98cf
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport.
+
+# --hints--
+
+You should use the `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` should have a `height` of `100vh`.
+
+```js
+const bodyStyles = new __helpers.CSSHelp(document).getStyle('body');
+assert.equal(bodyStyles?.height, '100vh');
+```
+
+Your `body` should have a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+Your `body` should have the `overflow` property set to `hidden`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
new file mode 100644
index 0000000000..a49b3f5dff
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
@@ -0,0 +1,65 @@
+---
+id: 5d822fd413a79914d39e98d0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+Your `div` element should be within the `body`.
+
+```js
+assert(document.querySelector('div')?.parentElement?.localName === 'body');
+```
+
+Your `div` element should have a class of `background-buildings`
+
+```js
+assert([...document.querySelector('div')?.classList]?.includes('background-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
new file mode 100644
index 0000000000..56eebc0924
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
@@ -0,0 +1,68 @@
+---
+id: 5d822fd413a79914d39e98d1
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Give your `.background-buildings` element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`.
+
+# --hints--
+
+You should use the `background-buildings` class to select the correct element.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings'));
+```
+
+Your `.background-buildings` element should have a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%');
+```
+
+Your `.background-buildings` element should have a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
new file mode 100644
index 0000000000..fe650ce0a4
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
@@ -0,0 +1,83 @@
+---
+id: 5d822fd413a79914d39e98d2
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Nest a `div` with a class of `bb1` in the background buildings container. Open your `styles.css` file, and give `.bb1` a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div').length, 2);
+```
+
+You should give the new `div` a class of `bb1`.
+
+```js
+assert.exists(document.querySelector('div.bb1'));
+```
+
+You should use a `.bb1` class selector to style the element.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1'));
+```
+
+You should give the `.bb1` element a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%');
+```
+
+You should give the `.bb1` element a `height` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
new file mode 100644
index 0000000000..34ef10accb
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
@@ -0,0 +1,105 @@
+---
+id: 5d822fd413a79914d39e98d3
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections.
+
+# --hints--
+
+You should create four new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 6);
+```
+
+You should give one of the new `div` elements a class of `bb1a`.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+You should give one of the new `div` elements a class of `bb1b`.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+You should give one of the new `div` elements a class of `bb1c`.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+You should give one of the new `div` elements a class of `bb1d`.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+```
+
+You should place the new `div` elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d'));
+```
+
+You should place the new `div` elements within the `.bb1` element.
+
+```js
+assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+--fcc-editable-region--
+      <div class="bb1"></div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
new file mode 100644
index 0000000000..cae117f39b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
@@ -0,0 +1,138 @@
+---
+id: 5d822fd413a79914d39e98d4
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container.
+
+# --hints--
+
+You should use a class selector to style `.bb1a`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a'));
+```
+
+You should give `.bb1a` a `width` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%');
+```
+
+You should give `.bb1a` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1b`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b'));
+```
+
+You should give `.bb1b` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%');
+```
+
+You should give `.bb1b` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1c`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c'));
+```
+
+You should give `.bb1c` a `width` of `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%');
+```
+
+You should give `.bb1c` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1d`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d'));
+```
+
+You should give `.bb1d` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%');
+```
+
+You should give `.bb1d` a `height` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
new file mode 100644
index 0000000000..8f84d629f0
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
@@ -0,0 +1,112 @@
+---
+id: 5d822fd413a79914d39e98d5
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Center the parts of your building by turning the `.bb1` element into a flexbox parent. Use the `flex-direction` and `align-items` properties to center the children.
+
+# --hints--
+
+You should not change the `.bb1` `width` or `height` properties.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.width, '10%');
+assert.equal(bb1Style?.height, '70%');
+```
+
+You should give the `.bb1` element a `display` of `flex`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.display, 'flex');
+```
+
+You should give the `.bb1` element a `flex-direction` of `column`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.flexDirection, 'column');
+```
+
+You should give the `.bb1` element a `align-items` of `center`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.alignItems, 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
new file mode 100644
index 0000000000..f08fd7a1d9
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
@@ -0,0 +1,103 @@
+---
+id: 5d822fd413a79914d39e98d6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Now you have something that is resembling a building. You are ready to create your first variable. In the previous lecture videos you learned that variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the rule for the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`.
+
+# --hints--
+
+You should create a new variable named `--building-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1'));
+```
+
+You should define the `--building-color1` variable within `.bb1`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+```
+
+You should give `--building-color1` a value of `#999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
new file mode 100644
index 0000000000..7f714196cb
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
@@ -0,0 +1,100 @@
+---
+id: 5d822fd413a79914d39e98d7
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Whatever value you gave the variable will be applied to whatever property you use it on.
+
+Add the variable `--building-color1` you created in the previous step as the value of the `background-color` property of the `.bb1a` class.
+
+# --hints--
+
+The `background-color` of the `.bb1a` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
new file mode 100644
index 0000000000..01335d8d2d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98d8
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building.
+
+# --hints--
+
+The `background-color` of the `.bb1b` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+The `background-color` of the `.bb1c` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+The `background-color` of the `.bb1d` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
new file mode 100644
index 0000000000..3690866c53
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
@@ -0,0 +1,99 @@
+---
+id: 5d822fd413a79914d39e98d9
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable.
+
+# --hints--
+
+You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+--fcc-editable-region--
+  --building-color1: #999;
+--fcc-editable-region--
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
new file mode 100644
index 0000000000..a614918d18
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98da
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Your first building looks pretty good now. Nest three new `div` elements in the `.background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background.
+
+# --hints--
+
+You should create a `div` with a class of `bb2`.
+
+```js
+assert.exists(document.querySelector('div.bb2'));
+```
+
+You should create a `div` with a class of `bb3`.
+
+```js
+assert.exists(document.querySelector('div.bb3'));
+```
+
+You should create a `div` with a class of `bb4`.
+
+```js
+assert.exists(document.querySelector('div.bb4'));
+```
+
+You should create 3 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 9);
+```
+
+You should place these `div` elements within the `.background-buildings` element.
+
+```js
+assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4);
+```
+
+You should place the elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
new file mode 100644
index 0000000000..b90a51c1f5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98db
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive.
+
+# --hints--
+
+You should give `.bb2` a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%');
+```
+
+You should give `.bb2` a `height` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%');
+```
+
+You should give `.bb3` a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%');
+```
+
+You should give `.bb3` a `height` of `55%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%');
+```
+
+You should give `.bb4` a `width` of `11%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%');
+```
+
+You should give `.bb4` a `height` of `58%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
new file mode 100644
index 0000000000..43c97e479e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
@@ -0,0 +1,127 @@
+---
+id: 5d822fd413a79914d39e98dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+The buildings are currently stacked on top of each other. Align the buildings by turning the `.background-buildings` element into a flexbox parent. Use the `align-items` and `justify-content` properties to evenly space the buildings across the bottom of the element.
+
+# --hints--
+
+You should add a `display` of `flex` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex');
+```
+
+You should add an `align-items` of `flex-end` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end');
+```
+
+You should add a `justify-content` of `space-evenly` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
new file mode 100644
index 0000000000..45cde3a259
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98dd
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+The buildings are too spaced out. Squeeze them together by adding two empty `div` elements to the top of the `.background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center.
+
+# --hints--
+
+You should add two new `div` elements before the `.bb1` element.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('bb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('bb1'));
+```
+
+You should add one new `div` element between the `.bb3` and `.bb4` element.
+
+```js
+assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling);
+```
+
+You should add two new `div` elements after the `.bb4` element.
+
+```js
+const bb4 = document.querySelector('.bb4');
+assert.exists(bb4?.nextElementSibling);
+assert.exists(bb4?.nextElementSibling?.nextElementSibling);
+```
+
+You should add 5 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 14);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
new file mode 100644
index 0000000000..a7617deb09
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
@@ -0,0 +1,140 @@
+---
+id: 5d822fd413a79914d39e98de
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a new variable below your `--building-color1` variable. Name your new variable `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`.
+
+# --hints--
+
+You should define a new property variable called `--building-color2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2'));
+```
+
+You should give `--building-color2` a value of `#66cc99` within the `.bb1` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99');
+```
+
+You should set the `background-color` of `.bb2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor);
+```
+
+You should set the `background-color` using the `--building-color2` variable.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
new file mode 100644
index 0000000000..aa97fc4df8
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98df
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+That didn't work. You should add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`.
+
+# --hints--
+
+You should add a fallback value of `green` to the `background-color` property.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2,green)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
new file mode 100644
index 0000000000..cc38315c42
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98e0
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create a new variable below the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`.
+
+# --hints--
+
+You should define a new property variable called `--building-color3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3'));
+```
+
+You should give `--building-color3` a value of `#cc6699`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+You should set the `background-color` of `.bb3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor);
+```
+
+You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3,pink)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
new file mode 100644
index 0000000000..b146a3017d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
@@ -0,0 +1,155 @@
+---
+id: 5d822fd413a79914d39e98e1
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+That didn't work, because the variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there.
+
+# --hints--
+
+You should declare a `:root` selector at the top of the stylesheet.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root'));
+```
+
+You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff');
+```
+
+You should define `--building-color2` with a value of `#66cc99` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99');
+```
+
+You should define `--building-color3` with a value of `#cc6699` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+You should remove the custom property variables from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
new file mode 100644
index 0000000000..0d71f94d0c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
@@ -0,0 +1,135 @@
+---
+id: 5d822fd413a79914d39e98e2
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now.
+
+# --hints--
+
+You should remove the fallback in the `background-color` from `.bb2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+You should remove the fallback in the `background-color` from `.bb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
new file mode 100644
index 0000000000..9434a0ce33
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
@@ -0,0 +1,144 @@
+---
+id: 5d822fd413a79914d39e98e3
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building.
+
+# --hints--
+
+You should define a new property variable called `--building-color4`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4'));
+```
+
+You should give `--building-color4` a value of `#538cc6` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6');
+```
+
+You should add `background-color: var(--building-color4)` in the `.bb4` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.getPropVal('background-color', true), 'var(--building-color4)')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
new file mode 100644
index 0000000000..7aeec907b2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
@@ -0,0 +1,147 @@
+---
+id: 5d822fd413a79914d39e98e4
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+The background buildings are starting to look pretty good. Create a new `div` below the `.background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 15);
+```
+
+The new `div` should come after the `div.background-buildings` element.
+
+```js
+assert.exists(document.querySelector('div.background-buildings + div'));
+```
+
+Your new `div` should have a class of `foreground-buildings`.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
new file mode 100644
index 0000000000..d1b7b83393
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
@@ -0,0 +1,161 @@
+---
+id: 5d822fd413a79914d39e98e5
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+You want the `.foreground-buildings` container to sit directly on top of the `.background-buildings` element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner.
+
+# --hints--
+
+You should use a `.foreground-buildings` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+You should give the `.foreground-buildings` element a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%');
+```
+
+You should give the `.foreground-buildings` element a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%');
+```
+
+You should give the `.foreground-buildings` element a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute');
+```
+
+You should give the `.foreground-buildings` element a `top` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
new file mode 100644
index 0000000000..dc1a0644b0
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
@@ -0,0 +1,192 @@
+---
+id: 5d822fd413a79914d39e98e6
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground.
+
+# --hints--
+
+You should create a new `div` with a class of `fb1`.
+
+```js
+assert.exists(document.querySelector('div.fb1'));
+```
+
+You should create a new `div` with a class of `fb2`.
+
+```js
+assert.exists(document.querySelector('div.fb2'));
+```
+
+You should create a new `div` with a class of `fb3`.
+
+```js
+assert.exists(document.querySelector('div.fb3'));
+```
+
+You should create a new `div` with a class of `fb4`.
+
+```js
+assert.exists(document.querySelector('div.fb4'));
+```
+
+You should create a new `div` with a class of `fb5`.
+
+```js
+assert.exists(document.querySelector('div.fb5'));
+```
+
+You should create a new `div` with a class of `fb6`.
+
+```js
+assert.exists(document.querySelector('div.fb6'));
+```
+
+You should place these new `div` elements within the `.foreground-buildings` element.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings > div.fb1'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb2'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb3'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb4'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb5'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb6'));
+```
+
+You should place the new `div` elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
new file mode 100644
index 0000000000..215b44f2f3
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e98e7
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`.
+
+# --hints--
+
+You should create a `.fb1` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1'));
+```
+
+You should give the `.fb1` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%');
+```
+
+You should give the `.fb1` selector a `height` of `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%');
+```
+
+You should create a `.fb2` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2'));
+```
+
+You should give the `.fb2` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%');
+```
+
+You should give the `.fb2` selector a `height` of `40%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%');
+```
+
+You should create a `.fb3` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3'));
+```
+
+You should give the `.fb3` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%');
+```
+
+You should give the `.fb3` selector a `height` of `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%');
+```
+
+You should create a `.fb4` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4'));
+```
+
+You should give the `.fb4` selector a `width` of `8%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%');
+```
+
+You should give the `.fb4` selector a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%');
+```
+
+You should create a `.fb5` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5'));
+```
+
+You should give the `.fb5` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%');
+```
+
+You should give the `.fb5` selector a `height` of `33%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%');
+```
+
+You should create a `.fb6` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6'));
+```
+
+You should give the `.fb6` selector a `width` of `9%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%');
+```
+
+You should give the `.fb6` selector a `height` of `38%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
new file mode 100644
index 0000000000..dcfbd1726e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
@@ -0,0 +1,190 @@
+---
+id: 5d822fd413a79914d39e98e8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Add the same `display`, `align-items`, and `justify-content` properties and values to `.foreground-buildings` that you used on `.background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container.
+
+# --hints--
+
+You should give `.foreground-buildings` a `display` property of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex');
+```
+
+You should give `.foreground-buildings` an `align-items` property of `flex-end`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end');
+```
+
+You should give `.foreground-buildings` a `justify-content` property of `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
new file mode 100644
index 0000000000..2e1047c628
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98e9
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+You should optimize your code. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`.
+
+# --hints--
+
+You should not remove the `.foreground-buildings` declaration.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+You should remove the `position` property from `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position);
+```
+
+You should remove the `top` property from `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
+```
+
+You should add the `position` property of `absolute` to `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.position, 'absolute');
+```
+
+You should add the `top` property of `0` to `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.top, '0px');
+```
+
+You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.exists(eitherOr());
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
new file mode 100644
index 0000000000..1147503597
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
@@ -0,0 +1,181 @@
+---
+id: 5d822fd413a79914d39e98ea
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore.
+
+# --hints--
+
+You should delete the whole `.foreground-buildings` style declaration.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
new file mode 100644
index 0000000000..79fd7a2246
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98eb
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`.
+
+# --hints--
+
+You should give `.fb1` a `background-color` using `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.getPropVal('background-color', true), 'var(--building-color4)');
+```
+
+You should give `.fb2` a `background-color` using `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+You should give `.fb3` a `background-color` using `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+You should give `.fb4` a `background-color` using `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+You should give `.fb5` a `background-color` using `--building-color2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+You should give `.fb6` a `background-color` using `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
new file mode 100644
index 0000000000..bb4a29f503
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98ec
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`.
+
+# --hints--
+
+You should add two `div` elements as the first children of `.foreground-buildings`.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('fb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('fb1'));
+```
+
+You should add one `div` element between `.fb2` and `.fb3`.
+
+```js
+assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling);
+```
+
+
+You should add two `div` elements as the last children of `.foreground-buildings`.
+
+```js
+const fb6 = document.querySelector('.fb6');
+assert.exists(fb6?.nextElementSibling);
+assert.exists(fb6?.nextElementSibling?.nextElementSibling);
+```
+
+You should have added 5 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 26);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
new file mode 100644
index 0000000000..288de384a8
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
@@ -0,0 +1,202 @@
+---
+id: 5d822fd413a79914d39e98ed
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings.
+
+# --hints--
+
+You should give `.fb4` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative');
+```
+
+You should give `.fb4` a `left` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%');
+```
+
+You should give `.fb5` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative');
+```
+
+You should give `.fb5` a `right` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
new file mode 100644
index 0000000000..1b950d244f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
@@ -0,0 +1,196 @@
+---
+id: 5d822fd413a79914d39e98ee
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`.
+
+# --hints--
+
+You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector.
+
+```js
+assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code));
+```
+
+You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector.
+
+```js
+assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
new file mode 100644
index 0000000000..022722b6a3
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
@@ -0,0 +1,197 @@
+---
+id: 5d822fd413a79914d39e98ef
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings.
+
+# --hints--
+
+You should create a new variable in `:root` called `--window-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1'));
+```
+
+You should give the property variable `--window-color1` a value of `black`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
new file mode 100644
index 0000000000..d4e4ca6565
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
@@ -0,0 +1,218 @@
+---
+id: 5d822fd413a79914d39e98f0
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+In a previous module you learned that gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this:
+
+```css
+gradient-type(
+  color1,
+  color2
+);
+```
+
+In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a `background` property below the `background-color` property. Set it as a gradient of type `linear-gradient` that uses `--building-color1` as the first color and `--window-color1` as the second.
+
+# --hints--
+
+You should apply a `background` to `.bb1a` right after the `background-color`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+```
+
+You should give the `background` a `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
+```
+
+You should give the `background` a `linear-gradient` starting from `var(--building-color1)`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
+```
+
+You should give the `background` a `linear-gradient` ending at `var(--window-color1)`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
new file mode 100644
index 0000000000..13c9235203
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98f1
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+You want to add the same gradient to the next two sections. Instead of doing that, create a new class selector called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class selector.
+
+# --hints--
+
+You should create a new class selector called `bb1-window`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window'));
+```
+
+You should move the `height` property and value from `.bb1a` to `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%');
+```
+
+You should move the `background` property and value from `.bb1a` to `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+You should not move the `background-color` property from `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+You should not move the `width` property from `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
new file mode 100644
index 0000000000..d2c82337a1
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
@@ -0,0 +1,237 @@
+---
+id: 5d822fd413a79914d39e98f2
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them.
+
+# --hints--
+
+You should not remove the `bb1a` class.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+You should add the `bb1-window` class to the `.bb1a` element.
+
+```js
+assert.exists(document.querySelector('div.bb1a.bb1-window'));
+```
+
+You should not remove the `bb1b` class.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+You should add the `bb1-window` class to the `.bb1b` element.
+
+```js
+assert.exists(document.querySelector('div.bb1b.bb1-window'));
+```
+
+You should not remove the `bb1c` class.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+You should add the `bb1-window` class to the `.bb1c` element.
+
+```js
+assert.exists(document.querySelector('div.bb1c.bb1-window'));
+```
+
+You should not change the `.bb1d` element.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+assert.notExists(document.querySelector('div.bb1d.bb1-window'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
new file mode 100644
index 0000000000..5f4c0d8e10
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
@@ -0,0 +1,222 @@
+---
+id: 5d822fd413a79914d39e98f3
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them.
+
+# --hints--
+
+You should remove the `background-color` from `.bb1a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+You should remove the `height` property from `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height);
+```
+
+You should remove the `background-color` property from `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor);
+```
+
+You should remove the `height` property from `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height);
+```
+
+You should remove the `background-color` property from `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
new file mode 100644
index 0000000000..523c35e8e6
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e98f4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Gradients can use as many colors as you want like this:
+
+```css
+gradient-type(
+  color1,
+  color2,
+  color3
+);
+```
+
+Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property.
+
+# --hints--
+
+You should use the `background` on `.bb1d`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background);
+```
+
+You should give the `background` property a `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient');
+```
+
+You should use `orange` as the first color in the `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange');
+```
+
+You should use `--building-color1` as the second color in the `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)');
+```
+
+You should use `--window-color1` as the third color in the `linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
new file mode 100644
index 0000000000..457fe4acaf
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
@@ -0,0 +1,198 @@
+---
+id: 5d822fd413a79914d39e98f5
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`.
+
+# --hints--
+
+You should remove the `background-color` property and value from `.bb1d`
+
+```js
+assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
new file mode 100644
index 0000000000..d1f3fdc799
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f6
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+You can specify where you want a gradient transition to complete by adding it to the color like this:
+
+```css
+gradient-type(
+  color1,
+  color2 20%,
+  color3
+);
+```
+
+Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action.
+
+# --hints--
+
+You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
new file mode 100644
index 0000000000..0533f06214
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98f7
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half.
+
+# --hints--
+
+You should remove `orange` from the `linear-gradient`.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange');
+```
+
+You should change the now first `linear-gradient` color to transition at `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1) 80%,
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
new file mode 100644
index 0000000000..6bf8b3fe84
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
@@ -0,0 +1,210 @@
+---
+id: 5d822fd413a79914d39e98f8
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building.
+
+# --hints--
+
+You should add two `div` elements to `.bb2`.
+
+```js
+assert.equal(document.querySelector('div.bb2')?.children?.length, 2);
+```
+
+You should give the first `div` a class of `bb2a`.
+
+```js
+assert.exists(document.querySelector('div.bb2a'));
+```
+
+You should give the second `div` a class of `bb2b`.
+
+```js
+assert.exists(document.querySelector('div.bb2b'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+--fcc-editable-region--
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
new file mode 100644
index 0000000000..6fb4f46152
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f9
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later.
+
+# --hints--
+
+You should give `.bb2b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%');
+```
+
+You should give `.bb2b` a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
new file mode 100644
index 0000000000..3a67baddad
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fa
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building.
+
+# --hints--
+
+You should create a new property variable called `window-color2` within `:root`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2'));
+```
+
+You should give `window-color2` a value of `#8cd9b3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
new file mode 100644
index 0000000000..d1924b7bd4
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
@@ -0,0 +1,240 @@
+---
+id: 5d822fd413a79914d39e98fb
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Gradient transitions often gradually change from one color to another. When a more abrupt change is required, the transition can be made with a hard stop like this:
+
+```css
+linear-gradient(
+  var(--first-color) 0%,
+  var(--first-color) 40%,
+  var(--second-color) 40%,
+  var(--second-color) 80%
+);
+```
+
+Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`.
+
+# --hints--
+
+You should give `.bb2b` a `background` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background);
+```
+
+You should use a `linear-gradient` on the `background`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient");
+```
+
+You should use `--building-color2` from `0%` to `6%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/);
+```
+
+You should use `--window-color2` from `6%` to `9%`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%");
+```
+
+`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
new file mode 100644
index 0000000000..d11cd08f03
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fc
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them.
+
+# --hints--
+
+You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
new file mode 100644
index 0000000000..ff29e839ca
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
@@ -0,0 +1,209 @@
+---
+id: 5d822fd413a79914d39e98fd
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore.
+
+# --hints--
+
+You should remove the `background-color` from `.bb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
new file mode 100644
index 0000000000..b11ad202cd
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
@@ -0,0 +1,260 @@
+---
+id: 5d822fd413a79914d39e98fe
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Create and add the following properties to `.bb2a`:
+
+```css
+margin: auto;
+width: 5vw;
+height: 5vw;
+border-top: 1vw solid #000;
+border-bottom: 1vw solid #000;
+border-left: 1vw solid #999;
+border-right: 1vw solid #999;
+```
+
+After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building.
+
+# --hints--
+
+You should give `.bb2a` a `margin` of `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto");
+```
+
+You should give `.bb2a` a `width` of `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw");
+```
+
+You should give `.bb2a` a `height` of `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw");
+```
+
+You should give `.bb2a` a `border-top` of `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)");
+```
+
+You should give `.bb2a` a `border-bottom` of `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)");
+```
+
+You should give `.bb2a` a `border-left` of `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)");
+```
+
+You should give `.bb2a` a `border-right` of `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
new file mode 100644
index 0000000000..162a47660b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
@@ -0,0 +1,238 @@
+---
+id: 5d822fd413a79914d39e98ff
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle.
+
+# --hints--
+
+You should remove the `width` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width);
+```
+
+You should remove the `height` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height);
+```
+
+You should change the `border-left` to use `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)");
+```
+
+You should change the `border-right` to use `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  width: 5vw;
+  height: 5vw;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 1vw solid #999;
+  border-right: 1vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
new file mode 100644
index 0000000000..c5fec5174a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9900
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible.
+
+# --hints--
+
+You should change the `border-left` to use `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent");
+```
+
+You should change the `border-right` to use `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid #999;
+  border-right: 5vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
new file mode 100644
index 0000000000..6bbdfc4dd9
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9901
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building.
+
+# --hints--
+
+You should remove the `margin` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin);
+```
+
+You should remove the `border-top` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
new file mode 100644
index 0000000000..b4ade49d2f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e9902
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end.
+
+# --hints--
+
+You should change `border-bottom` to use `5vh`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh");
+```
+
+You should change `border-bottom` to use `--building-color2`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)");
+```
+
+`border-bottom` should be `5vh solid var(--building-color2)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
new file mode 100644
index 0000000000..860d5af5d1
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9903
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings.
+
+# --hints--
+
+You should define a new property variable `--window-color3`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3"));
+```
+
+You should give `--window-color3` a value of `#d98cb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
new file mode 100644
index 0000000000..7898c0a157
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9904
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this:
+
+```css
+gradient-type(
+  direction,
+  color1,
+  color2
+);
+```
+
+Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`.
+
+# --hints--
+
+You should give `.bb3` a `background` using `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
+```
+
+You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should use `--building-color3` for the first two colors.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)");
+```
+
+You should use `--window-color3` at `15%` for the third color.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
new file mode 100644
index 0000000000..e54093892a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9905
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now.
+
+# --hints--
+
+You should remove the `background-color` from `.bb3`.
+
+```js
+assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
new file mode 100644
index 0000000000..ecd54aa637
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
@@ -0,0 +1,249 @@
+---
+id: 5d822fd413a79914d39e9906
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order.
+
+# --hints--
+
+You should add three `div` elements within `.bb4`.
+
+```js
+assert.equal(document.querySelector("div.bb4")?.children?.length, 3);
+```
+
+You should give the first new `div` a class of `bb4a`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should give the second new `div` a class of `bb4b`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should give the third new `div` a class of `bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4a + div.bb4b"));
+assert.exists(document.querySelector("div.bb4b + div.bb4c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb4"></div>
+--fcc-editable-region--
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
new file mode 100644
index 0000000000..230af5f23f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9907
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`.
+
+# --hints--
+
+You should give `.bb4a` a `width` of `3%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%");
+```
+
+You should give `.bb4a` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%");
+```
+
+You should give `.bb4b` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%");
+```
+
+You should give `.bb4b` a `height` of `5%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%");
+```
+
+You should give `.bb4c` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%");
+```
+
+You should give `.bb4c` a `height` of `85%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
new file mode 100644
index 0000000000..b4bce92acb
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9908
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled.
+
+# --hints--
+
+You should remove the `background-color` from `.bb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor);
+```
+
+You should give `.bb4a` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+You should give `.bb4b` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+You should give `.bb4c` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+}
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
new file mode 100644
index 0000000000..80590e7dcf
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9909
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding.
+
+# --hints--
+
+You should create a new class declaration called `building-wrap`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
new file mode 100644
index 0000000000..9649bd40b5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
@@ -0,0 +1,277 @@
+---
+id: 5d822fd413a79914d39e990a
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class.
+
+# --hints--
+
+You should remove `display` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display);
+```
+
+You should move `display` with a value of `flex` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex");
+```
+
+You should remove `flex-direction` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection);
+```
+
+You should move `flex-direction` with a value of `column` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column");
+```
+
+You should remove `align-items` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems);
+```
+
+You should move `align-items` with a value of `center` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.building-wrap {
+
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
new file mode 100644
index 0000000000..6df3d6c40c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
@@ -0,0 +1,254 @@
+---
+id: 5d822fd413a79914d39e990b
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it.
+
+# --hints--
+
+You should add `building-wrap` to the `.bb1` element.
+
+```js
+assert.exists(document.querySelector("div.bb1.building-wrap"));
+```
+
+You should add `building-wrap` to the `.bb4` element.
+
+```js
+assert.exists(document.querySelector("div.bb4.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+--fcc-editable-region--
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
new file mode 100644
index 0000000000..ccaa99d42b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e990c
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building.
+
+# --hints--
+
+You should define a new property variable `--window-color4`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4"));
+```
+
+You should give `--window-color4` a value of `#8cb3d9`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
new file mode 100644
index 0000000000..a4de0a094a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
@@ -0,0 +1,255 @@
+---
+id: 5d822fd413a79914d39e990d
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building.
+
+# --hints--
+
+You should add four `div` elements to `.bb4c`.
+
+```js
+assert.equal(document.querySelector(".bb4c")?.children?.length, 4);
+```
+
+You should give each new `div` a class of `bb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
new file mode 100644
index 0000000000..f9c206b5ae
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
@@ -0,0 +1,265 @@
+---
+id: 5d822fd413a79914d39e990e
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`.
+
+# --hints--
+
+You should give `.bb4-window` a `width` of `18%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%");
+```
+
+You should give `.bb4-window` a `height` of `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%");
+```
+
+You should give `.bb4-window` a `background-color` of `--window-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
new file mode 100644
index 0000000000..26d3ed042d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
@@ -0,0 +1,279 @@
+---
+id: 5d822fd413a79914d39e990f
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+
+The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `window-wrap`. Make `.window-wrap` a flexbox container, and use the `align-items` and `justify-content` properties to center its child elements vertically and evenly space them in their parent, respectively.
+
+# --hints--
+
+You should create a `.window-wrap` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap"));
+```
+
+You should give `.window-wrap` a `display` of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex");
+```
+
+You should give `.window-wrap` an `align-items` of `center`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center");
+```
+
+You should give `.window-wrap` a `justify-content` of `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
new file mode 100644
index 0000000000..07de740896
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
@@ -0,0 +1,266 @@
+---
+id: 5d822fd413a79914d39e9910
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Add the new `window-wrap` class to the `.bb4c` element.
+
+# --hints--
+
+You should add a class of `window-wrap` to `.bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4c.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
new file mode 100644
index 0000000000..f229fafb01
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
@@ -0,0 +1,291 @@
+---
+id: 5d822fd413a79914d39e9911
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order.
+
+# --hints--
+
+You should add three `div` elements within `.fb1`.
+
+```js
+assert.equal(document.querySelector("div.fb1")?.children?.length, 3);
+```
+
+You should give the first new `div` a class of `fb1a`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1a"));
+```
+
+You should give the second new `div` a class of `fb1b`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1b"));
+```
+
+You should give the third new `div` a class of `fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1c"));
+```
+
+You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1a + div.fb1b"));
+assert.exists(document.querySelector("div.fb1b + div.fb1c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1"></div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
new file mode 100644
index 0000000000..6ad5fc43f3
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
@@ -0,0 +1,287 @@
+---
+id: 5d822fd413a79914d39e9912
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`.
+
+# --hints--
+
+You should give `.fb1b` a `width` of `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%");
+```
+
+You should give `.fb1b` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%");
+```
+
+You should give `.fb1c` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%");
+```
+
+You should give `.fb1c` a `height` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
new file mode 100644
index 0000000000..ea0469fd67
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
@@ -0,0 +1,280 @@
+---
+id: 5d822fd413a79914d39e9913
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Add the `building-wrap` class to the `.fb1` element to center the sections.
+
+# --hints--
+
+You should add the class `building-wrap` to `.fb1`.
+
+```js
+assert.exists(document.querySelector("div.fb1.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
new file mode 100644
index 0000000000..5b271b0f99
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
@@ -0,0 +1,284 @@
+---
+id: 5d822fd413a79914d39e9914
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Move the `background-color` property and value from `.fb1` to `.fb1b`.
+
+# --hints--
+
+You should remove `background-color` from `.fb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor);
+```
+
+You should add a `background-color` of `--building-color4` to `.fb1b`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
new file mode 100644
index 0000000000..e914af1b32
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
@@ -0,0 +1,391 @@
+---
+id: 5d822fd413a79914d39e9915
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+You don't need the `background-color` for this building anymore so you can remove that property.
+
+# --hints--
+
+You should remove the `background-color` of `.fb5`.
+
+```js
+assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
new file mode 100644
index 0000000000..4f6ab3e002
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
@@ -0,0 +1,297 @@
+---
+id: 5d822fd413a79914d39e9916
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building.
+
+Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`.
+
+# --hints--
+
+You should give `.fb1c` a `background` with a `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient");
+```
+
+You should use a direction of `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should use a first color of `--building-color4` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+You should use a second color of `transparent` from `10%` to `15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(transparent10%,transparent15%\)|transparent10%15%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
new file mode 100644
index 0000000000..aea76037d0
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
@@ -0,0 +1,307 @@
+---
+id: 5d822fd413a79914d39e9917
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+You can add multiple gradients to an element by separating them with a comma (`,`) like this:
+
+```css
+gradient1(
+  colors
+),
+gradient2(
+  colors
+);
+```
+
+Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last.
+
+# --hints--
+
+You should not alter the first `repeating-linear-gradient`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/);
+```
+
+You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+You should use a second color of `--window-color4` from `10%` to `90%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(var\(--window-color4\)10%,var\(--window-color4\)90%\)|var\(--window-color4\)10%90%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    )
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
new file mode 100644
index 0000000000..849d448b9a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
@@ -0,0 +1,298 @@
+---
+id: 5d822fd413a79914d39e9918
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements.
+
+# --hints--
+
+You should give `.fb1a` a `border-bottom`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom);
+```
+
+You should use a `border-bottom` of `7vh solid var(--building-color4)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
new file mode 100644
index 0000000000..089b59b3cf
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
@@ -0,0 +1,301 @@
+---
+id: 5d822fd413a79914d39e9919
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide.
+
+# --hints--
+
+You should give `.fb1a` a `border-left` of `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent");
+```
+
+You should give `.fb1a` a `border-right` of `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+}
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
new file mode 100644
index 0000000000..99fb0d6368
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
@@ -0,0 +1,312 @@
+---
+id: 5d822fd413a79914d39e991a
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order.
+
+# --hints--
+
+You should add two `div` elements within `.fb2`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2);
+```
+
+You should give the first new `div` a class of `fb2a`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2a"));
+assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild);
+```
+
+You should give the second new `div` a class of `fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+--fcc-editable-region--
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
new file mode 100644
index 0000000000..a021e0bafe
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
@@ -0,0 +1,314 @@
+---
+id: 5d822fd413a79914d39e991b
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`.
+
+# --hints--
+
+You should give `.fb2a` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%");
+```
+
+You should give `.fb2b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%");
+```
+
+You should give `.fb2b` a `height` of `75%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b"></div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
new file mode 100644
index 0000000000..f050e5dec8
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
@@ -0,0 +1,317 @@
+---
+id: 5d822fd413a79914d39e991c
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building.
+
+# --hints--
+
+You should add three `div` elements within `.fb2b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3);
+```
+
+You should give the three new `div` elements each a class of `fb2-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
new file mode 100644
index 0000000000..fdeac5d1d1
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
@@ -0,0 +1,315 @@
+---
+id: 5d822fd413a79914d39e991d
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Add your `window-wrap` class to `.fb2b` to position the new window elements.
+
+# --hints--
+
+You should add the class `window-wrap` to `.fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2b.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
new file mode 100644
index 0000000000..32508c44ee
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
@@ -0,0 +1,326 @@
+---
+id: 5d822fd413a79914d39e991e
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable.
+
+# --hints--
+
+You should give the `.fb2-window` elements a `width` of `22%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%");
+```
+
+You should give the `.fb2-window` elements a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%");
+```
+
+You should give the `.fb2-window` elements a `background-color` of `--window-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
new file mode 100644
index 0000000000..51ec85b766
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
@@ -0,0 +1,324 @@
+---
+id: 5d822fd413a79914d39e991f
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container.
+
+# --hints--
+
+You should remove the `background-color` property from `.fb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor);
+```
+
+You should give `.fb2b` a `background-color` of `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
new file mode 100644
index 0000000000..309d57ea7c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
@@ -0,0 +1,330 @@
+---
+id: 5d822fd413a79914d39e9920
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape.
+
+# --hints--
+
+You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)");
+```
+
+You should give `.fb2a` a `border-left` of `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent");
+```
+
+You should give `.fb2a` a `border-right` of `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+--fcc-editable-region--
+.fb2a {
+  width: 100%;
+}
+--fcc-editable-region--
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
new file mode 100644
index 0000000000..0347b2e840
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9921
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two.
+
+# --hints--
+
+You should add four `div` elements within `.fb3`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4);
+```
+
+You should give the first new `div` a class of `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a"));
+```
+
+You should give the second new `div` a class of `fb3b`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b"));
+```
+
+You should give the third new `div` a class of `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a"));
+```
+
+You should give the fourth new `div` a class of `fb3b`.
+
+```js
+assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3"></div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
new file mode 100644
index 0000000000..6d78586a55
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
@@ -0,0 +1,347 @@
+---
+id: 5d822fd413a79914d39e9922
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`.
+
+# --hints--
+
+You should give `.fb3a` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%");
+```
+
+You should give `.fb3a` a `height` of `15%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%");
+```
+
+You should give `.fb3b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%");
+```
+
+You should give `.fb3b` a `height` of `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--  
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
new file mode 100644
index 0000000000..9d484855c3
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9923
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`.
+
+# --hints--
+
+You should remove the `background-color` from `.fb3`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor);
+```
+
+You should give `.fb3a` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+You should give `.fb3b` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
new file mode 100644
index 0000000000..9849c03bbc
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
@@ -0,0 +1,340 @@
+---
+id: 5d822fd413a79914d39e9924
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Add your `building-wrap` class to the `.fb3` element to center the sections.
+
+# --hints--
+
+You should add the class `building-wrap` to `.fb3`.
+
+```js
+assert.exists(document.querySelector("div.fb3.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
new file mode 100644
index 0000000000..777990a363
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
@@ -0,0 +1,346 @@
+---
+id: 5d822fd413a79914d39e9925
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section.
+
+# --hints--
+
+You should add three `div` elements within the first `.fb3a` element.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3);
+```
+
+You should give each new `div` a class of `fb3-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a"></div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
new file mode 100644
index 0000000000..2bdf0e99db
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
@@ -0,0 +1,355 @@
+---
+id: 5d822fd413a79914d39e9926
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value.
+
+# --hints--
+
+You should give `.fb3-window` a `width` of `25%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%");
+```
+
+You should give `.fb3-window` a `height` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%");
+```
+
+You should give `.fb3-window` a `background-color` of `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
new file mode 100644
index 0000000000..98bb84bfe6
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
@@ -0,0 +1,350 @@
+---
+id: 5d822fd413a79914d39e9927
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+Add your `window-wrap` class to the `.fb3a` element to center and space the windows.
+
+# --hints--
+
+You should give `.fb3a` a class of `window-wrap`.
+
+```js
+assert.exists(document.querySelector("div.fb3a.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
new file mode 100644
index 0000000000..ed19c0331b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
@@ -0,0 +1,349 @@
+---
+id: 5d822fd413a79914d39e9928
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+With CSS variables you can change values without searching everywhere in the stylesheet. Change the `--window-color1` value to `#bb99ff`.
+
+# --hints--
+
+You should change the value of `--window-color1` to `#bb99ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
new file mode 100644
index 0000000000..cc5626304a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
@@ -0,0 +1,362 @@
+---
+id: 5d822fd413a79914d39e9929
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Only three more buildings to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now.
+
+# --hints--
+
+You should add two `div` elements within `.fb4`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2);
+```
+
+You should give the first new `div` a class of `fb4a`.
+
+```js
+assert.exists(document.querySelector("div.fb4a"));
+```
+
+You should give the second new `div` a class of `fb4b`.
+
+```js
+assert.exists(document.querySelector("div.fb4b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+--fcc-editable-region--
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
new file mode 100644
index 0000000000..e5fef28c8c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
@@ -0,0 +1,359 @@
+---
+id: 5d822fd413a79914d39e992a
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Give `.fb4b` a `width` of `100%` and `height` of `89%`.
+
+# --hints--
+
+You should give `.fb4b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%");
+```
+
+You should give `.fb4b` a `height` of `89%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
new file mode 100644
index 0000000000..544a93886a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
@@ -0,0 +1,361 @@
+---
+id: 5d822fd413a79914d39e992b
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`.
+
+# --hints--
+
+You should remove the `background-color` from `.fb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor);
+```
+
+You should give `.fb4b` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
new file mode 100644
index 0000000000..ce604acaff
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
@@ -0,0 +1,364 @@
+---
+id: 5d822fd413a79914d39e992c
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`.
+
+# --hints--
+
+You should add six `div` elements within `.fb4b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6);
+```
+
+You should give each new `div` a class of `fb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+--fcc-editable-region--
+        <div class="fb4b"></div>
+--fcc-editable-region--
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
new file mode 100644
index 0000000000..3f062a2400
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992d
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building.
+
+# --hints--
+
+You should give `.fb4-window` a `width` of `30%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%");
+```
+
+You should give `.fb4-window` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%");
+```
+
+You should give `.fb4-window` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
new file mode 100644
index 0000000000..d39b2877ef
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
@@ -0,0 +1,374 @@
+---
+id: 5d822fd413a79914d39e992e
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space.
+
+# --hints--
+
+You should give `.fb4-window` a `background-color` of `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+You should give `.fb4-window` a `margin` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
new file mode 100644
index 0000000000..c006f27898
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992f
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+The windows are stacked on top of each other on the rightmost purple building. Turn the building into a flexbox parent, and use the `flex-wrap` property to put the windows side by side, and push them down to a new row when they don't fit.
+
+# --hints--
+
+You should give `.fb4b` a `display` of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex");
+```
+
+You should give `.fb4b` a `flex-wrap` of `wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
new file mode 100644
index 0000000000..6a95d78f33
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
@@ -0,0 +1,381 @@
+---
+id: 5d822fd413a79914d39e9930
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color.
+
+# --hints--
+
+You should give `.fb4a` a `border-top` of `5vh solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent")
+```
+
+You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
new file mode 100644
index 0000000000..cf534fc4d5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
@@ -0,0 +1,404 @@
+---
+id: 5d822fd413a79914d39e9931
+title: Step 106
+challengeType: 0
+dashedName: step-106
+---
+
+# --description--
+
+You can remove the `background-color` for this building now, since it isn't needed.
+
+# --hints--
+
+You should remove the `background-color` of `.fb6`.
+
+```js
+assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
new file mode 100644
index 0000000000..659058a647
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
@@ -0,0 +1,396 @@
+---
+id: 5d822fd413a79914d39e9932
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`.
+
+# --hints--
+
+You should give `.fb5` a `background` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background);
+```
+
+You should give the `background` a `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient");
+```
+
+You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/);
+```
+
+You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
new file mode 100644
index 0000000000..25ba879145
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9933
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows.
+
+# --hints--
+
+You should give `.fb5` a second `repeating-linear-gradient` in the `background` property.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/);
+```
+
+You should give the second `repeating-linear-gradient` a direction of `90deg`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/);
+```
+
+You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/);
+```
+
+You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    )
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
new file mode 100644
index 0000000000..9d6a5a5b02
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9934
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`.
+
+# --hints--
+
+You should add a `repeating-linear-gradient` to `.fb6` in the `background` property.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient");
+```
+
+You should give the `repeating-linear-gradient` a direction of `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
new file mode 100644
index 0000000000..4f27e41fc9
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9935
+title: Step 105
+challengeType: 0
+dashedName: step-105
+---
+
+# --description--
+
+Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors.
+
+# --hints--
+
+You should give `.fb6` a second `repeating-linear-gradient` in the `background` property.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/);
+```
+
+You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+    90deg,
+    var(--building-color3),
+    var(--building-color3) 10%,
+    transparent 10%,
+    transparent 30%
+  )
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
new file mode 100644
index 0000000000..7bd61afd38
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9936
+title: Step 107
+challengeType: 0
+dashedName: step-107
+---
+
+# --description--
+
+Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together.
+
+# --hints--
+
+You should remove the `border` from the `*` selector.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
new file mode 100644
index 0000000000..029d1e069c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
@@ -0,0 +1,403 @@
+---
+id: 5d822fd413a79914d39e9937
+title: Step 108
+challengeType: 0
+dashedName: step-108
+---
+
+# --description--
+
+Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline.
+
+# --hints--
+
+You should add a class of `sky` to `.background-buildings`.
+
+```js
+assert.exists(document.querySelector("div.background-buildings.sky"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
new file mode 100644
index 0000000000..56759e1359
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
@@ -0,0 +1,421 @@
+---
+id: 5d822fd413a79914d39e9938
+title: Step 109
+challengeType: 0
+dashedName: step-109
+---
+
+# --description--
+
+Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun.
+
+# --hints--
+
+You should give `.sky` a `radial-gradient` in the `background` property.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient");
+```
+
+You should give the `radial-gradient` a first color of `#ffcf33`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/);
+```
+
+You should give the `radial-gradient` a second color of `#ffff66` at `21%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/);
+```
+
+You should give the `radial-gradient` a third color of `#bbeeff` at `100%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
new file mode 100644
index 0000000000..80e000e8b6
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
@@ -0,0 +1,410 @@
+---
+id: 5d822fd413a79914d39e9939
+title: Step 110
+challengeType: 0
+dashedName: step-110
+---
+
+# --description--
+
+At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves.
+
+# --hints--
+
+You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.sky {
+  background: radial-gradient(
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
new file mode 100644
index 0000000000..d2ce95a6e6
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
@@ -0,0 +1,422 @@
+---
+id: 5d822fd413a79914d39e993a
+title: Step 111
+challengeType: 0
+dashedName: step-111
+---
+
+# --description--
+
+In the previous module you learned that media queries can be used to change styles based on certain conditions, and they look like this:
+
+```css
+@media (condition) {
+
+}  
+```
+
+Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less.
+
+# --hints--
+
+You should add an empty media query with `max-width: 1000px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
new file mode 100644
index 0000000000..3d0bf68b6e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
@@ -0,0 +1,424 @@
+---
+id: 5d822fd413a79914d39e993b
+title: Step 112
+challengeType: 0
+dashedName: step-112
+---
+
+# --description--
+
+Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night.
+
+Note: You are going to need to scroll past the editable region to copy the class.
+
+# --hints--
+
+You should not delete the existing `.sky` declaration.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/);
+```
+
+You should copy the existing `.sky` declaration into the media query.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+@media (max-width: 1000px) {
+
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
new file mode 100644
index 0000000000..ce748ba40e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
@@ -0,0 +1,437 @@
+---
+id: 5d822fd413a79914d39e993c
+title: Step 113
+challengeType: 0
+dashedName: step-113
+---
+
+# --description--
+
+In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors.
+
+# --hints--
+
+You should change the first color values from `#ffcf33` to `#ccc`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/);
+```
+
+You should change the second color value from `#ffff66` to `#445`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/);
+```
+
+You should change the third color value from `#bbeeff` to `#223`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+closest-corner circle at 15% 15%,
+#ffcf33,
+#ffcf33 20%,
+#ffff66 21%,
+#bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3),
+var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color4),
+var(--building-color4) 10%,
+transparent 10%,
+transparent 15%
+    ),
+    repeating-linear-gradient(
+var(--building-color4),
+var(--building-color4) 10%,
+var(--window-color4) 10%,
+var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 5%,
+transparent 5%,
+transparent 10%
+    ),
+    repeating-linear-gradient(
+90deg,
+var(--building-color2),
+var(--building-color2) 12%,
+var(--window-color2) 12%,
+var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3) 10%,
+transparent 10%,
+transparent 30%
+    ),
+    repeating-linear-gradient(
+var(--building-color3),
+var(--building-color3) 10%,
+var(--window-color3) 10%,
+var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+  closest-corner circle at 15% 15%,
+  #ffcf33,
+  #ffcf33 20%,
+  #ffff66 21%,
+  #bbeeff 100%
+);
+  }
+--fcc-editable-region--
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
new file mode 100644
index 0000000000..57b5bb2de1
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
@@ -0,0 +1,450 @@
+---
+id: 5d822fd413a79914d39e993d
+title: Step 114
+challengeType: 0
+dashedName: step-114
+---
+
+# --description--
+
+Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there.
+
+# --hints--
+
+You should add a `:root` selector to the media query.
+
+```js
+assert.notDeepEqual(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root"), undefined);
+```
+
+You should add `--building-color1` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000");
+```
+
+You should add `--building-color2` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000");
+```
+
+You should add `--building-color3` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000");
+```
+
+You should add `--building-color4` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
new file mode 100644
index 0000000000..2b670dee03
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
@@ -0,0 +1,862 @@
+---
+id: 5d822fd413a79914d39e993e
+title: Step 115
+challengeType: 0
+dashedName: step-115
+---
+
+# --description--
+
+Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night.
+
+Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great!
+
+# --hints--
+
+You should add `--window-color1` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777");
+```
+
+You should add `--window-color2` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777");
+```
+
+You should add `--window-color3` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777");
+```
+
+You should add `--window-color4` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+  }
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+    --window-color1: #777;
+    --window-color2: #777;
+    --window-color3: #777;
+    --window-color4: #777;
+  }
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
new file mode 100644
index 0000000000..6a1bfc5b2b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
@@ -0,0 +1,65 @@
+---
+id: 619665c9abd72906f3ad30f9
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You will be building a happy Flappy Penguin, and further practicing CSS transforms and animations in the process.
+
+Begin with linking your stylesheet to the page.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.exists(document.querySelector('link'));
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
new file mode 100644
index 0000000000..2572b413a4
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
@@ -0,0 +1,56 @@
+---
+id: 61967e74a8e3690ab6292daa
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`.
+
+# --hints--
+
+You should use the `body` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+You should use the `background` property in the `body` selector.
+
+```js
+assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background'));
+```
+
+You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
new file mode 100644
index 0000000000..67e0a51de0
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
@@ -0,0 +1,53 @@
+---
+id: 61968df2acd5550bf1616c34
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Normalize your page's sizing, by removing the `body` element's `margin` and `padding`.
+
+# --hints--
+
+You should give `body` a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+You should give `body` a `padding` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
new file mode 100644
index 0000000000..ec42f16803
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
@@ -0,0 +1,51 @@
+---
+id: 61968e9243a4090cc805531c
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Remove both the horizontal and vertical scrollbars, using only one property.
+
+# --hints--
+
+You should give `body` an `overflow` of `--fcc-expected--`. But found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
new file mode 100644
index 0000000000..75b3097c34
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
@@ -0,0 +1,64 @@
+---
+id: 61968f8877c6720d6d61aaf5
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within the `body`, add a `div` with a `class` of `ground`.
+
+# --hints--
+
+You should add a new `div`.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+You should give the `div` a `class` of `ground`.
+
+```js
+assert.include(document.querySelector('div')?.className, 'ground');
+```
+
+You should place the `div` within the `body`.
+
+```js
+assert.exists(document.querySelector('body > div.ground'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
new file mode 100644
index 0000000000..2e20bd3589
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
@@ -0,0 +1,66 @@
+---
+id: 619691693bc14b0e528f5a20
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`.
+
+# --hints--
+
+You should use the `.ground` selector.
+
+```js
+assert.match(code, /\.ground\s*\{/);
+```
+
+You should give the `.ground` element a `width` of `100vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw');
+```
+
+You should give the `.ground` element a `height` of `400px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
new file mode 100644
index 0000000000..afa5d6f94b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
@@ -0,0 +1,58 @@
+---
+id: 6196928658b6010f28c39484
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`.
+
+# --hints--
+
+You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
new file mode 100644
index 0000000000..606e749c43
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
@@ -0,0 +1,73 @@
+---
+id: 619692ff79f5770fc6d8c0b4
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin.
+
+# --hints--
+
+You should add a new `div` within the `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 2);
+```
+
+You should give the `div` a `class` of `penguin`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin');
+```
+
+You should place `div.penguin` before `div.ground`.
+
+```js
+assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
new file mode 100644
index 0000000000..46ebd08c10
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
@@ -0,0 +1,75 @@
+---
+id: 6196990f966e8f10a40094f6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Target the `.penguin` element, and set its `width` and `height` to `300px`.
+
+# --hints--
+
+You should use the `.penguin` selector.
+
+```js
+assert.match(code, /\.penguin\s*\{/);
+```
+
+You should give `.penguin` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
+```
+
+You should give `.penguin` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
new file mode 100644
index 0000000000..860cde3323
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
@@ -0,0 +1,74 @@
+---
+id: 619699c10a0f6e11591d73c4
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`.
+
+# --hints--
+
+You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto');
+```
+
+You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
new file mode 100644
index 0000000000..3fa5992f53
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
@@ -0,0 +1,83 @@
+---
+id: 61969aa6acef5b12200f672e
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To create some scenery in the background, you will add two mountains.
+
+Above the `.penguin` element, add a `div` with a `class` of `left-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `left-mountain`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain');
+```
+
+You should place `.left-mountain` before `.penguin`.
+
+```js
+assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
new file mode 100644
index 0000000000..3568d09eeb
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
@@ -0,0 +1,89 @@
+---
+id: 61969c487ced6f12db8fef94
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`.
+
+# --hints--
+
+You should use the `.left-mountain` selector.
+
+```js
+assert.match(code, /\.left-mountain\s*\{/);
+```
+
+You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
+```
+
+You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
+```
+
+You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
new file mode 100644
index 0000000000..e8eba6e4ec
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
@@ -0,0 +1,76 @@
+---
+id: 61969d66cfcdba137d021558
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
new file mode 100644
index 0000000000..a182060c6c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
@@ -0,0 +1,91 @@
+---
+id: 61969e7451455614217e901b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by.
+
+Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis.
+
+# --hints--
+
+You should give `.left-mountain` a `transform` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
+```
+
+You should use the `skew` function on `transform`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
+```
+
+You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
new file mode 100644
index 0000000000..dc15f9983e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
@@ -0,0 +1,90 @@
+---
+id: 6196adc17f77a714d51485f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Set the stack level of the mountain element such that it remains directly behind the `.ground` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+You should not change the `z-index` of the `.ground` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
new file mode 100644
index 0000000000..870ce25dc1
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
@@ -0,0 +1,86 @@
+---
+id: 6196aead7ac7bf1584b17a7f
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`.
+
+# --hints--
+
+You should give `.left-mountain` a `margin-top` of `100px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px');
+```
+
+You should give `.ground` a `margin-top` of `-58px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
new file mode 100644
index 0000000000..b6ddd5cad7
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
@@ -0,0 +1,92 @@
+---
+id: 6196ce0415498d2463989e84
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 4);
+```
+
+You should give the `div` a `class` of `back-mountain`.
+
+```js
+assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain');
+```
+
+You should place `.back-mountain` after `.left-mountain`.
+
+```js
+assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
new file mode 100644
index 0000000000..bcbe4d3e9d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
@@ -0,0 +1,100 @@
+---
+id: 6196cee94c6da1253809dff9
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`.
+
+# --hints--
+
+You should use the `.back-mountain` selector.
+
+```js
+assert.match(code, /\.back-mountain\s*\{/);
+```
+
+You should give `.back-mountain` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px');
+```
+
+You should give `.back-mountain` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px');
+```
+
+You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
new file mode 100644
index 0000000000..4bb9ea8634
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
@@ -0,0 +1,87 @@
+---
+id: 6196d00a5d7292262bc02f4c
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.back-mountain` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
new file mode 100644
index 0000000000..d3fd004502
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
@@ -0,0 +1,100 @@
+---
+id: 6196d0cda039d026f7f78d1e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1');
+```
+
+You should not change the `z-index` of the `.left-mountain` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
new file mode 100644
index 0000000000..cdd348db03
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
@@ -0,0 +1,131 @@
+---
+id: 6196d1ac33c68d27dcda5796
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`.
+
+# --hints--
+
+You should use the `transform` property to rotate the element.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.notEmpty(backMountain?.transform);
+} else {
+  assert.notEmpty(backMountain?.rotate);
+}
+```
+
+You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.equal(backMountain?.transform, 'rotate(45deg)');
+} else {
+  assert.equal(backMountain?.rotate, '45deg');
+}
+```
+
+You should give `.back-mountain` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
+```
+
+You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
+```
+
+You should give `.back-mountain` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
+```
+
+You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
new file mode 100644
index 0000000000..151831dbd7
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
@@ -0,0 +1,104 @@
+---
+id: 6196d213d99f16287bff22ae
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`.
+
+# --hints--
+
+You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 5);
+```
+
+You should give the new `div` element a `class` of `sun`.
+
+```js
+assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun');
+```
+
+You should place the new `div` element immediately after the `.back-mountain` element.
+
+```js
+assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
new file mode 100644
index 0000000000..61cf99cfee
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
@@ -0,0 +1,112 @@
+---
+id: 6196d2c0f22ca0293107c048
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`.
+
+# --hints--
+
+You should use the `.sun` selector.
+
+```js
+assert.match(code, /\.sun\s*\{/);
+```
+
+You should give `.sun` a `width` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px');
+```
+
+You should give `.sun` a `height` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px');
+```
+
+You should give `.sun` a `background-color` of `yellow`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
new file mode 100644
index 0000000000..f924e1d525
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
@@ -0,0 +1,105 @@
+---
+id: 6196d32d1340d829f0f6f57d
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle.
+
+# --hints--
+
+You should give `.sun` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute');
+```
+
+You should give `.sun` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
new file mode 100644
index 0000000000..969618185d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
@@ -0,0 +1,107 @@
+---
+id: 6196d41d40bf9b2aaea5d520
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen.
+
+# --hints--
+
+You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px');
+```
+
+You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
new file mode 100644
index 0000000000..1253455f06
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
@@ -0,0 +1,118 @@
+---
+id: 6197cff995d03905b0cca8ad
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Your penguin will consist of two main sections: the head, and the body.
+
+Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`.
+
+# --hints--
+
+You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `penguin-head`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head');
+```
+
+You should give the second `div` a `class` of `penguin-body`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+--fcc-editable-region--
+    <div class="penguin">
+
+    </div>
+--fcc-editable-region--
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
new file mode 100644
index 0000000000..5256d40e7d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
@@ -0,0 +1,125 @@
+---
+id: 6197f40a16afea068c7e60c8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex);
+```
+
+You should give the `.penguin` element a `z-index` of `4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4');
+```
+
+You should give `.penguin` a `position` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position);
+```
+
+You should give `.penguin` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
new file mode 100644
index 0000000000..c34e5dc0b5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
@@ -0,0 +1,65 @@
+---
+id: 6197f667297bb30a552ce017
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`.
+
+# --hints--
+
+You should give `.ground` a `z-index` of `3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+You should give `.ground` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
new file mode 100644
index 0000000000..4f42960c10
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
@@ -0,0 +1,128 @@
+---
+id: 61993b72e874e709b8dfd666
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`.
+
+# --hints--
+
+You should use the `.penguin-head` selector.
+
+```js
+assert.match(code, /\.penguin-head\s*\{/);
+```
+
+You should give `.penguin-head` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%');
+```
+
+You should give `.penguin-head` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`.
+
+```js
+assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
new file mode 100644
index 0000000000..837b66e7b8
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
@@ -0,0 +1,122 @@
+---
+id: 61993cf26a8e0f0a553db223
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+_Most_ penguins do not have a square head.
+
+Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`.
+
+# --hints--
+
+You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`.
+
+```js
+// Maybe check for individual border-radius properties?
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
new file mode 100644
index 0000000000..42992c942d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
@@ -0,0 +1,139 @@
+---
+id: 61993dbb35adf30b10d49e38
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.
+
+# --hints--
+
+You should use the `.penguin-body` selector.
+
+```js
+assert.match(code, /\.penguin-body\s*\{/);
+```
+
+You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
+```
+
+You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
+```
+
+You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
new file mode 100644
index 0000000000..1304f820e2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
@@ -0,0 +1,133 @@
+---
+id: 61993e9adc9e9a0bb4d28fff
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Another interesting fact about penguins is that they do not have square bodies.
+
+Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body.
+
+# --hints--
+
+You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
new file mode 100644
index 0000000000..177fa37ed7
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
@@ -0,0 +1,139 @@
+---
+id: 6199409834ccaf0d10736596
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`.
+
+# --hints--
+
+You should use the `.penguin *` selector.
+
+```js
+assert.match(code, /\.penguin\s*\*\s*\{/);
+```
+
+You should give `.penguin *` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
new file mode 100644
index 0000000000..39d2becaa7
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
@@ -0,0 +1,154 @@
+---
+id: 6199429802b7c10dc79ff871
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-head` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
+```
+
+You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
+```
+
+You should give `.penguin-head` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
+```
+
+You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
new file mode 100644
index 0000000000..06adbcbaed
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
@@ -0,0 +1,156 @@
+---
+id: 619943285a41720e6370d985
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top);
+```
+
+You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%');
+```
+
+You should give `.penguin-body` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left);
+```
+
+You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
new file mode 100644
index 0000000000..841e0fac70
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
@@ -0,0 +1,146 @@
+---
+id: 619943876b706d0f35c01dbc
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex);
+```
+
+You should give the `.penguin-head` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
new file mode 100644
index 0000000000..71620d485d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
@@ -0,0 +1,148 @@
+---
+id: 6199442866286d0ff421a4fc
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string.
+
+# --hints--
+
+You should use the `.penguin-body::before` selector.
+
+```js
+assert.match(code, /\.penguin-body::before\s*\{/);
+```
+
+You should give `.penguin-body::before` a `content` of `""`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
new file mode 100644
index 0000000000..95939a0a79
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
@@ -0,0 +1,145 @@
+---
+id: 619bcf239fc15905ecd66fce
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Position the pseudo-element relative to its closest positioned ancestor.
+
+# --hints--
+
+You should give `.penguin-body::before` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
new file mode 100644
index 0000000000..144a263043
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
@@ -0,0 +1,158 @@
+---
+id: 619be73b3c806006ccc00bb0
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`.
+
+# --hints--
+
+You should give `.penguin-body::before` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
+```
+
+You should give `.penguin-body::before` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%');
+```
+
+You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
new file mode 100644
index 0000000000..32e8d7967e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Position the pseudo-element `10%` from the top and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
new file mode 100644
index 0000000000..f22f0e3944
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
@@ -0,0 +1,160 @@
+---
+id: 619be80062551a080e32c821
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`.
+
+# --hints--
+
+You should use the `border-radius` property to round off the crest.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
+```
+
+You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
new file mode 100644
index 0000000000..1c9a12db86
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
@@ -0,0 +1,152 @@
+---
+id: 619be8ce4ea49008c5bfbc30
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Increase the pseudo-element's transparency by `30%`.
+
+# --hints--
+
+You should give `.penguin-body::before` an `opacity` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
new file mode 100644
index 0000000000..088e47ba55
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
@@ -0,0 +1,166 @@
+---
+id: 619be946958c6009844f1dee
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`.
+
+# --hints--
+
+You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
+```
+
+You should give the second `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
new file mode 100644
index 0000000000..e25cfd80ce
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
@@ -0,0 +1,193 @@
+---
+id: 619c155df0063a0a3fec0e32
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`.
+
+# --hints--
+
+You should use the `.face` selector.
+
+```js
+assert.match(code, /\.face\s*\{/);
+```
+
+You should give `.face` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
+```
+
+You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
+```
+
+You should give `.face` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
+```
+
+You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
+```
+
+You should give `.face` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
+```
+
+You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
new file mode 100644
index 0000000000..999faf2cd7
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
@@ -0,0 +1,165 @@
+---
+id: 619c16debd0c270b01c5ce38
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`.
+
+# --hints--
+
+You should give `.face` a `border-radius` of `70% 70% 60% 60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
new file mode 100644
index 0000000000..1204286781
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
@@ -0,0 +1,169 @@
+---
+id: 619cfdf2e63ddf05feab86ad
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Position the `.face` elements so that they are `15%` from the top.
+
+# --hints--
+
+You should give `.face` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top);
+```
+
+You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
new file mode 100644
index 0000000000..3529e08289
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
@@ -0,0 +1,171 @@
+---
+id: 619d019488f98c06acbbb71a
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Currently, the two `.face` elements are on top of each other.
+
+Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element.
+
+# --hints--
+
+You should give a `class` of `left` to the first `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left');
+```
+
+You should give a `class` of `right` to the second `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
new file mode 100644
index 0000000000..cdb0268e02
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
@@ -0,0 +1,177 @@
+---
+id: 619d022dc8400c0763829a17
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Target the `.face` element with the `left` class, and position it `5%` left of its parent.
+
+# --hints--
+
+You should use the `.face.left` selector.
+
+```js
+assert.match(code, /\.face\.left\s*\{/);
+```
+
+You should give `.face.left` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left);
+```
+
+You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
new file mode 100644
index 0000000000..c81e359b35
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
@@ -0,0 +1,181 @@
+---
+id: 619d02c7bc95bf0827a5d296
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Target the `.face` element with the `right` class, and position it `5%` right of its parent.
+
+# --hints--
+
+You should use the `.face.right` selector.
+
+```js
+assert.match(code, /\.face\.right\s*\{/);
+```
+
+You should give `.face.right` a `right` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
+```
+
+You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+.face.left {
+  left: 5%;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
new file mode 100644
index 0000000000..7101cc6218
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
@@ -0,0 +1,184 @@
+---
+id: 619d033915012509031f309a
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Below the `.face.right` element, add a `div` element with a `class` of `chin`.
+
+# --hints--
+
+You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `chin`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.chin'));
+```
+
+You should place the `div` element below the `.face.right` element.
+
+```js
+assert.exists(document.querySelector('.face.right + .chin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
new file mode 100644
index 0000000000..8ff7447615
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
@@ -0,0 +1,210 @@
+---
+id: 619d03dadadb6509a16f4f5f
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`.
+
+# --hints--
+
+You should use the `.chin` selector.
+
+```js
+assert.match(code, /\.chin\s*\{/);
+```
+
+You should give `.chin` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width);
+```
+
+You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%');
+```
+
+You should give `.chin` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height);
+```
+
+You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%');
+```
+
+You should give `.chin` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor);
+```
+
+You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
new file mode 100644
index 0000000000..9177d13254
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
@@ -0,0 +1,206 @@
+---
+id: 619d0503e03a790a4179d463
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`.
+
+# --hints--
+
+You should give `.chin` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top);
+```
+
+You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%');
+```
+
+You should give `.chin` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left);
+```
+
+You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%');
+```
+
+You should give `.chin` a `border-radius` of `70% 70% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
new file mode 100644
index 0000000000..ca096090f1
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
@@ -0,0 +1,197 @@
+---
+id: 619d05c54dabca0b10058235
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+So far, the `.face` and `.chin` elements have the same `background-color`.
+
+Create a custom CSS property called `--penguin-face`, and set it to `white`.
+
+# --hints--
+
+You should use the `:root` selector.
+
+```js
+assert.match(code, /:root\s*\{/);
+```
+
+You should give `:root` a `--penguin-face` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face'));
+```
+
+You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
new file mode 100644
index 0000000000..207c0664d1
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
@@ -0,0 +1,197 @@
+---
+id: 619d0882f54bf40bdc4671ed
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Where relevant, replace property values with your `--penguin-face` variable.
+
+# --hints--
+
+You should give `.face` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should give `.chin` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should not use `var(--penguin-face)` in the `.penguin-body` selector.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
new file mode 100644
index 0000000000..a7caac10b5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
@@ -0,0 +1,222 @@
+---
+id: 619d090cd8d6db0c93dc5087
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5);
+```
+
+You should give the first new `div` a `class` of `eye`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye'));
+```
+
+You should give the second new `div` a `class` of `eye`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.right'));
+```
+
+You should place `div.eye.left` after `div.chin`.
+
+```js
+assert.exists(document.querySelector('.chin + .eye.left'));
+```
+
+You should place `div.eye.right` after `div.eye.left`.
+
+```js
+assert.exists(document.querySelector('.eye.left + .eye.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
new file mode 100644
index 0000000000..e2f3ce9e93
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
@@ -0,0 +1,207 @@
+---
+id: 619d0b51ca42ed0d74582186
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`.
+
+# --hints--
+
+You should use the `.eye` selector.
+
+```js
+assert.match(code, /\.eye\s*\{/);
+```
+
+You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%');
+```
+
+You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%');
+```
+
+You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
new file mode 100644
index 0000000000..a4e7d18c12
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
@@ -0,0 +1,200 @@
+---
+id: 619d0bc9cb05360e1bf549c3
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%');
+```
+
+You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
new file mode 100644
index 0000000000..b567a24805
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
@@ -0,0 +1,215 @@
+---
+id: 619d0c1594c38c0ebae75878
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent.
+
+# --hints--
+
+You should use the `.eye.left` selector.
+
+```js
+assert.match(code, /\.eye\.left\s*\{/);
+```
+
+You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%');
+```
+
+You should use the `.eye.right` selector.
+
+```js
+assert.match(code, /\.eye\.right\s*\{/);
+```
+
+You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
new file mode 100644
index 0000000000..2d324e7251
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
@@ -0,0 +1,225 @@
+---
+id: 619d0d18ca99870f884a7bff
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Within each `.eye` element, add a `div` with a `class` of `eye-lid`.
+
+# --hints--
+
+You should add one `div` element within `.eye.left`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
+```
+
+You should add one `div` element within `.eye.right`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
+```
+
+You should give the first new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.left > div.eye-lid'));
+```
+
+You should give the second new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.right > div.eye-lid'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+
+        </div>
+        <div class="eye right">
+
+        </div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
new file mode 100644
index 0000000000..224cfce88b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
@@ -0,0 +1,227 @@
+---
+id: 619d0daf214542102739b0da
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`.
+
+# --hints--
+
+You should use the `.eye-lid` selector.
+
+```js
+assert.match(code, /\.eye-lid\s*\{/);
+```
+
+You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%');
+```
+
+You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%');
+```
+
+You should give `.eye-lid` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
new file mode 100644
index 0000000000..e779df5c2d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
@@ -0,0 +1,226 @@
+---
+id: 619d0e56f9ca9710fcb974e3
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%');
+```
+
+You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%');
+```
+
+You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
new file mode 100644
index 0000000000..ed405abe92
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
@@ -0,0 +1,247 @@
+---
+id: 619d0eec0ac40611b41e2ccc
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7);
+```
+
+You should give the first new `div` a `class` of `blush`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush'));
+```
+
+You should give the second new `div` a `class` of `blush`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.right'));
+```
+
+You should place `.blush.right` after `.blush.left`.
+
+```js
+assert.exists(document.querySelector('.blush.left + .blush.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
new file mode 100644
index 0000000000..a346767374
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
@@ -0,0 +1,238 @@
+---
+id: 619d0fc9825c271253df28d4
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`.
+
+# --hints--
+
+You should use the `.blush` selector.
+
+```js
+assert.match(code, /\.blush\s*\{/);
+```
+
+You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%');
+```
+
+You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%');
+```
+
+You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
new file mode 100644
index 0000000000..78310b8e23
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
@@ -0,0 +1,231 @@
+---
+id: 619d102d786c3d13124c37c6
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%');
+```
+
+You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
new file mode 100644
index 0000000000..9431c4764e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
@@ -0,0 +1,246 @@
+---
+id: 619d107edf7ddf13cc77106a
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent.
+
+# --hints--
+
+You should use the `.blush.left` selector.
+
+```js
+assert.match(code, /\.blush\.left\s*\{/);
+```
+
+You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%');
+```
+
+You should use the `.blush.right` selector.
+
+```js
+assert.match(code, /\.blush\.right\s*\{/);
+```
+
+You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
new file mode 100644
index 0000000000..39348186b5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
@@ -0,0 +1,271 @@
+---
+id: 619d10cc98145f14820399c5
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9);
+```
+
+You should give the first new `div` a `class` of `beak`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak'));
+```
+
+You should give the second new `div` a `class` of `beak`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `top`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.top'));
+```
+
+You should give the second new `div` a `class` of `bottom`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.bottom'));
+```
+
+You should place `div.beak.top` after `div.blush.right`.
+
+```js
+assert.exists(document.querySelector('.blush.right + .beak.top'));
+```
+
+You should place `div.beak.bottom` after `div.beak.top`.
+
+```js
+assert.exists(document.querySelector('.beak.top + .beak.bottom'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
new file mode 100644
index 0000000000..ea381856af
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
@@ -0,0 +1,256 @@
+---
+id: 619d115e2adcd71538e82ebb
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should use the `.beak` selector.
+
+```js
+assert.match(code, /\.beak\s*\{/);
+```
+
+You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%');
+```
+
+You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange');
+```
+
+You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
new file mode 100644
index 0000000000..d1617d8dce
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
@@ -0,0 +1,262 @@
+---
+id: 619d11e6d5ef9515d2a16033
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent.
+
+# --hints--
+
+You should use the `.beak.top` selector.
+
+```js
+assert.match(code, /\.beak\.top\s*\{/);
+```
+
+You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%');
+```
+
+You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%');
+```
+
+You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
new file mode 100644
index 0000000000..e580633578
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
@@ -0,0 +1,267 @@
+---
+id: 619d129a417d0716a94de913
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`.
+
+# --hints--
+
+You should use the `.beak.bottom` selector.
+
+```js
+assert.match(code, /\.beak\.bottom\s*\{/);
+```
+
+You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%');
+```
+
+You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%');
+```
+
+You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
new file mode 100644
index 0000000000..4773a10cef
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
@@ -0,0 +1,267 @@
+---
+id: 619d1340361095175f4b5115
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element.
+
+# --hints--
+
+You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
+```
+
+You should give the new `div` a `class` of `shirt`.
+
+```js
+assert.exists(document.querySelector('.penguin > div.shirt'));
+```
+
+You should place the new `div` before `.penguin-body`.
+
+```js
+assert.exists(document.querySelector('.shirt + .penguin-body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
new file mode 100644
index 0000000000..ff117fcdd8
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
@@ -0,0 +1,263 @@
+---
+id: 619d15797b580c1828b05426
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Within the `.shirt` element, add a `div` with the following emoji as content: 💜
+
+# --hints--
+
+You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
+```
+
+You should give the new `div` a content of `💜`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > div')?.textContent, '💜');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
new file mode 100644
index 0000000000..b0330c317b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
@@ -0,0 +1,264 @@
+---
+id: 619d15d955d9d418c4487bbc
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS`
+
+# --hints--
+
+You should add one `p` element within `.shirt`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > p')?.length, 1);
+```
+
+You should give the `p` element the content `I CSS`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+        <div>💜</div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
new file mode 100644
index 0000000000..2ca7d6a5d8
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
@@ -0,0 +1,278 @@
+---
+id: 619d1629a8adc61960ca8b40
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`.
+
+# --hints--
+
+You should use the `.shirt` selector.
+
+```js
+assert.match(code, /\.shirt\s*\{/);
+```
+
+You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px');
+```
+
+You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif');
+```
+
+You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
new file mode 100644
index 0000000000..c21bb0f24d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
@@ -0,0 +1,272 @@
+---
+id: 619d1c5fc9f8941a400955da
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+In some browsers, the _heart_ emoji may look slightly different from the previous step. This is because some of the character's properties were overridden by the `font-weight` style of `bold`.
+
+Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value.
+
+# --hints--
+
+You should use the `.shirt div` selector to target the `div` with the heart emoji.
+
+```js
+assert.match(code, /\.shirt div\s*\{/);
+```
+
+You should give the `.shirt div` a `font-weight` of `initial` or `normal`.
+
+```js
+assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
new file mode 100644
index 0000000000..79b1e394fb
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
@@ -0,0 +1,273 @@
+---
+id: 619d1dab9ff3421ae1976991
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent.
+
+# --hints--
+
+You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px');
+```
+
+You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+.shirt div {
+  font-weight: initial;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
new file mode 100644
index 0000000000..0c23ce14f1
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
@@ -0,0 +1,281 @@
+---
+id: 619d1deb8b04811b8839ffe4
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element.
+
+# --hints--
+
+You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px');
+```
+
+You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px');
+```
+
+You should give the `.shirt` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
new file mode 100644
index 0000000000..e650139f7e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
@@ -0,0 +1,272 @@
+---
+id: 619d1e7a8e81a61c5a819dc4
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+For the shirt's final touch, set the `color` to `#6a6969`.
+
+# --hints--
+
+You should give `.shirt` a `color` of `#6a6969`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
new file mode 100644
index 0000000000..a3dc1fdbf5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
@@ -0,0 +1,306 @@
+---
+id: 619d1ed33c9a071cf657a0d6
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Fun fact: Penguins cannot stand without at least two feet.
+
+Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `foot`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot'));
+```
+
+You should give the second new `div` a `class` of `foot`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.right'));
+```
+
+You should place `.foot.right` after `.foot.left`.
+
+```js
+assert.exists(document.querySelector('.foot.left + .foot.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
new file mode 100644
index 0000000000..f685b84cb6
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
@@ -0,0 +1,295 @@
+---
+id: 619d1fb5d244c31db8a7fdb7
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`.
+
+# --hints--
+
+You should use the `.foot` selector.
+
+```js
+assert.match(code, /\.foot\s*\{/);
+```
+
+You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%');
+```
+
+You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%');
+```
+
+You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
new file mode 100644
index 0000000000..e26cf4e13a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
@@ -0,0 +1,288 @@
+---
+id: 619d204bd73ae51e743b8e94
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%');
+```
+
+You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
new file mode 100644
index 0000000000..b4d5cd859d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
@@ -0,0 +1,304 @@
+---
+id: 619d20b12996101f430920fb
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+The penguin's beak and feet share the same `color`.
+
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-picorna` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna'));
+```
+
+You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange');
+```
+
+You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+  top: 85%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
new file mode 100644
index 0000000000..d2083801b8
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
@@ -0,0 +1,304 @@
+---
+id: 619d21fe6a3f9b2016be9d9d
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent.
+
+# --hints--
+
+You should use the `.foot.left` selector.
+
+```js
+assert.match(code, /\.foot\.left\s*\{/);
+```
+
+You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%');
+```
+
+You should use the `.foot.right` selector.
+
+```js
+assert.match(code, /\.foot\.right\s*\{/);
+```
+
+You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
new file mode 100644
index 0000000000..003b9709c0
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
@@ -0,0 +1,312 @@
+---
+id: 619d229b0e542520cd91c685
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`.
+
+# --hints--
+
+You should give `.foot.left` a `transform` of `rotate(80deg)`.
+
+```js
+const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left');
+
+if (leftFoot?.transform) {
+  assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)');
+} else {
+  assert.equal(leftFoot.getPropVal('rotate', true), '80deg');
+}
+```
+
+You should give `.foot.right` a `transform` of `rotate(-80deg)`.
+
+```js
+const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right');
+
+if (rightFoot?.transform) {
+  assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)');
+} else {
+  assert.equal(rightFoot.getPropVal('rotate', true), '-80deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.foot.left {
+  left: 25%;
+
+}
+
+.foot.right {
+  right: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
new file mode 100644
index 0000000000..ef45038dbc
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
@@ -0,0 +1,295 @@
+---
+id: 619d23089e787e216a7043d6
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element.
+
+# --hints--
+
+You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
new file mode 100644
index 0000000000..906076ce8b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
@@ -0,0 +1,328 @@
+---
+id: 619d237a107c10221ed743fa
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Fun fact: Penguins cannot fly without wings.
+
+Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4);
+```
+
+You should give the first new `div` a `class` of `arm`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm'));
+```
+
+You should give the second new `div` a `class` of `arm`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.right'));
+```
+
+You should place `.arm.right` after `.arm.left`.
+
+```js
+assert.exists(document.querySelector('.arm.left + .arm.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
new file mode 100644
index 0000000000..94dcb78521
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
@@ -0,0 +1,317 @@
+---
+id: 619d26b12e651022d80cd017
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`.
+
+# --hints--
+
+You should use the `.arm` selector.
+
+```js
+assert.match(code, /\.arm\s*\{/);
+```
+
+You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%');
+```
+
+You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
+
+```js
+assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
new file mode 100644
index 0000000000..a3333bcfba
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
@@ -0,0 +1,332 @@
+---
+id: 619d2712853306238f41828e
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-skin` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin'));
+```
+
+You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))');
+```
+
+You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    gray,
+    rgb(209, 210, 199)
+  );
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
new file mode 100644
index 0000000000..b897e4cc61
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
@@ -0,0 +1,340 @@
+---
+id: 619d2b7a84e78b246f2d17a2
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent.
+
+# --hints--
+
+You should use the `.arm.left` selector.
+
+```js
+assert.match(code, /\.arm\.left\s*\{/);
+```
+
+You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%');
+```
+
+You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%');
+```
+
+You should use the `.arm.right` selector.
+
+```js
+assert.match(code, /\.arm\.right\s*\{/);
+```
+
+You should give `.arm.right` a `top` of `0%`.
+
+```js
+assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top);
+```
+
+You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
new file mode 100644
index 0000000000..a677c9a443
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
@@ -0,0 +1,325 @@
+---
+id: 619d2bd9c1d43c2526e96f1f
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent.
+
+# --hints--
+
+You should use the `transform-origin` property to do this.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`.
+
+```js
+assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
new file mode 100644
index 0000000000..ce148c7f62
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
@@ -0,0 +1,326 @@
+---
+id: 619d2d4e80400325ff89664a
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis.
+
+# --hints--
+
+You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left');
+
+if (leftArm?.rotate && leftArm?.transform) {
+  assert.equal(leftArm.getPropVal('rotate', true), '130deg');
+  assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)');
+} else {
+  assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
new file mode 100644
index 0000000000..7b8d308ed3
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
@@ -0,0 +1,326 @@
+---
+id: 619d2ebc81ba81271460850d
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+Rotate the right arm by `45deg` counterclockwise.
+
+# --hints--
+
+You should give `.arm.right` a `transform` of `rotate(-45deg)`.
+
+```js
+const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right');
+
+if (rightArm?.transform) {
+  assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)');
+} else {
+  assert.equal(rightArm?.getPropVal('rotate', true), '-45deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+--fcc-editable-region--
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
new file mode 100644
index 0000000000..cb6dc37d62
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
@@ -0,0 +1,327 @@
+---
+id: 619d2f0e9440bc27caee1cec
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Fun fact: Most, if not all, flippers are not naturally rectangles.
+
+Give the `.arm` elements' top-left, top-right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`.
+
+# --hints--
+
+You should give `.arm` a `border-radius` of `30% 30% 30% 120%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
new file mode 100644
index 0000000000..81854db2b7
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
@@ -0,0 +1,323 @@
+---
+id: 619d2fd3ff4f772882e3d998
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element.
+
+# --hints--
+
+You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
new file mode 100644
index 0000000000..f11d2a97f4
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
@@ -0,0 +1,333 @@
+---
+id: 619d30350883802921bfcccc
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Now, you are going to use CSS animations to make the penguin wave.
+
+Define a new `@keyframes` named `wave`.
+
+# --hints--
+
+You should define a new `@keyframes` rule.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes'));
+```
+
+You should give the `@keyframes` rule a name of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
new file mode 100644
index 0000000000..3294c31569
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
@@ -0,0 +1,351 @@
+---
+id: 619d324f5915c929f36ae91d
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Give `wave` four waypoints starting at `10%`, and incrementing by `10%`.
+
+# --hints--
+
+You should add a `10%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
+```
+
+You should add a `20%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
+```
+
+You should add a `30%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
+```
+
+You should add a `40%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
+```
+
+You should have 4 waypoints in your keyframe.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
new file mode 100644
index 0000000000..74235426b5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
@@ -0,0 +1,347 @@
+---
+id: 619d32c7fa21f32aaa91d499
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%');
+const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, '');
+const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
new file mode 100644
index 0000000000..ac97b33ea2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
@@ -0,0 +1,347 @@
+---
+id: 619d333b738e3c2b5d58b095
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%');
+const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
new file mode 100644
index 0000000000..fd1c9193d0
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
@@ -0,0 +1,362 @@
+---
+id: 619d337765b9f02c10e93722
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+For the third and fourth waypoints, repeat the `transform` pattern once more.
+
+# --hints--
+
+You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%');
+const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%');
+const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
new file mode 100644
index 0000000000..caa7a1fe0a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
@@ -0,0 +1,357 @@
+---
+id: 619d33c51140292cc5a21742
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function.
+
+# --hints--
+
+You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave');
+```
+
+You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s');
+```
+
+You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite');
+```
+
+You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
new file mode 100644
index 0000000000..e8ab0952d4
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
@@ -0,0 +1,347 @@
+---
+id: 619d3482f505452d861d0f62
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions.
+
+# --hints--
+
+You should use the `.penguin:active` selector.
+
+```js
+assert.match(code, /\.penguin:active\s*\{/);
+```
+
+You should give `.penguin:active` a `transform` of `scale(1.5)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
new file mode 100644
index 0000000000..3530454295
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
@@ -0,0 +1,346 @@
+---
+id: 619d3561a951bf2e41a24f10
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+When you activate the `.penguin` element, it might look as though you can drag it around. This is not true.
+
+Indicate this to users, by giving the active element a `cursor` property of `not-allowed`.
+
+# --hints--
+
+You should give `.penguin:active` a `cursor` property of `not-allowed`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin:active {
+  transform: scale(1.5);
+
+}
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
new file mode 100644
index 0000000000..b2fd620c1f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
@@ -0,0 +1,357 @@
+---
+id: 619d36103839c82efa95dd34
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`.
+
+# --hints--
+
+You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s');
+```
+
+You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out');
+```
+
+You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+
+}
+--fcc-editable-region--
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
new file mode 100644
index 0000000000..18d3c26b52
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
@@ -0,0 +1,670 @@
+---
+id: 619d3711d04d623000013e9e
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element.
+
+Congratulations! You have completed the Flappy Penguin Workshop.
+
+# --hints--
+
+You should give `.ground` a `height` of `calc(100vh - 300px)`.
+
+```js
+assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: calc(100vh - 300px);
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
new file mode 100644
index 0000000000..9d306c557a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Normalize your page, by setting the `width` to `100%`, and `height` to `100vh`.
+
+# --hints--
+
+You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
new file mode 100644
index 0000000000..2de5a239c2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
@@ -0,0 +1,43 @@
+---
+id: 61537bb9b1a29430ac15ad38
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Start this project by linking your `styles.css` file to the page.
+
+# --hints--
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
new file mode 100644
index 0000000000..ae7572fa05
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
@@ -0,0 +1,62 @@
+---
+id: 61537c5f81f0cf325b4a854c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Add a `header` element within the `body` element and assign a class of `header` to it.
+
+Inside the `header`, create an `h1` with `css flexbox photo gallery` as the text.
+
+# --hints--
+
+You should have a `header` element within your `body` element.
+
+```js
+assert.exists(document.querySelector('body')?.querySelector('header'));
+```
+
+Your `header` element should have a `class` with `header` as the value.
+
+```js
+assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
+```
+
+Your `header` element should have an `h1` element inside it.
+
+```js
+assert.exists(document.querySelector('.header')?.querySelector('h1'));
+```
+
+Your `h1` element should have the text `css flexbox photo gallery` inside it.
+
+```js
+assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html>
+  <head lang="en">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
new file mode 100644
index 0000000000..7461f43485
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
@@ -0,0 +1,65 @@
+---
+id: 61537c9eecea6a335db6da79
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Below your `.header` element, create a new `div` element and assign it a `class` of `gallery`. This `div` will act as a container for the gallery images.
+
+Inside that `.gallery` element, create nine `img` elements.
+
+# --hints--
+
+You should create a `div` element in your `body` element.
+
+```js
+assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1);
+```
+
+Your new `div` element should have a `class` with `gallery` set as the value.
+
+```js
+assert(document.querySelector('body')?.querySelector('.gallery'));
+```
+
+Your new `div` element should come after your `.header` element.
+
+```js
+assert(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery'));
+```
+
+Your `.gallery` element should have nine `img` elements.
+
+```js
+assert(document.querySelector('.gallery')?.querySelectorAll('img')?.length === 9);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
new file mode 100644
index 0000000000..6766539792
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
@@ -0,0 +1,111 @@
+---
+id: 61537d86bdc3dd343688fceb
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Next, give each `img` a `src` attribute according to its order in the document. The first `img` should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. The rest should be the same, except replace the `1` with the number the `img` is in the document.
+
+# --hints--
+
+All nine of your `img` elements should have a `src` attribute.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('src')));
+```
+
+Your first `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
+```
+
+Your second `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
+```
+
+Your third `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
+```
+
+Your fourth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
+```
+
+Your fifth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
+```
+
+Your sixth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
+```
+
+Your seventh `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
+```
+
+Your eighth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
+```
+
+Your ninth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+--fcc-editable-region--
+    <div class="gallery">
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
new file mode 100644
index 0000000000..c3de674b58
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
@@ -0,0 +1,83 @@
+---
+id: 615380dff67172357fcf0425
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Now your images are too big.
+
+Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`.
+
+Also set the `height` property to `300px` to keep your images a uniform size.
+
+# --hints--
+
+You should have a `.gallery img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
+```
+
+Your `.gallery img` selector should have a `width` property set to `100%` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
+```
+
+Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth, '350px');
+```
+
+Your `.gallery img` selector should have a `height` property set to `300px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height, '300px');
+```
+
+# --seed--
+
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
new file mode 100644
index 0000000000..e3bb0d435b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
@@ -0,0 +1,112 @@
+---
+id: 6153893900438b4643590367
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
+
+Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values.
+
+Add a `border-bottom` with `4px solid #fdb347` as the value.
+
+# --hints--
+
+You should have a `.header` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
+```
+
+Your `.header` selector should have a `text-align` property set to `center` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center');
+```
+
+Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase');
+```
+
+Your `.header` selector should have a `padding` property set to `32px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.padding, '32px');
+```
+
+Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor, 'rgb(10, 10, 35)');
+```
+
+Your `.header` selector should have a `color` property set to `#fff` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.color, 'rgb(255, 255, 255)');
+```
+
+Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom, '4px solid rgb(253, 179, 71)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+body  {
+  margin: 0;
+  font-family: sans-serif;
+  background-color: #f5f6f7;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
new file mode 100644
index 0000000000..3b04a4b69a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
@@ -0,0 +1,93 @@
+---
+id: 6153897c27f6334716ee5abe
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
+
+To use it, give an element a `display` property of `flex`. This will make the element a <em>flex container</em>. Any direct children of a flex container are called <em>flex items</em>.
+
+Create a `.gallery` selector and make it a flex container.
+
+
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `display` property set to `flex` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
new file mode 100644
index 0000000000..7f754c701b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
@@ -0,0 +1,94 @@
+---
+id: 6153908a366afb4d57185c8d
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Flexbox has a main and cross axis. The main axis is defined by the `flex-direction` property, which has four possible values:
+
+- `row` (default): horizontal axis with flex items from left to right
+- `row-reverse`: horizontal axis with flex items from right to left
+- `column`: vertical axis with flex items from top to bottom
+- `column-reverse`: vertical axis with flex items from bottom to top
+
+**Note**: The axes and directions will be different depending on the text direction. The values shown are for a left-to-right text direction.
+
+Try the different values to see how they affect the layout.
+
+When you are done, set an explicit `flex-direction` of `row` on the `.gallery` element.
+
+# --hints--
+
+Your `.gallery` selector should have a `flex-direction` property set to `row` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
new file mode 100644
index 0000000000..60f0140aab
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
@@ -0,0 +1,88 @@
+---
+id: 615392916d83fa4f02f7e2cf
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+
+The `flex-wrap` property determines how your flex items behave when the flex container is too small. Setting it to `wrap` will allow the items to wrap to the next row or column. `nowrap` (default) will prevent your items from wrapping and shrink them if needed.
+
+
+Make it so your flex items wrap to the next row when they run out of space.
+
+# --hints--
+
+Your `.gallery` selector should have a `flex-wrap` property set to `wrap` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap === 'wrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
new file mode 100644
index 0000000000..6f8a34d276
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
@@ -0,0 +1,87 @@
+---
+id: 6153938dce8b294ff8f5a4e9
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.
+
+Give your `.gallery` selector a `justify-content` property with `center` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have a `justify-content` property set to `center` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
new file mode 100644
index 0000000000..8803a6b2e2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
@@ -0,0 +1,88 @@
+---
+id: 6153947986535e5117e60615
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+The `align-items` property positions the flex content along the cross axis. In this case, with your `flex-direction` set to `row`, your cross axis would be vertical.
+
+To vertically center your images, give your `.gallery` selector an `align-items` property with `center` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have an `align-items` property set to `center` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
new file mode 100644
index 0000000000..1994f1565a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
@@ -0,0 +1,104 @@
+---
+id: 61539e07e7430b528fbffe21
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Give your `.gallery` selector a `padding` property set to `20px 10px` to create some space around the container.
+
+Then, give it a `max-width` of `1400px` and add a `margin` of `0 auto` to center it.
+
+# --hints--
+
+Your `.gallery` selector should have a `padding` property set to `20px 10px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingTop, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingBottom, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingLeft, '10px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingRight, '10px');
+```
+
+Your `.gallery` selector should have a `max-width` property set to `1400px` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth === '1400px');
+```
+
+Your `.gallery` element should be centered using a `margin` with `0 auto` as the value.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.gallery').cssText, 'margin: 0px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
new file mode 100644
index 0000000000..fa88f83ba5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
@@ -0,0 +1,92 @@
+---
+id: 61539f32a206bd53ec116465
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Notice how some of your images have become distorted. This is because the images have different aspect ratios. Rather than setting each aspect ratio individually, you can use the `object-fit` property to determine how images should behave.
+
+Give your `.gallery img` selector the `object-fit` property and set it to `cover`. This will tell the image to fill the `img` container while maintaining aspect ratio, resulting in cropping to fit.
+
+# --hints--
+
+Your `.gallery img` selector should have an `object-fit` property set to `cover` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
new file mode 100644
index 0000000000..23268a5f38
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
@@ -0,0 +1,95 @@
+---
+id: 6153a04847abee57a3a406ac
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Your images need some space between them.
+
+The `gap` CSS shorthand property sets the gaps, also known as gutters, between rows and columns. The `gap` property and its `row-gap` and `column-gap` sub-properties provide this functionality for flex, grid, and multi-column layout. You apply the property to the container element.
+
+Give your `.gallery` flex container a `gap` property with `16px` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have a `gap` property with `16px` set as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
new file mode 100644
index 0000000000..639e9b7cb6
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
@@ -0,0 +1,92 @@
+---
+id: 6153a3485f0b20591d26d2a1
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Smooth out your images a bit by giving the `.gallery img` selector a `border-radius` property with `10px` set as the value.
+
+# --hints--
+
+Your `.gallery img` selector should have a `border-radius` property with `10px` set as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
new file mode 100644
index 0000000000..44bec2cf27
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
@@ -0,0 +1,112 @@
+---
+id: 6153a3952facd25a83fe8083
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `::after` pseudo-element creates an element that is the last child of the selected element. You can use it to add an empty element after the last image. If you give it the same `width` as the images it will push the last image to the left when the gallery is in a two-column layout. Right now, it is in the center because you set `justify-content: center` on the flex container.
+
+Example:
+
+```CSS
+.container::after {
+  content: "";
+  width: 860px;
+}
+```
+
+Create a new selector using an `::after` pseudo-element on the `.gallery` element. Add a `content` property set to an empty string `""` and `350px` set for the `width` property.
+
+# --hints--
+
+Your `.gallery::after` selector should have an empty string `""` set for the `content` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\"");
+```
+
+Your `.gallery::after` selector should have `350px` set for the `width` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
new file mode 100644
index 0000000000..971b0ddd65
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
@@ -0,0 +1,181 @@
+---
+id: 6153a3ebb4f7f05b8401b716
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+
+The `alt` image attribute should describe the image content. Screen readers announce the alternative text in place of images. If the image can't be loaded, this text is presented in place of the image.
+
+To complete the project, add an `alt` attribute to all nine of your cat images to describe them. Use a value at least five characters long for each.
+
+
+# --hints--
+
+All nine of your `img` elements should have a `alt` attribute with text describing each image, with each description using at least `5` letters.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('alt')));
+assert(images.every(image => image.getAttribute('alt').length >= 5));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      --fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="Gallery">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
new file mode 100644
index 0000000000..9765d1e93b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
@@ -0,0 +1,92 @@
+---
+id: 615f171d05def3218035dc85
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Remove the margin from your body element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.
+
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `margin` property set to 0 as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
+```
+
+Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
+```
+
+Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
new file mode 100644
index 0000000000..4b6ce33d27
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
@@ -0,0 +1,75 @@
+---
+id: 6493bc0d99879635209565aa
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `border-box` sizing model does the opposite of `content-box`. The total width of the element, including padding and border, will be the explicit width set. The content of the element will shrink to make room for the padding and border.
+
+Change the `box-sizing` property to `border-box`. Notice how your blue image borders now fit within your red gallery border.
+
+# --hints--
+
+
+Your * selector should have a `box-sizing` property set to `border-box` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+--fcc-editable-region--
+ * {
+  box-sizing: content-box;
+}
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
new file mode 100644
index 0000000000..11895a275c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
@@ -0,0 +1,83 @@
+---
+id: 6494da0daf5df5197963671d
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
+
+The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
+
+Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
+
+# --hints--
+
+You should have a `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
+```
+
+Your `*` selector should have its `box-sizing` property set to `content-box`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+  ```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
new file mode 100644
index 0000000000..40a707dd74
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
@@ -0,0 +1,126 @@
+---
+id: 64dd076a1b33c86d84b4232f
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+In order to better visualize how your elements are sized, adding a border can be helpful.
+
+Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
+
+Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
+```
+
+Your `.gallery` selector should have a `width` property set to `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
+```
+
+Your `.gallery` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
+```
+
+Your `.gallery` selector should have a `border` property set to `5px solid red`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
+```
+
+You should have an `img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+Your `img` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
+```
+
+Your `img` selector should have a `width` property set to `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
+```
+
+Your `img` selector should have a `padding` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
+```
+
+Your `img` selector should have a `padding` property set to `5px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
+```
+
+Your `img` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
+```
+
+Your `img` selector should have a `border` property set to `5px solid blue`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
new file mode 100644
index 0000000000..92603787c3
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
@@ -0,0 +1,79 @@
+---
+id: 64dd136e4e8b0894f9c70d86
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.
+
+Remove your `.gallery` and `img` selectors, and all rules within.
+
+# --hints--
+
+You should not have a `.gallery` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+You should not have an `img` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+ * {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md b/curriculum/challenges/swahili/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
index 00f4337c26..13878dfedc 100644
--- a/curriculum/challenges/swahili/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
@@ -7,7 +7,7 @@ dashedName: step-3
 
 # --description--
 
-To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropraite message in the block of each condition.
+To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropriate message in the block of each condition.
 
 Starting with the duplex loan, check if `annualIncome` is greater than or equal to `minIncomeForDuplex` AND if `creditScore` is greater than `minCreditScoreForDuplex`.
 
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
new file mode 100644
index 0000000000..10c2147f74
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
@@ -0,0 +1,58 @@
+---
+id: 615f2abbe7d18d49a1e0e1c8
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You've been provided with a basic HTML boilerplate.
+
+Create an `h1` element within your `body` element and give it the text `Nutrition Facts`.
+
+# --hints--
+
+You should add a new `h1` element.
+
+```js
+assert.exists(document.querySelector('h1'));
+```
+
+Your `h1` element should be within your `body` element.
+
+```js
+assert(document.querySelector('h1')?.parentElement?.localName === 'body');
+```
+
+Your `h1` element should have the text `Nutrition Facts`.
+
+```js
+assert(document.querySelector('h1')?.innerText === 'Nutrition Facts');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
new file mode 100644
index 0000000000..272ccd55ff
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
@@ -0,0 +1,62 @@
+---
+id: 615f2d4150fe0d4cbd0f2628
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Below your `h1` element, add a `p` element with the text `8 servings per container`.
+
+# --hints--
+
+You should add a new `p` element.
+
+```js
+assert.exists(document.querySelector('p'));
+```
+
+Your `p` element should be within your `body` element.
+
+```js
+assert(document.querySelector('p')?.parentElement?.localName === 'body');
+```
+
+Your `p` element should come after your `h1` element.
+
+```js
+assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1');
+```
+
+Your `p` element should have the text `8 servings per container`.
+
+```js
+assert(document.querySelector('p')?.innerText === '8 servings per container');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
new file mode 100644
index 0000000000..2ae877fe38
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
@@ -0,0 +1,63 @@
+---
+id: 615f34948891834dd77655a6
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Add a second `p` element with the text `Serving size 2/3 cup (55g)`.
+
+# --hints--
+
+You should have a second `p` element.
+
+```js
+assert(document.querySelectorAll('p')?.length === 2);
+```
+
+Your second `p` element should be within your `body` element.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.parentElement?.localName === 'body');
+```
+
+Your second `p` element should come after your existing `p` element.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p');
+```
+
+Your second `p` element should have the text `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
new file mode 100644
index 0000000000..986fa60763
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
@@ -0,0 +1,88 @@
+---
+id: 615f34ecc1091b4fd5a8a484
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Within your `head` element, add a `link` element with the `rel` attribute set to `stylesheet` and the `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+This will import the `Open Sans` font family, with the font weight values `400`, `700`, and `800`.
+
+Also add a `link` element to link your `styles.css` file.
+
+# --hints--
+
+Your code should have two `link` elements.
+
+```js
+assert.strictEqual(document.querySelectorAll('link').length, 2);
+```
+
+Your `link` elements should be void elements, they should not have a end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/);
+```
+
+Your two `link` elements should be inside the `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.strictEqual(headElement.querySelectorAll('link').length, 2);
+```
+
+Both of your `link` elements should have the `rel` attribute set to `stylesheet`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert.isTrue(links.every(link => link.getAttribute('rel') === 'stylesheet'));
+```
+
+One of your `link` elements should have an `href` attribute set to `styles.css`.
+
+```js
+const styleElement = document.querySelector('[data-href]');
+assert.isNotNull(styleElement);
+```
+
+One of your `link` elements should have an `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert.exists(links.find(link => link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
new file mode 100644
index 0000000000..d66790fd30
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
@@ -0,0 +1,55 @@
+---
+id: 615f357957e370510f21ea16
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `body` selector and give it a `font-family` set to `Open Sans` with a fallback of `sans-serif`.
+
+Remember that fonts with spaces in the name must be wrapped in quotes for CSS.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `font-family` property set to `"Open Sans", sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === '"Open Sans", sans-serif');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
new file mode 100644
index 0000000000..82f736ff48
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
@@ -0,0 +1,57 @@
+---
+id: 615f378014c2da526a109c81
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The font is a bit small. Create an `html` selector and set the font to have a size of `16px`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have a `font-size` property set to `16px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
new file mode 100644
index 0000000000..6ceffde047
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
@@ -0,0 +1,66 @@
+---
+id: 615f38279e5c3d53692ea441
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Wrap your `h1` and `p` elements in a `div` element. Give that `div` a `class` attribute set to `label`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelector('div'));
+```
+
+Your new `div` element should have the `class` attribute set to `label`.
+
+```js
+assert(document.querySelector('div')?.classList?.contains('label'));
+```
+
+Your `h1` and `p` elements should be within your new `.label` element.
+
+```js
+const children = [...document.querySelectorAll('h1'), ...document.querySelectorAll('p')];
+assert(children?.every(child => child?.parentElement?.classList?.contains('label')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+--fcc-editable-region--
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
new file mode 100644
index 0000000000..1ea4ac044a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
@@ -0,0 +1,65 @@
+---
+id: 615f38cabc64e3556f98cc1a
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Borders can be used to group and prioritize content.
+
+Create a `.label` selector and give it a `border` set to `2px solid black`.
+
+# --hints--
+
+You should have a `.label` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label'));
+```
+
+Your `.label` selector should have a `border` property set to `2px solid black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
new file mode 100644
index 0000000000..e436f20dcd
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
@@ -0,0 +1,61 @@
+---
+id: 615f3949f58e12577dcefb00
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Good use of white space can bring focus to the important elements of your page, and help guide your user's eyes through your text.
+
+Give your `.label` selector a `width` property set to `270px`.
+
+# --hints--
+
+Your `.label` selector should have a `width` property set to `270px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.width === '270px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
new file mode 100644
index 0000000000..ca53749464
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
@@ -0,0 +1,66 @@
+---
+id: 615f39d7da41b15851fa3fb9
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Give your `.label` selector a `margin` property set to `20px auto`, and a `padding` property set to `0 7px`.
+
+# --hints--
+
+Your `.label` selector should have a `margin` property set to `20px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.margin === '20px auto');
+```
+
+Your `.label` selector should have a `padding` property set to `0 7px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+  width: 270px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
new file mode 100644
index 0000000000..694a4e9ff3
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
@@ -0,0 +1,72 @@
+---
+id: 615f3b091162165948e1cb33
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+If you inspect your `.label` element with your browser's developer tools, you may notice that it's actually 288 pixels wide instead of 270. This is because, by default, the browser includes the border and padding when determining an element's size.
+
+To solve this, reset the box model by creating a `*` selector and giving it a `box-sizing` property of `border-box`.
+
+# --hints--
+
+You should create a `*` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
new file mode 100644
index 0000000000..84ea6cab71
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
@@ -0,0 +1,76 @@
+---
+id: 615f3cafd794015aa9547a6d
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Remember that the use of `h1`, `h2`, and similar tags determine the semantic structure of your HTML. However, you can adjust the CSS of these elements to control the visual flow and hierarchy.
+
+Create an `h1` rule and set the `font-weight` property to `800`. This will make your `h1` text bolder.
+
+# --hints--
+
+You should create an `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+Your `h1` selector should have a `font-weight` property set to `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
new file mode 100644
index 0000000000..fe53466124
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
@@ -0,0 +1,70 @@
+---
+id: 615f3d9e59db4b5b8e960762
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Give your `h1` selector a `text-align` property of `center`.
+
+# --hints--
+
+Your `h1` selector should have a `text-align` property set to `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
new file mode 100644
index 0000000000..0c437fb4e8
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
@@ -0,0 +1,71 @@
+---
+id: 615f3e1b7233ee5c7595771f
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Fine-tune the placement of your `h1` by giving it a top and bottom margin of `-4px` and a left and right margin of `0`.
+
+# --hints--
+
+Your `h1` selector should have a `margin` property set to `-4px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.margin === '-4px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
new file mode 100644
index 0000000000..2448838c5f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
@@ -0,0 +1,80 @@
+---
+id: 615f3e4af8008c5d494d3afe
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Create a `p` selector and remove all margins.
+
+# --hints--
+
+You should create a `p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p'));
+```
+
+Your `p` selector should have a `margin` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
new file mode 100644
index 0000000000..53f6d70c15
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
@@ -0,0 +1,96 @@
+---
+id: 615f3ed16592445e57941aec
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Lines can help separate and group important content, especially when space is limited.
+
+Create a `div` element below your `h1` element, and give it a `class` attribute set to `divider`.
+
+# --hints--
+
+You should create a new `div`.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('divider'));
+```
+
+Your `.divider` element should be within your `.label` element.
+
+```js
+assert(document.querySelector('.label')?.querySelector('.divider'));
+```
+
+Your `.divider` element should come after your `h1` element.
+
+```js
+assert(document.querySelector('.divider')?.previousElementSibling?.localName === 'h1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
new file mode 100644
index 0000000000..f8e43c0a29
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
@@ -0,0 +1,91 @@
+---
+id: 615f405b89a7ec5f8e2d11f4
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Create a selector for your new `.divider` and set the `border-bottom` property to `1px solid #888989`. Also give it a top and bottom margin of `2px`. It should not have any left or right margin.
+
+# --hints--
+
+You should create a `.divider` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider'));
+```
+
+Your `.divider` selector should have a `border-bottom` property set to `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+Your `.divider` selector should have a `margin` property set to `2px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.margin === '2px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
new file mode 100644
index 0000000000..aa3594ecc5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
@@ -0,0 +1,84 @@
+---
+id: 615f40b01f680e608d360ed4
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+The `letter-spacing` property can be used to adjust the space between each character of text in an element.
+
+Give your `h1` selector a `letter-spacing` property set to `0.15px` to space them out a bit more.
+
+# --hints--
+
+Your `h1` selector should have a `letter-spacing` property set to `0.15px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
new file mode 100644
index 0000000000..a1f84535ff
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
@@ -0,0 +1,91 @@
+---
+id: 615f4172e9eec061d6456221
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Nutrition labels have a lot of bold text to draw attention to important information. Rather than targeting each element that needs to be bold, it is more efficient to use a class to apply the bold styling to every element.
+
+Give your second `p` element a `class` attribute set to `bold`.
+
+# --hints--
+
+Your second `p` element should have a `class` attribute set to `bold`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.classList?.contains('bold'));
+```
+
+Your first `p` element should not have a `class` attribute set to `bold`.
+
+```js
+assert(!document.querySelector('p')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
new file mode 100644
index 0000000000..bcbaaf757a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
@@ -0,0 +1,104 @@
+---
+id: 615f41c979787462e76dab90
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Your new class does not have any styling yet. Create a `.bold` selector and give it a `font-weight` property set to `800` to make the text bold.
+
+Go ahead and remove the `font-weight` property from your `h1` selector as well.
+
+# --hints--
+
+You should have a `.bold` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold'));
+```
+
+Your `.bold` selector should have a `font-weight` property set to `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold')?.fontWeight === '800');
+```
+
+Your `h1` selector should not have a `font-weight` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === "");
+```
+
+You should not remove your `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
new file mode 100644
index 0000000000..05d8bb7562
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
@@ -0,0 +1,86 @@
+---
+id: 615f423cf65d5864132a0956
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Give your `h1` element a `class` attribute set to `bold`. This will make the text bold again.
+
+# --hints--
+
+Your `h1` element should have a `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('h1')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
new file mode 100644
index 0000000000..64189f1570
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
@@ -0,0 +1,100 @@
+---
+id: 615f42a021625f656101ef93
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Horizontal spacing between equally important elements can increase the readability of your text.
+
+Wrap the text `2/3 cup (55g)` in a `span` element.
+
+# --hints--
+
+You should create a new `span` element.
+
+```js
+assert(document.querySelector('span'));
+```
+
+Your `span` element should have the text `2/3 cup (55g)`.
+
+```js
+assert(document.querySelector('span')?.textContent?.trim() === '2/3 cup (55g)');
+```
+
+Your `p` element should still have the text `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
new file mode 100644
index 0000000000..686336b2dc
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
@@ -0,0 +1,92 @@
+---
+id: 615f4bfb9de4a16703b56eb6
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now we can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`.
+
+# --hints--
+
+Your `p` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.display === 'flex');
+```
+
+Your `p` selector should have a `justify-content` property set to `space-between`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.justifyContent === 'space-between');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+--fcc-editable-region--
+p {
+  margin: 0;
+}
+--fcc-editable-region--
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
new file mode 100644
index 0000000000..4c960b7219
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
@@ -0,0 +1,104 @@
+---
+id: 615f4ce9d877b668417c0c42
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Wrap everything within the `.label` element in a new `header` element.
+
+# --hints--
+
+You should create a new `header` element.
+
+```js
+assert(document.querySelector('header'));
+```
+
+Your `header` element should be within your `.label` element.
+
+```js
+assert(document.querySelector('header')?.parentElement?.classList?.contains('label'));
+```
+
+Your `h1`, `div`, and `p` elements should be within your new `header` element.
+
+```js
+const children = document.querySelector('header')?.children;
+assert(children?.[0]?.localName === 'h1');
+assert(children?.[1]?.localName === 'div');
+assert(children?.[2]?.localName === 'p');
+assert(children?.[3]?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
new file mode 100644
index 0000000000..ea61500923
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
@@ -0,0 +1,105 @@
+---
+id: 615f4dde9d72e3694cb9ee3b
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Now update your `h1` selector to be `header h1` to specifically target your `h1` element within your new `header`.
+
+# --hints--
+
+You should have a `header h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('header h1'));
+```
+
+You should not have an `h1` selector.
+
+```js
+assert.isNull(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+You should not change any properties in the selector.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('header h1');
+assert(style?.textAlign === 'center');
+assert(style?.margin === '-4px 0px');
+assert(style?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
new file mode 100644
index 0000000000..6830eadac2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
@@ -0,0 +1,105 @@
+---
+id: 615f4ec58334106a4170c2a8
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Create a new `div` element below your `header` element, and give it a `class` attribute set to `divider large`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 3);
+```
+
+Your new `div` element should come after your `header` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` element should have the `class` attribute set to `divider large`.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider'));
+assert(div?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
new file mode 100644
index 0000000000..4fd89a7f1f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
@@ -0,0 +1,111 @@
+---
+id: 615f4f9e4a40566b776a8f38
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Create a new `.large` selector and give it a `height` property set to `10px`. Also create an `.large, .medium` selector and set the `background-color` property to `black`.
+
+# --hints--
+
+You should have a new `.large` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large'));
+```
+
+Your `.large` selector should have a `height` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large')?.height === '10px');
+```
+
+You should have a new `.large, .medium` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium'));
+```
+
+Your `.large, .medium` selector should have a `background-color` property set to `black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.backgroundColor === 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
new file mode 100644
index 0000000000..971d93624c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
@@ -0,0 +1,101 @@
+---
+id: 615f50473cc0196c6dd3892a
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+You may notice there is still a small border at the bottom of your `.large` element. To reset this, give your `.large, .medium` selector a `border` property set to `0`.
+
+Note: the `medium`(medium) class will be utilized later for the thinner bars of the nutrition label.
+
+# --hints--
+
+Your `.large, .medium` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.borderWidth === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+--fcc-editable-region--
+.large, .medium {
+  background-color: black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
new file mode 100644
index 0000000000..47197f64cc
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
@@ -0,0 +1,113 @@
+---
+id: 615f51257a8a516d80b6c743
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Create a new `div` below your `.large` element and give it a `class` attribute set to `calories-info`.
+
+# --hints--
+
+You should create another `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 4);
+```
+
+Your new `div` should have a `class` attribute set to `calories-info`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info'));
+```
+
+Your new `div` should come after the `.large` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
new file mode 100644
index 0000000000..136c3e5dfc
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
@@ -0,0 +1,128 @@
+---
+id: 615f51e4e5b24a6e80eccce1
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Within your `.calories-info` element, create a `div` element. Give that `div` element a `class` attribute set to `left-container`. Within the newly created `div` element, create a `h2` element with the text `Amount per serving`. Give the `h2` element a `class` attribute set to `bold small-text`.
+
+# --hints--
+
+You should create a new `div` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'div');
+```
+
+Your new `div` element should have a `class` attribute set to `left-container`.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('left-container'));
+```
+
+You should create a new `h2` element within your `.left-container` element.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.localName === 'h2');
+```
+
+Your new `h2` element should have a `class` attribute set to `bold small-text`.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('bold'));
+assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('small-text'));
+```
+
+Your new `h2` element should have the text `Amount per serving`.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.innerText === 'Amount per serving');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+    <div class="calories-info">
+
+    </div>
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
new file mode 100644
index 0000000000..c71a25214c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
@@ -0,0 +1,115 @@
+---
+id: 615f522dea4f776f64dc3e91
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `rem` unit stands for `root em`, and is relative to the font size of the `html` element.
+
+Create a `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`).
+
+# --hints--
+
+You should have an `.small-text` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.small-text'));
+```
+
+Your `.small-text` selector should have a `font-size` property set to `0.85rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.small-text')?.fontSize === '0.85rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
new file mode 100644
index 0000000000..deabca353f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
@@ -0,0 +1,143 @@
+---
+id: 615f5486b8fd4b71633f69b0
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Below your `.small-text` element, create a new `p` element with the text `Calories`. Also below the `.left-container` element, create a new `span` element with the text `230`.
+
+# --hints--
+
+You should have a new `p` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.querySelector('p'))
+```
+
+You should have a new `span` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.querySelector('span'))
+```
+
+Your `p` element should come after your `.small-text` element.
+
+```js
+assert(document.querySelector('.small-text')?.nextElementSibling?.localName === 'p');
+```
+
+Your `span` element should come after your `.left-container` element.
+
+```js
+assert(document.querySelector('.left-container')?.nextElementSibling?.localName ==='span');
+```
+
+Your `p` element should have the text `Calories`.
+
+```js
+assert(document.querySelector('.small-text')?.nextElementSibling?.innerText === 'Calories');
+```
+
+Your `span` element should have the text `230`.
+
+```js
+assert(document.querySelector('.left-container')?.nextElementSibling?.innerText === '230');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
new file mode 100644
index 0000000000..14f20ffb78
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
@@ -0,0 +1,144 @@
+---
+id: 615f575b50b91e72af079480
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Create a new `.left-container p` selector setting the top and bottom margin to `-5px`, and the left and right margin to `-2px`. Also set the `font-size` to `2em` and `font-weight` to `700`.
+
+# --hints--
+
+You should have a new `.left-container p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p'));
+```
+
+Your new `.left-container p` selector should have a `margin` property set to `-5px -2px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginTop, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginBottom, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginLeft, '-2px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginRight, '-2px');
+```
+
+Your new `.left-container p` selector should have a `font-size` property set to `2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontSize === '2em');
+```
+
+Your new `.left-container p` selector should have a `font-weight` property set to `700`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontWeight === '700');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
new file mode 100644
index 0000000000..b833b5f471
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
@@ -0,0 +1,141 @@
+---
+id: 615f5af373a68e744a3c5a76
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Create a `.calories-info span` selector, set its `font-size` to `2.4em` and `font-weight` to `700`.
+
+# --hints--
+
+You should create a `.calories-info span` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span'));
+```
+
+Your `.calories-info span` selector should have a `font-size` property set to `2.4em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '2.4em');
+```
+
+Your `.calories-info span` selector should have a `font-weight` property set to `700`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontWeight === '700');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
new file mode 100644
index 0000000000..84d0ba9d98
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
@@ -0,0 +1,134 @@
+---
+id: 615f5fd85d0062761f288364
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Typography is often more art than science. You may have to tweak things like alignment until it looks correct.
+
+Give your `.calories-info span` selector a `margin` set to `-7px -2px`. This will shift your `230` text into place.
+
+# --hints--
+
+Your `.calories-info span` selector should have a `margin` set to `-7px -2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.margin === '-7px -2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+.calories-info span {
+  font-size: 2.4em;
+  font-weight: 700;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
new file mode 100644
index 0000000000..31f049fa2d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
@@ -0,0 +1,141 @@
+---
+id: 615f61338c8ca176d6445574
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider medium`.
+
+# --hints--
+
+You should create a new `div` within your `.label` element.
+
+```js
+assert(document.querySelectorAll('.label > div')?.length === 3)
+```
+
+Your new `div` should have the `class` attribute set to `divider medium`. This div should be the last element in your `.label` element.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider') && div?.classList?.contains('medium'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
new file mode 100644
index 0000000000..f074a2cf76
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
@@ -0,0 +1,142 @@
+---
+id: 615f666ac5edea782feb7e75
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Create an `.medium` selector and give it a `height` property of `5px`.
+
+# --hints--
+
+You should create an `.medium` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.medium'));
+```
+
+Your `.medium` selector should have a `height` property set to `5px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.medium')?.height === '5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
new file mode 100644
index 0000000000..0c0aa78424
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
@@ -0,0 +1,167 @@
+---
+id: 615f671b6d1919792745aa5d
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Create a new `div` element below your `.medium` element. Give it a `class` attribute set to `daily-value small-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `bold right`.
+
+# --hints--
+
+You should create a new `div` element after your `.medium` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('medium'));
+```
+
+Your new `div` should have a `class` attribute set to `daily-value small-text`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value'));
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('small-text'));
+```
+
+Your new `div` element should have a `p` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `% Daily Value *`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *');
+```
+
+Your new `p` element should have a `class` attribute set to `bold right`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    --fcc-editable-region--
+    <div class="divider medium"></div>
+
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
new file mode 100644
index 0000000000..3873e85fbf
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
@@ -0,0 +1,157 @@
+---
+id: 615f6823d0815b7a991f2a75
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Use your existing `.divider` element as an example to add a new divider after the `p` element.
+
+# --hints--
+
+You should create a new `div` within your `.daily-value` element.
+
+```js
+assert(document.querySelectorAll('.daily-value.small-text > div')?.length === 1)
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text > div')?.classList?.contains('divider'))
+```
+
+Your new `div` should come after your `p` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text > div')?.previousElementSibling?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
new file mode 100644
index 0000000000..74ebd1c18c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
@@ -0,0 +1,182 @@
+---
+id: 615f6b2d164f81809efd9bdc
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Then, wrap the text `Total Fat` in one `span` element, the text `10%` in another, and give them each a class of `bold`.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Total Fat 8g 10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g[\s|\n]+10%/));
+```
+
+Your `p` element should have two `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
+```
+
+One `span` element should wrap the text `Total Fat`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat');
+```
+
+The `span` element around `Total Fat` should have the `class` set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.className === 'bold');
+```
+
+A `span` element should wrap the text `10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span + span')?.innerText === '10%');
+```
+
+The `span` element around `10%` should have the `class` set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
new file mode 100644
index 0000000000..de2aab3150
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
@@ -0,0 +1,172 @@
+---
+id: 615f6cc778f7698258467596
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Below your element with the `Total Fat` text, create a new `p` element with the text `Saturated Fat 1g 5%`. Wrap the `5%` in a `span` with the `class` attribute set to `bold`. In this case this is enough to align the percentage to `5%`.
+
+# --hints--
+
+You should create a new `p` element below your element with the `Total Fat` text.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/));
+```
+
+Your new `p` element should have the text `Saturated Fat 1g 5%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.localName === 'span');
+```
+
+Your `span` element should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+Your `span` element should wrap the `5%` text.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === "5%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
new file mode 100644
index 0000000000..5f2aad0b62
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
@@ -0,0 +1,148 @@
+---
+id: 615f6fddaac1e083502d3e6a
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+This new `p` element will need to be indented. Give it a `class` set to `indent`.
+
+# --hints--
+
+Your `p` element with the text `Saturated Fat 1g 5%` should have a `class` attribute set to `indent`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p>Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
new file mode 100644
index 0000000000..2e1a5c3f79
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
@@ -0,0 +1,163 @@
+---
+id: 615f70077a4ff98424236c1e
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create a new `.indent` selector and give it a `margin-left` property set to `1em`.
+
+# --hints--
+
+You should have a new `.indent` selector.
+
+```js
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.indent'));
+```
+
+Your `.indent` selector should have a `margin-left` property set to `1em`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft, '1em');
+```
+
+Your `.indent` selector should only set the `margin-left` property, not other margin properties.
+
+```js
+const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.indent') ?? {};
+assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
new file mode 100644
index 0000000000..1d696789f3
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
@@ -0,0 +1,160 @@
+---
+id: 615f72a872354a850d4f533e
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Create a `.daily-value p` selector to target all of your `p` elements in the `daily-value` section. Give this new selector a `border-bottom` set to `1px solid #888989`.
+
+# --hints--
+
+You should have a new `.daily-value p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+Your `.daily-value p` selector should have a `border-bottom` property set to `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
new file mode 100644
index 0000000000..96cbc9639f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
@@ -0,0 +1,166 @@
+---
+id: 615f74a71f1e498619e38ee8
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+The bottom borders under your `% Daily Value *` and `Saturated Fat 1g 5%` elements do not extend the full width of the label. Add `no-divider` to the `class` for these two elements.
+
+# --hints--
+
+Your `p` element with the text `% Daily Value *` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.firstElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('bold'));
+```
+
+Your `p` element with the text `Saturated Fat 1g 5%` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
new file mode 100644
index 0000000000..d3d0a81e57
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
@@ -0,0 +1,181 @@
+---
+id: 615f7ad94380408d971d14f6
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+The `:not` pseudo-selector can be used to select all elements that do not match the given CSS rule.
+
+```css
+div:not(#example) {
+  color: red;
+}
+```
+
+The above selects all `div` elements without an `id` of `example`.
+
+Modify your `.daily-value p` selector to exclude the `.no-divider` elements.
+
+# --hints--
+
+You should have a `.daily-value p:not(.no-divider)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)'));
+```
+
+You should not have a `.daily-value p` selector.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+You should not change the properties in the `.daily-value p:not(.no-divider)` selector.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)');
+assert(style?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
new file mode 100644
index 0000000000..aac27eb5b6
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
@@ -0,0 +1,165 @@
+---
+id: 615f7bc680f7168ea01ebf99
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Now you will have to add separate dividers below your `.no-divider` elements.
+
+Your first `.no-divider` element has a `.divider` after it. Create another `.divider` after your second `.no-divider` element.
+
+# --hints--
+
+You should create a new `div` at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
new file mode 100644
index 0000000000..6504be1b04
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
@@ -0,0 +1,196 @@
+---
+id: 615f7c71eab8218f846e4503
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+After your last `.divider`, create another `p` element with the text `Trans Fat 0g`. Italicize the word `Trans` by wrapping it in an `i` element. Give the new `p` element the `class` attribute set to `indent no-divider`. Wrap `Trans Fat 0g` in a `span` element for alignment.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Trans Fat 0g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText === 'Trans Fat 0g');
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(p?.classList?.contains('indent'));
+assert(p?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have an `i` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i'));
+```
+
+Your `i` element should wrap the text `Trans`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i')?.innerText === 'Trans');
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span'));
+```
+
+Your `span` element should wrap the text `Trans Fat 0g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText?.match(/Trans[\s|\n]+Fat 0g/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
new file mode 100644
index 0000000000..b038b1dfc2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
@@ -0,0 +1,165 @@
+---
+id: 615f7d489a581590d1350288
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Create another `.divider` after your last `p` element.
+
+# --hints--
+
+You should create a new `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` element should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
new file mode 100644
index 0000000000..ce39f09eae
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
@@ -0,0 +1,215 @@
+---
+id: 615f7de4487b64919bb4aa5e
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Then, wrap the text `Cholesterol` in a `span` element, `0%` in another, and give each of them a class of `bold`.
+
+Finally, nest the `span` element containing the text `Cholesterol` along with the text `0mg`, in an additional `span` element for alignment.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Cholesterol 0mg 0%`.
+
+```js
+const text = document.querySelector('.daily-value.small-text')?.lastElementChild?.textContent?.trim()?.replace(/\n/g, ' ')?.replace(/\s\s+/g, ' ');
+assert(text === 'Cholesterol 0mg 0%');
+```
+
+Your new `p` element should have exactly three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+The text `Cholesterol` should be nested in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
+assert(cholesterolSpan.length === 1);
+```
+
+Your `Cholesterol` `span` should have the `class` attribute set to `bold`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
+assert(cholesterolSpan[0]?.classList?.contains('bold'));
+```
+
+The text `0%` should be nested in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
+assert(zeroPercentSpan.length === 1);
+```
+
+Your `0%` `span` should have the `class` attribute set to `bold`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
+assert(zeroPercentSpan[0]?.classList?.contains('bold'));
+```
+
+Your `Cholesterol` `span` and your `0mg` text should be wrapped in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolZeroSpan = spans.filter(span => span?.innerText === 'Cholesterol 0mg');
+assert(cholesterolZeroSpan.length === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
new file mode 100644
index 0000000000..f165c8568f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
@@ -0,0 +1,205 @@
+---
+id: 615f7e7281626a92bbd62da8
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Put `Sodium` and `7%` each in their own `span` with a class of a `bold` like you did with the others.
+
+Then, add an additional `span` element around `Sodium 160mg` for alignment again.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Sodium 160mg 7%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Sodium[\s|\n]160mg[\s|\n]+7%/));
+```
+
+Your new `p` element should have three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+A `span` element should wrap the text `Sodium 160mg`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/));
+```
+
+A `span` element should wrap the text `Sodium`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === "Sodium");
+```
+
+The `span` around `Sodium` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+A `span` element should wrap the text `7%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '7%');
+```
+
+The `span` element around `7%` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
new file mode 100644
index 0000000000..58d410f432
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
@@ -0,0 +1,210 @@
+---
+id: 615f7ecb09de9a938ef94756
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below your last `p` element, add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Then, wrap the nutrient and amount in a `span` for alignment again.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Total Carbohydrate 37g 13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g[\s|\n]+13%/));
+```
+
+Your new `p` element should have three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+One `span` element should wrap the text `Total Carbohydrate 37g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g/));
+```
+
+One `span` element should wrap the text `Total Carbohydrate`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Total Carbohydrate');
+```
+
+The `span` element around `Total Carbohydrate` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+A `span` element should wrap the text `13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
+```
+
+The `span` element around `13%` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+Your second `span` element should wrap the text `13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
new file mode 100644
index 0000000000..15003310e7
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
@@ -0,0 +1,183 @@
+---
+id: 615f7fa959ab75948f96a0d6
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Below your last `p` element, add another `p` element with the text `Dietary Fiber 4g`. Give the `p` element the `class` necessary to indent it and remove the dividing border. Then create a divider below that `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Dietary Fiber 4g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/));
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
new file mode 100644
index 0000000000..b47f77498e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
@@ -0,0 +1,185 @@
+---
+id: 615f808d85793195b0f53be9
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Create another `p` element after your last `.divider`, and give it the text `Total Sugars 12g`. Assign that `p` element the `class` values necessary to indent it and remove the bottom border. Then create another `.divider` below your new `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Total Sugars 12g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/));
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
new file mode 100644
index 0000000000..d7b411b930
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
@@ -0,0 +1,169 @@
+---
+id: 615f829d07b18f96f6f6684b
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+The advantage to creating these dividers is that you can apply specific classes to style them individually. Add `double-indent` to the `class` for your last `.divider`.
+
+# --hints--
+
+Your last `.divider` element should have `double-indent` added to the `class`. Do not remove the existing value.
+
+```js
+const last = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(last?.classList?.contains('double-indent'));
+assert(last?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      --fcc-editable-region-- 
+      <div class="divider"></div>
+      --fcc-editable-region-- 
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
new file mode 100644
index 0000000000..1c85a5b53a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
@@ -0,0 +1,182 @@
+---
+id: 615f83ef928ec9982b785b6a
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Create a `.double-indent` selector and give it a left margin of `2em`.
+
+# --hints--
+
+You should have a new `.double-indent` selector.
+
+```js
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.double-indent'));
+```
+
+Your `.double-indent` selector should have a `margin-left` property set to `2em`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.double-indent')?.marginLeft, '2em');
+```
+
+Your `.double-indent` selector should only set the `margin-left` property, not other margin properties.
+
+```js
+const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.double-indent') ?? {};
+assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region-- 
+
+--fcc-editable-region-- 
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
new file mode 100644
index 0000000000..a39f4b879c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
@@ -0,0 +1,211 @@
+---
+id: 615f84f246e8ba98e3cd97be
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Below your `.double-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. Your new `p` element should also be double indented, and have no bottom border. Use a `span` to make the `20%` bold and right aligned.
+
+Then create another divider after that `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Includes 10g Added Sugars 20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/));
+```
+
+Your new `p` element should have the `class` attribute set to `double-indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('double-indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.localName === 'span');
+```
+
+Your `span` element should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.classList?.contains('bold'));
+```
+
+Your `span` element should wrap the text `20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type span')?.innerText === '20%');
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
new file mode 100644
index 0000000000..d4af4e85bd
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
@@ -0,0 +1,208 @@
+---
+id: 615f887466db4ba14b5342cc
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+After your last divider, create another `p` element with the text `Protein 3g`. Use the necessary classes to remove the bottom border, and a `span` to make the `Protein` bold. Then wrap the text `Protein 3g` including the new `span` element, in a new `span` element.
+
+Following this element, create a large divider.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Protein 3g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/));
+```
+
+Your new `p` element should have the `class` attribute set to `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+You should have a `span` element with the class `bold` around the text `Protein`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type span.bold')?.innerText === 'Protein');
+```
+
+You should have a `span` element around the text `Protein 3g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text > p:last-of-type > span > span.bold')?.innerText === 'Protein');
+assert(document.querySelector('.daily-value.small-text > p:last-of-type > span')?.innerText === 'Protein 3g');
+```
+
+Your new `div` should have the `class` attribute set to `divider large`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
new file mode 100644
index 0000000000..0477e6cf30
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
@@ -0,0 +1,195 @@
+---
+id: 615f89e055040ba294719d2f
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`.
+
+The `p` element contains only text, you can wrap the percentage in a `span` element so that it is considered a separate entity from the rest of the text, and it's moved to the right.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Vitamin D 2mcg 10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+Your `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
new file mode 100644
index 0000000000..1f4bf4fb22
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
@@ -0,0 +1,219 @@
+---
+id: 615f8bfe0f30a1a3c340356b
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Create another `p` element, give it the text `Calcium 260mg 20%`. Align `20%` to the right. Below that, create a `p` element with the text `Iron 8mg 45%`, aligning the `45%` to the right.
+
+# --hints--
+
+You should create two new `p` elements at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+```
+
+Your first new `p` element should have the text `Calcium 260mg 20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/));
+```
+
+Your first new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span');
+```
+
+Your first `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold'));
+```
+
+Your first `span` element should wrap the text `20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%');
+```
+
+Your second new `p` element should have the text `Iron 8mg 45%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/));
+```
+
+Your second new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.localName === 'span');
+```
+
+Your second `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
new file mode 100644
index 0000000000..9734aee18e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
@@ -0,0 +1,202 @@
+---
+id: 615f8f1223601fa546e93f31
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Create the final `p` element for your `.daily-value` section. Give it the text `Potassium 235mg 6%`. Align the `6%` text to the right, and remove the bottom border of the `p` element.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the `class` attribute set to `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have the text `Potassium 235mg 6%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+Your `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+    </div>
+    --fcc-editable-region--      
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
new file mode 100644
index 0000000000..c098518ca5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
@@ -0,0 +1,211 @@
+---
+id: 615f905fbd1017a65ca224eb
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Add a medium divider after your `.daily-value` element. Below that new divider, create a `p` element with the `class` attribute set to `note`.
+
+Give the `p` element the following text:
+
+```markup
+* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
+```
+
+# --hints--
+
+You should create a new `div` after your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div');
+```
+
+Your new `div` should have the `class` set to `divider medium`.
+
+```js
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('medium'));
+```
+
+You should create a `p` element after your new `div` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the `class` set to `note`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note'));
+```
+
+Your new `p` element should have the provided text.
+
+```js
+assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    --fcc-editable-region--      
+
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
new file mode 100644
index 0000000000..0dd1ac2ee2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
@@ -0,0 +1,196 @@
+---
+id: 615f94786869e1a7fec54375
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Create a `.note` selector, and set the size of the font to `0.6rem`. Also set the top and bottom margins to `5px`, removing the left and right margins.
+
+# --hints--
+
+You should have a new `.note` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note'));
+```
+
+Your `.note` selector should have a `font-size` property set to `0.6rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem');
+```
+
+Your `.note` selector should have a `margin` property set to `5px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
new file mode 100644
index 0000000000..845b9f2d7f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
@@ -0,0 +1,365 @@
+---
+id: 615f951dff9317a900ef683f
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Give the `.note` selector a left and right padding of `8px`, removing the top and bottom padding. Also set the `text-indent` property to `-8px`.
+
+With these last changes, your nutrition label is complete!
+
+# --hints--
+
+Your `.note` selector should have a `padding` property set to `0 8px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px');
+```
+
+Your `.note` selector should have a `text-indent` property set to `-8px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+  padding: 0 8px;
+  text-indent: -8px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
new file mode 100644
index 0000000000..93d1888599
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
@@ -0,0 +1,153 @@
+---
+id: 635bde33c91c80540eae239b
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+The text `% Daily Value *` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it.
+
+# --hints--
+
+You should have a `.right` selector.
+
+```js
+const hasRight = new __helpers.CSSHelp(document).getStyle('.right');
+assert(hasRight);
+
+```
+
+The `.right` selector should have the `justify-content` property set to `flex-end`.
+
+```js
+const rightJustifyContent = new __helpers.CSSHelp(document).getStyle('.right')?.getPropertyValue('justify-content');
+assert(rightJustifyContent === 'flex-end');
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
new file mode 100644
index 0000000000..e6f009b7e0
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
@@ -0,0 +1,117 @@
+---
+id: 6395d33ab5d91bf317107c48
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Create a `.calories-info h2` selector and remove all margins.
+
+# --hints--
+
+Create a `.calories-info h2` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2'));
+```
+
+Your `.calories-info h2` selector should have a `margin` set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
new file mode 100644
index 0000000000..6a2dbb37aa
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
@@ -0,0 +1,135 @@
+---
+id: 6396e33fe478dd264ebbf278
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Create a new `.calories-info` selector and give it a `display` property set to `flex`. Also give it a `justify-content` property set to `space-between` and `align-items` property set to `flex-end`.
+
+# --hints--
+
+You should create a `.calories-info` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info'));
+```
+
+Your `.calories-info` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.display === 'flex');
+```
+
+Your `.calories-info` selector should have a `justify-content` property set to `space-between`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.justifyContent === 'space-between');
+```
+
+Your `.calories-info` selector should have a `align-items` property set to `flex-end`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.alignItems === 'flex-end');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.calories-info h2 {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
new file mode 100644
index 0000000000..170468d17b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
@@ -0,0 +1,147 @@
+---
+id: 667d1bb875f5961913176069
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Notice how the text `8g` appears centered in the preview. Nest the `span` element containing the text `Total Fat` along with the text `8g`, in an additional `span` element for alignment.
+
+# --hints--
+
+You should have a `span` element around the code `<span class="bold">Total Fat</span> 8g`.
+
+```js
+assert.match(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerHTML, /^<span class=("|')bold\1>Total Fat<\/span> 8g\s?$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+--fcc-editable-region--
+      <p><span class="bold">Total Fat</span> 8g <span class="bold">10%</span></p>
+--fcc-editable-region--
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
new file mode 100644
index 0000000000..3a5d413485
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
@@ -0,0 +1,58 @@
+---
+id: 612e78af05201622d4bab8aa
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Create a `div` element within your `body` element with the `id` set to `piano`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+const div = document.querySelector('div');
+assert.exists(div);
+```
+
+Your `div` should be within your `body` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.parentElement?.localName === 'body');
+```
+
+Your `div` should have the `id` set to `piano`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.getAttribute('id') === 'piano');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
new file mode 100644
index 0000000000..e5c80cf6b4
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
@@ -0,0 +1,60 @@
+---
+id: 612e7d1c29fb872d6384379c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Nest a second `div` within your existing `div`, and set the `class` to be `keys`.
+
+# --hints--
+
+You should create a second `div` element.
+
+```js
+const divDiv = document.querySelectorAll('div');
+assert(divDiv?.length === 2);
+```
+
+Your new `div` element should be within your existing `div` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.length === 1);
+assert(div?.children?.[0]?.localName === 'div');
+```
+
+Your new `div` element should have the `class` set to `keys`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.[0]?.className === 'keys');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="piano">
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
new file mode 100644
index 0000000000..bfbbe7748d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
@@ -0,0 +1,60 @@
+---
+id: 612e804c54d5e7308d7ebe56
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `.keys` element, add seven `div` elements, each with the class `key`.
+
+# --hints--
+
+You should create seven new `div` elements.
+
+```js
+const divDivDiv = document.querySelectorAll('div');
+assert(divDivDiv?.length === 9);
+```
+
+Your seven new `div` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].length === 7);
+assert([...keys?.children].every(child => child?.tagName === 'DIV'));
+```
+
+Your seven new `div` elements should all have the `class` set to `key`.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].every(child => child?.classList?.contains('key')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys"></div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
new file mode 100644
index 0000000000..93e60db476
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
@@ -0,0 +1,95 @@
+---
+id: 612e813b3ba67633222cbe54
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Remember, a `class` attribute can hold multiple values. To differentiate between your white and black keys, add a second `class` value of `black--key` to your second, third, fifth, sixth, and seventh `.key` elements.
+
+# --hints--
+
+Your second `.key` element should also have a `class` of `black--key`.
+
+```js
+const key = document.querySelectorAll('.key')?.[1];
+assert(key?.className?.includes('black--key'));
+```
+
+Your third `.key` should have `black--key` in the `class`.
+
+```js
+const third = document.querySelectorAll('.key')?.[2];
+assert(third?.classList?.contains('black--key'));
+```
+
+Your fifth `.key` should have `black--key` in the `class`.
+
+```js
+const fifth = document.querySelectorAll('.key')?.[4];
+assert(fifth?.classList?.contains('black--key'));
+```
+
+Your sixth `.key` should have `black--key` in the `class`.
+
+```js
+const sixth = document.querySelectorAll('.key')?.[5];
+assert(sixth?.classList?.contains('black--key'));
+```
+
+Your seventh `.key` should have `black--key` in the `class`.
+
+```js
+const seventh = document.querySelectorAll('.key')?.[6];
+assert(seventh?.classList?.contains('black--key'));
+```
+
+You should have five `.black--key` elements.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 5);
+```
+
+You should have seven `.key` elements.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 7);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
new file mode 100644
index 0000000000..d42477e30c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
@@ -0,0 +1,74 @@
+---
+id: 612e8279827a28352ce83a72
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Now, copy the set of seven `.key` elements and paste two additional sets into the `.keys` div.
+
+# --hints--
+
+You should have 21 `.key` elements.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 21);
+```
+
+You should have 15 `.black--key` elements.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 15);
+```
+
+All `.key` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.key')?.length === 21);
+```
+
+All `.black--key` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.black--key')?.length === 15);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
new file mode 100644
index 0000000000..1f4190864e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
@@ -0,0 +1,107 @@
+---
+id: 612e83ec2eca1e370f830511
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Add a `link` element inside your `head` element. Set its `rel` attribute to `stylesheet` and its `href` attribute to `styles.css`.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.isNotNull(document.querySelector('link'));
+```
+
+You should not change your existing `head` tags. Make sure you did not delete the closing tag.
+
+```js
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
+```
+
+You should have one `link` element.
+
+```js
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
+```
+
+Your `link` element should be inside your `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    --fcc-editable-region--
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    --fcc-editable-region--
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e89562043183c86df287c.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
new file mode 100644
index 0000000000..a5dad2247f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
@@ -0,0 +1,77 @@
+---
+id: 612e89562043183c86df287c
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Browsers often apply default margin and padding values to specific elements. To make sure your piano layout displays correctly, you need to reset the box model.
+
+Add an `html` rule selector to your CSS file, and set the `box-sizing` property to `border-box`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have the `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
new file mode 100644
index 0000000000..cd1ca1882c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
@@ -0,0 +1,83 @@
+---
+id: 612e89d254fe5d3df7d6693d
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you've reset the `html` box model, you need to apply this to the elements inside it as well. To do this, set the `box-sizing` property to `inherit`, which ensures that the targeted elements adopt the same value as their parent element.
+
+You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the `::before` and `::after` pseudo-elements.
+
+The `::before` selector creates a pseudo-element which is the first child of the selected element, while the `::after` selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project.
+
+For now, create a CSS selector to target all elements using `*`, and include the pseudo-elements `::before` and `::after`. Set the `box-sizing` property to `inherit`.
+
+# --hints--
+
+You should have a `*, ::before, ::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
+```
+
+Your `*, ::before, ::after` selector should have the `box-sizing` property set to `inherit`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+html {
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
new file mode 100644
index 0000000000..46f69e2b59
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
@@ -0,0 +1,95 @@
+---
+id: 612e8eebe3a6dc3fcc33a66f
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Now target your `#piano` element with an `id` selector. Set its `background-color` property to `#00471b`, the `width` property to `992px` and the `height` property to `290px`.
+
+# --hints--
+
+You should have a `#piano` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano'));
+```
+
+Your `#piano` selector should have the `background-color` property set to `#00471b`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)');
+```
+
+Your `#piano` selector should have a `width` property set to `992px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px');
+```
+
+Your `#piano` selector should have the `height` set to `290px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
new file mode 100644
index 0000000000..85c97c2924
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
@@ -0,0 +1,81 @@
+---
+id: 612e95ef2e4bdf41f69067f9
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Set the `margin` of the `#piano` to `80px auto`.
+
+# --hints--
+
+Your `#piano` selector should have the `margin` property set to `80px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
new file mode 100644
index 0000000000..26f7c9217a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
@@ -0,0 +1,102 @@
+---
+id: 612e96fc87fe8e44f69f7ec5
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Time to style the keys. Below the `#piano` rule, target the `.keys` element with a `class` selector. Give the new rule a `background-color` property of `#040404`, a `width` property of `949px` and a `height` property of `180px`.
+
+# --hints--
+
+You should have a `.keys` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys'));
+```
+
+Your `.keys` selector should have a `background-color` property set to `#040404`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
+```
+
+Your `.keys` selector should have the `width` property set to `949px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
+```
+
+Your `.keys` selector should have a `height` property set to `180px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
new file mode 100644
index 0000000000..d877f447ad
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
@@ -0,0 +1,88 @@
+---
+id: 612e98f3245c98475e49cfc6
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Give the `.keys` a `padding-left` of `2px`.
+
+# --hints--
+
+Your `.keys` selector should have a `padding-left` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
new file mode 100644
index 0000000000..01ea9f27a9
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
@@ -0,0 +1,89 @@
+---
+id: 612e9a21381a1949327512e6
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Move the keys into position by adjusting the `#piano` selector. Set the `padding` property to `90px 20px 0 20px`.
+
+# --hints--
+
+Your `#piano` selector should have the `padding` property set to `90px 20px 0 20px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
new file mode 100644
index 0000000000..0f8ca9d6ba
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
@@ -0,0 +1,117 @@
+---
+id: 612e9d142affc44a453655db
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Time to style the keys themselves. Create a `class` selector for the `.key` elements. Set the `background-color` set to the value `#ffffff`, the `position` property to `relative`, the `width` property to `41px`, and the `height` property to `175px`.
+
+# --hints--
+
+You should have a `.key` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key'));
+```
+
+Your `.key` selector should have a `background-color` property set to `#ffffff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)');
+```
+
+Your `.key` selector should have the `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative');
+```
+
+Your `.key` selector should have a `width` property set to `41px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px');
+```
+
+Your `.key` selector should have a `height` property set to `175px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
new file mode 100644
index 0000000000..28c5419dac
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
@@ -0,0 +1,103 @@
+---
+id: 612e9f1e7e5ccd4fa9ada0be
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Give the `.key` a `margin` of `2px` and a `float` property set to `left`.
+
+# --hints--
+
+Your `.key` selector should have a `margin` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
+```
+
+Your `.key` selector should have a `float` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
new file mode 100644
index 0000000000..f0e8088dd8
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
@@ -0,0 +1,119 @@
+---
+id: 612ea4c4993aba52ab4aa32e
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now it's time to use the pseudo-selectors you set up earlier. To create the black keys, add a new `.key.black--key::after` selector. This targets elements with both `key` and `black--key` classes and selects the pseudo-element created after these elements in the HTML.
+
+In the new selector, set the `background-color` to `#1d1e22`. Also set the `content` property to `""`. This will make the pseudo-elements empty.
+
+The `content` property is used to set or override the content of an element. By default, the pseudo-elements created by the `::before` and `::after` selectors are empty, which means they are not rendered on the page. By setting the `content` property to an empty string `""`, you ensure that the pseudo-elements are rendered, while still appearing empty.
+
+If you would like to experiment, try removing the `background-color` property and setting different values for the `content` property, such as `"♥"`. Remember to undo these changes when you are done so the tests pass.
+
+# --hints--
+
+You should have a `.key.black--key::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
+```
+
+Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
+```
+
+Your `.key.black--key::after` selector should have a `content` property set to `""`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
new file mode 100644
index 0000000000..a7340d458d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
@@ -0,0 +1,110 @@
+---
+id: 612ea97df5742154772f312e
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Give the `.key.black--key::after` a `position` property set to `absolute` and a `left` property set to `-18px`.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute');
+```
+
+Your `.key.black--key::after` selector should have a `left` property set to `-18px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
new file mode 100644
index 0000000000..72dbf9cc19
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
@@ -0,0 +1,112 @@
+---
+id: 612ead8788d28655ef8db056
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+For the `.key.black--key::after`, set the `width` to `32px` and the `height` to `100px`.
+
+# --hints--
+
+Your `.key.black--key::after` should have a `width` property set to `32px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px');
+```
+
+Your `.key.black--key::after` should have a `height` property set to `100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
new file mode 100644
index 0000000000..37d6779238
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
@@ -0,0 +1,144 @@
+---
+id: 612eaf56b7ba3257fdbfb0db
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The piano needs the freeCodeCamp logo to make it official.
+
+Add an `img` element before your `.keys` element. Give the `img` a `class` of `logo`, and set the `src` to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Give it an `alt` text of `freeCodeCamp Logo`.
+
+# --hints--
+
+You should add a new `img` element.
+
+```js
+assert(document.querySelectorAll('img')?.length === 1);
+```
+
+Your `img` element should come before your first `.keys` element.
+
+```js
+const img = document.querySelector('img');
+assert(img?.nextElementSibling?.className === 'keys');
+assert(img?.previousElementSibling === null);
+```
+
+Your `img` element should have a `class` set to `logo`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.className === 'logo');
+```
+
+Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
+```
+
+Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo');
+```
+
+Remember that casing and spelling matter.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+    --fcc-editable-region--
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
new file mode 100644
index 0000000000..2e461ef48a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
@@ -0,0 +1,129 @@
+---
+id: 612eb4893b63c75bb9251ddf
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Start styling the logo by creating a `.logo` selector. Set the `width` to `200px`, a `position` of `absolute` and a `top` set to `23px`.
+
+# --hints--
+
+You should have a `.logo` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo'));
+```
+
+Your `.logo` selector should have a `width` property set to `200px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px');
+```
+
+Your `.logo` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute');
+```
+
+Your `.logo` selector should have a `top` property set to `23px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
new file mode 100644
index 0000000000..dc900814fd
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
@@ -0,0 +1,115 @@
+---
+id: 612eb75153591b5e3b1ab65e
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `img` element needs its parent to have a `position` set as a point of reference. Set the `position` of the `#piano` selector to `relative`.
+
+# --hints--
+
+Your `#piano` selector should have a `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
new file mode 100644
index 0000000000..62dbbd5686
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
@@ -0,0 +1,116 @@
+---
+id: 612eb7ca8c275d5f89c73333
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+To soften the sharp edges of the piano and its keys, start by giving the `#piano` a `border-radius` of `10px`.
+
+# --hints--
+
+Your `#piano` selector should have a `border-radius` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
new file mode 100644
index 0000000000..777b6e023b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
@@ -0,0 +1,117 @@
+---
+id: 612eb8e984cd73677a92b7e9
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Give the `.key` selector a `border-radius` value of `0 0 3px 3px`.
+
+# --hints--
+
+Your `.key` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+--fcc-editable-region--
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
new file mode 100644
index 0000000000..80785c1dbf
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
@@ -0,0 +1,118 @@
+---
+id: 612eb934f64a4d6890a45518
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Give the `.key.black--key::after` selector a `border-radius` of `0 0 3px 3px` to match the keys.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+--fcc-editable-region--
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
new file mode 100644
index 0000000000..a0c170c27e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
@@ -0,0 +1,139 @@
+---
+id: 612ebcba99bfa46a15370b11
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+The `@media` at-rule, also known as a media query, is used to conditionally apply CSS. Media queries are commonly used to apply CSS based on the viewport width using the `max-width` and `min-width` properties.
+
+In the below example the padding is applied to the `.card` class when the viewport is `960px` wide and below.
+
+```css
+@media (max-width: 960px) {
+  .card {
+    padding: 2rem;
+  }
+}
+```
+
+Add a media query that will be applied when the viewport is `768px` wide and below.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
+```
+
+Your `@media` query should have a `max-width` of `768px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
new file mode 100644
index 0000000000..3291a4dac2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
@@ -0,0 +1,133 @@
+---
+id: 612ebe7fe6d07e6b76d1cae2
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Add a new `#piano` selector within your `@media` query, and set the `width` to `358px`.
+
+# --hints--
+
+Your `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `358px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '358px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
new file mode 100644
index 0000000000..5cfe1e3cac
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
@@ -0,0 +1,136 @@
+---
+id: 612ebedec97e096c8bf64999
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Within the `@media` query, add a `.keys` selector and set the `width` to `318px`.
+
+# --hints--
+
+
+Your `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `318px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '318px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
new file mode 100644
index 0000000000..0dbf2d1e3c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
@@ -0,0 +1,139 @@
+---
+id: 612ebf9a210f2b6d77001e68
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Now add a `.logo` selector to the `@media` query, and set the `width` property to `150px`.
+
+# --hints--
+
+Your `@media` rule should have a `.logo` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo);
+```
+
+Your new `.logo` selector should have a `width` of `150px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo?.style.width === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
new file mode 100644
index 0000000000..a32cab125e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
@@ -0,0 +1,133 @@
+---
+id: 612ec0490ae8626e9adf82e4
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+You may have noticed that the keys collapse when the browser window is smaller than `768px`. To address this issue, set `overflow` to `hidden` in the first `.keys` selector. This property will hide any elements that are pushed outside the defined `width` of `.keys`, preventing unwanted layout changes.
+
+# --hints--
+
+Your original `.keys` selector should have the `overflow` property set to `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+--fcc-editable-region--
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
new file mode 100644
index 0000000000..097b595db2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
@@ -0,0 +1,154 @@
+---
+id: 612ec19d5268da7074941f84
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Logical operators can be used to construct more complex media queries. The `and` logical operator is used to query two media conditions.
+
+For example, a media query that targets a display width between 500px and 1000px would be:
+
+```css
+@media (min-width: 500px) and (max-width: 1000px){
+
+}
+```
+
+Add another `@media` rule to apply if the browser window is wider than `769px` but smaller than `1199px`.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
+```
+
+Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`.
+
+```js
+const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText;
+assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
new file mode 100644
index 0000000000..de83d05ac4
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
@@ -0,0 +1,288 @@
+---
+id: 612ec29c84b9a6718b1f5cec
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+For the new `@media` rule, set the `width` of the `#piano` to `675px` and the `width` of the `.keys` to `633px`.
+
+With that, your piano is complete!
+
+# --hints--
+
+Your second `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `675px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '675px');
+```
+
+Your second `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `633px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '633px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+@media (max-width: 1199px) and (min-width: 769px) {
+
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+@media (max-width: 1199px) and (min-width: 769px) {
+  #piano {
+    width: 675px;
+  }
+
+  .keys {
+    width: 633px;
+  }
+}
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
new file mode 100644
index 0000000000..9d986165f5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
@@ -0,0 +1,36 @@
+---
+id: 66fbcdfed6848e48947dbbc9
+title: Step 1
+challengeType: 1
+dashedName: step-1
+---
+
+# --description--
+
+In this workshop, you will create a recipe tracker using JavaScript objects.
+
+Start by creating an empty array named `recipes`. This is the array you'll push the recipe objects into later.
+
+# --hints--
+
+You should create an array named `recipes`.
+
+```js
+assert.isArray(recipes)
+```
+
+Your `recipes` array should be empty.
+
+```js
+assert.isEmpty(recipes)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
new file mode 100644
index 0000000000..0186623c8b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
@@ -0,0 +1,81 @@
+---
+id: 66fbcf750a62784cf11f562d
+title: Step 2
+challengeType: 1
+dashedName: step-2
+---
+
+# --description--
+
+Create an object named `recipe1`. Inside the `recipe1` object, create a `name` property with the value `"Spaghetti Carbonara"`.
+
+Also inside the `recipe1` object, create an `ingredients` property with an array as the value. The array should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` inside it.
+
+Create another `ratings` property with array value. The array should have `4`, `5`, `4`, and `5` inside it.
+
+# --hints--
+
+You should create an object named `recipe1`.
+
+```js
+assert.isObject(recipe1)
+```
+
+Your `recipe1` object should have a `name` property.
+
+```js
+assert.property(recipe1, 'name');
+```
+
+Your `name` property should be set to `Spaghetti Carbonara`.
+
+```js
+assert.equal(recipe1.name, 'Spaghetti Carbonara');
+```
+
+Your `recipe1` object should have an `ingredients` property.
+
+```js
+assert.property(recipe1, 'ingredients');
+```
+
+Your `ingredients` property should have an array value.
+
+```js
+assert.isArray(recipe1.ingredients)
+```
+
+The array value of your `ingredients` property should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` in it.
+
+```js
+assert.deepEqual(recipe1.ingredients, ["spaghetti", "Parmesan cheese", "pancetta", "black pepper"]);
+```
+
+Your `recipe1` object should have a `ratings` property.
+
+```js
+assert.property(recipe1, "ratings");
+```
+
+Your `ratings` property should have an array value.
+
+```js
+assert.isArray(recipe1.ratings)
+```
+
+The array value of your `ratings` property should have `4`, `5`, `4`, and `5` in it.
+
+```js
+assert.deepEqual(recipe1.ratings, [4, 5, 4, 5]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
new file mode 100644
index 0000000000..77dac4da29
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
@@ -0,0 +1,152 @@
+---
+id: 66fbcf750a62784cf11f562e
+title: Step 4
+challengeType: 1
+dashedName: step-4
+---
+
+# --description--
+
+Create another `recipe2` object with the following properties and values:
+
+| Key                | Value                                                                   |
+| ------------------ | ----------------------------------------------------------------------- |
+| `name`             | `Chicken Curry`                                                         |
+| `ingredients`      | `["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]` |
+| `ratings`          | `[4, 5, 5, 5]`                                                          |
+| `cookingTime`      | `42`                                                                    |
+| `totalIngredients` | `null`                                                                  |
+| `difficultyLevel`  | `''`                                                                    |
+| `averageRating`    | `null`                                                                  |
+
+# --hints--
+
+You should create an object named `recipe2`.
+
+```js
+assert.isObject(recipe2)
+```
+
+Your `recipe2` object should have a `name` property.
+
+```js
+assert.property(recipe2, "name");
+```
+
+Your `name` property should be set to `Chicken Curry`.
+
+```js
+assert.equal(recipe2.name, "Chicken Curry");
+```
+
+Your `recipe2` object should have an `ingredients` property.
+
+```js
+assert.property(recipe2, "ingredients");
+```
+
+Your `ingredients` property should have an array value.
+
+```js
+assert.isArray(recipe2.ingredients)
+```
+
+The array value of your `ingredients` property should have `chicken breast`, `coconut milk`, `curry powder`, `onion` and `garlic` in it.
+
+```js
+assert.deepEqual(recipe2.ingredients, ["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]);
+```
+
+Your `recipe2` object should have a `ratings` property.
+
+```js
+assert.property(recipe2, "ratings");
+```
+
+Your `ratings` property should have an array value.
+
+```js
+assert.isArray(recipe2.ratings)
+```
+
+The array value of your `ratings` property should have `4`, `5`, `5`, and `5` in it.
+
+```js
+assert.deepEqual(recipe2.ratings, [4, 5, 5, 5]);
+```
+
+Your `recipe2` object should have a `cookingTime` property.
+
+```js
+assert.property(recipe2, "cookingTime");
+```
+
+Your `cookingTime` property value should be a number.
+
+```js
+assert.isNumber(recipe2.cookingTime);
+```
+
+Your `cookingTime` property should be set to `42`.
+
+```js
+assert.equal(recipe2.cookingTime, 42);
+```
+
+Your `recipe2` object should have a `totalIngredients` property.
+
+```js
+assert.property(recipe2, "totalIngredients");
+```
+
+Your `totalIngredients` property should be set to `null`.
+
+```js
+assert.isNull(recipe2.totalIngredients);
+```
+
+Your `recipe2` object should have a `difficultyLevel` property.
+
+```js
+assert.property(recipe2, "difficultyLevel");
+```
+
+Your `difficultyLevel` property should be set to an empty string.
+
+```js
+assert.deepEqual(recipe2.difficultyLevel, "");
+```
+
+Your `recipe2` object should have an `averageRating` property.
+
+```js
+assert.property(recipe2, "averageRating");
+```
+
+Your `averageRating` property should be set to `null`.
+
+```js
+assert.isNull(recipe2.averageRating);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
new file mode 100644
index 0000000000..a010c6c140
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
@@ -0,0 +1,98 @@
+---
+id: 66fbcf750a62784cf11f5630
+title: Step 6
+challengeType: 1
+dashedName: step-6
+---
+
+# --description--
+
+A third `recipe3` object has been filled in for you. It has the same properties as `recipe1` and `recipe2`.
+
+You should now push the three objects into the `recipes` array. To do thus, you can use the `push()` method.
+
+Use the `push()` method to push all the recipe objects into the `recipes` array. Make sure to push `recipe1`, `recipe2`, and `recipe3` in that order.
+
+# --hints--
+
+You should remove `recipe1Name` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe1Name\s*=\s*recipe1\.name;?\s*console\.log\(recipe1Name\);?/)
+```
+
+You should remove `recipe2Name` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe2Name\s*=\s*recipe2\.name;?\s*console\.log\(recipe2Name\);?/)
+```
+
+You should remove `recipe1CookingTime` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe1CookingTime\s*=\s*recipe1\.cookingTime;?\s*console\.log\(recipe1CookingTime\);?/)
+```
+
+You should remove `recipe2CookingTime` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe2CookingTime\s*=\s*recipe2\.cookingTime;?\s*console\.log\(recipe2CookingTime\);?/)
+```
+
+You should push all the recipes objects into the `recipes` array. Make sure to push them in the order they are declared.
+
+```js
+assert.deepEqual(recipes, [recipe1, recipe2, recipe3]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+const recipe1Name = recipe1.name;
+console.log(recipe1Name);
+
+const recipe2Name = recipe2.name;
+console.log(recipe2Name);
+
+const recipe1CookingTime = recipe1.cookingTime;
+console.log(recipe1CookingTime);
+
+const recipe2CookingTime = recipe2.cookingTime;
+console.log(recipe2CookingTime);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
new file mode 100644
index 0000000000..292feedbae
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
@@ -0,0 +1,104 @@
+---
+id: 66fbcf750a62784cf11f5631
+title: Step 7
+challengeType: 1
+dashedName: step-7
+---
+
+# --description--
+
+Now, you should work on calculating the `averageRating`, `totalIngredients`, and the `difficultyLevel` for each recipe in the `recipes` array.
+
+Start by creating a `getAverageRating` function that takes a `ratings` parameter. Inside the function, calculate the average rating using the items in the `ratings` property of each recipe.
+
+Your `getAverageRating` function must return a number.
+
+# --hints--
+
+You should create a `getAverageRating` function.
+
+```js
+assert.isFunction(getAverageRating)
+```
+
+Your `getAverageRating` function should have a `ratings` parameter.
+
+```js
+assert.match(getAverageRating.toString(), /ratings/);
+```
+
+Your `getAverageRating` function should return a number.
+
+```js
+assert.isNumber(getAverageRating(recipe1.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.00`.
+
+```js
+assert.isNumber(getAverageRating(recipe2.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.75`.
+
+```js
+assert.isNumber(getAverageRating(recipe2.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.50`.
+
+```js
+assert.isNumber(getAverageRating(recipe1.ratings))
+```
+
+Your `getAverageRating` function should return the correct rating.
+
+```js
+assert.equal(getAverageRating(recipe1.ratings), 4.50)
+assert.equal(getAverageRating(recipe2.ratings), 4.75)
+assert.equal(getAverageRating(recipe3.ratings), 4.00)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
new file mode 100644
index 0000000000..ace358ab7f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
@@ -0,0 +1,105 @@
+---
+id: 66fbcf750a62784cf11f5632
+title: Step 8
+challengeType: 1
+dashedName: step-8
+---
+
+# --description--
+
+Create a `getTotalIngredients` function that takes an `ingredients` parameter. This function should return the number of ingredients for each recipe by returning the length of the `ingredients` array.
+
+# --hints--
+
+You should create a `getTotalIngredients` function.
+
+```js
+assert.isFunction(getTotalIngredients)
+```
+
+You `getTotalIngredients` function should have an `ingredients` parameter.
+
+```js
+assert.match(getTotalIngredients.toString(), /ingredients/);
+```
+
+Your `getTotalIngredients` function should return a number.
+
+```js
+assert.isNumber(getTotalIngredients(recipe1.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `5`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe2.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `3`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe3.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `4`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe1.ingredients))
+```
+
+Your `getTotalIngredients` function should return the correct number of ingredients.
+
+```js
+assert.equal(getTotalIngredients(recipe1.ingredients), 4)
+assert.equal(getTotalIngredients(recipe2.ingredients), 5)
+assert.equal(getTotalIngredients(recipe3.ingredients), 3)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
new file mode 100644
index 0000000000..c686ff0e9a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
@@ -0,0 +1,106 @@
+---
+id: 66fbcf750a62784cf11f5633
+title: Step 9
+challengeType: 1
+dashedName: step-9
+---
+
+# --description--
+
+Create a `getDifficultyLevel` function that takes `cookingTime` as a parameter.
+
+If `cookingTime` is less than `30`, the function should return `"easy"`. If it is less than or equal to `60`, the function should return `"medium"`. Otherwise, the function should return `"hard"`.
+
+# --hints--
+
+You should create a `getDifficultyLevel` function.
+
+```js
+assert.isFunction(getDifficultyLevel)
+```
+
+You `getDifficultyLevel` function should have a `cookingTime` parameter.
+
+```js
+assert.match(getDifficultyLevel.toString(), /cookingTime/);
+```
+
+Your `getDifficultyLevel` function should return `"easy"` when the `cookingTime` is less than or equal to `30`.
+
+```js
+assert.strictEqual(getDifficultyLevel(10), "easy")
+assert.strictEqual(getDifficultyLevel(20), "easy")
+assert.strictEqual(getDifficultyLevel(29), "easy")
+assert.strictEqual(getDifficultyLevel(30), "easy")
+```
+
+Your `getDifficultyLevel` function should return `"medium"` when the `cookingTime` is greater than `31` and less than `60`.
+
+```js
+assert.strictEqual(getDifficultyLevel(31), "medium")
+assert.strictEqual(getDifficultyLevel(40), "medium")
+assert.strictEqual(getDifficultyLevel(50), "medium")
+assert.strictEqual(getDifficultyLevel(60), "medium")
+```
+
+Your `getDifficultyLevel` function should return `"hard"` when the `cookingTime` is greater than `60`.
+
+```js
+assert.strictEqual(getDifficultyLevel(61), "hard")
+assert.strictEqual(getDifficultyLevel(65), "hard")
+assert.strictEqual(getDifficultyLevel(70), "hard")
+assert.strictEqual(getDifficultyLevel(75), "hard")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
new file mode 100644
index 0000000000..38ec100fd5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
@@ -0,0 +1,133 @@
+---
+id: 66fbcf750a62784cf11f5634
+title: Step 10
+challengeType: 1
+dashedName: step-10
+---
+
+# --description--
+
+It's time to test each of the functions. You can use any of the recipes for this, but let's start with `recipe1`.
+
+Create three new variables: `recipe1AverageRating`, `recipe1TotalIngredients`, and `recipe1DifficultyLevel`. Assign them the values by calling the corresponding function for each variable and passing in the appropriate `recipe1` property.
+
+Finally, log each variable to the console to see the results.
+
+# --hints--
+
+You should create a `recipe1AverageRating` variable.
+
+```js
+assert.isNotNull(recipe1AverageRating)
+```
+
+Your `recipe1AverageRating` variable should be set to `getAverageRating(recipe1.ratings)`.
+
+```js
+assert.equal(recipe1AverageRating, getAverageRating(recipe1.ratings));
+```
+
+You should log `recipe1AverageRating` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1AverageRating\);?/)
+```
+
+You should create a `recipe1TotalIngredients` variable.
+
+```js
+assert.isNotNull(recipe1TotalIngredients)
+```
+
+Your `recipe1TotalIngredients` variable should be set to `getTotalIngredients(recipe1.ingredients)`.
+
+```js
+assert.equal(recipe1TotalIngredients, getTotalIngredients(recipe1.ingredients));
+```
+
+You should log `recipe1TotalIngredients` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1TotalIngredients\);?/)
+```
+
+You should create a `recipe1DifficultyLevel` variable.
+
+```js
+assert.isNotNull(recipe1DifficultyLevel)
+```
+
+Your `recipe1DifficultyLevel` variable should be set to `getDifficultyLevel(recipe1.cookingTime)`.
+
+```js
+assert.equal(recipe1DifficultyLevel, getDifficultyLevel(recipe1.cookingTime));
+```
+
+You should log `recipe1DifficultyLevel` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1DifficultyLevel\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
new file mode 100644
index 0000000000..3a34c4658f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
@@ -0,0 +1,124 @@
+---
+id: 66fbcf750a62784cf11f5635
+title: Step 11
+challengeType: 1
+dashedName: step-11
+---
+
+# --description--
+
+You can now fill in each item of the `recipes` array with values for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties.
+
+To do this, access the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of each recipe object and assign them the results of the corresponding function calls with the appropriate arguments.
+
+For now, access the `averageRating`, `totalIngredients`, and `difficultyLevel` of `recipe1` and set them to the appropriate function calls and arguments.
+
+# --hints--
+
+You should access the `averageRating` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.averageRating/)
+```
+
+You should set the `averageRating` of `recipe1` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter.
+
+```js
+assert.match(code, /recipe1\.averageRating\s*=\s*getAverageRating\(recipe1\.ratings\);?/)
+```
+
+You should access the `totalIngredients` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.totalIngredients/)
+```
+
+You should set the `totalIngredients` of `recipe1` you accessed to the calling of `getTotalIngredients` with `recipe1.ingredients` as its parameter.
+
+```js
+assert.match(code, /recipe1\.totalIngredients\s*=\s*getTotalIngredients\(recipe1\.ingredients\);?/)
+```
+
+You should access the `difficultyLevel` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.difficultyLevel/)
+```
+
+You should set the `difficultyLevel` of `recipe1` you accessed to the calling of `getDifficultyLevel` with `recipe1.cookingTime` as its parameter.
+
+```js
+assert.match(code, /recipe1\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe1\.cookingTime\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
new file mode 100644
index 0000000000..bd9aceddf5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
@@ -0,0 +1,124 @@
+---
+id: 66fbcf750a62784cf11f5636
+title: Step 12
+challengeType: 1
+dashedName: step-12
+---
+
+# --description--
+
+Repeat the process for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe2`.
+
+# --hints--
+
+You should access the `averageRating` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.averageRating/)
+```
+
+You should set the `averageRating` of `recipe2` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter.
+
+```js
+assert.match(code, /recipe2\.averageRating\s*=\s*getAverageRating\(recipe2\.ratings\);?/)
+```
+
+You should access the `totalIngredients` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.totalIngredients/)
+```
+
+You should set the `totalIngredients` of `recipe2` you accessed to the calling of `getTotalIngredients` with `recipe2.ingredients` as its parameter.
+
+```js
+assert.match(code, /recipe2\.totalIngredients\s*=\s*getTotalIngredients\(recipe2\.ingredients\);?/)
+```
+
+You should access the `difficultyLevel` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.difficultyLevel/)
+```
+
+You should set the `difficultyLevel` of `recipe2` you accessed to the calling of `getDifficultyLevel` with `recipe2.cookingTime` as its parameter.
+
+```js
+assert.match(code, /recipe2\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe2\.cookingTime\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
new file mode 100644
index 0000000000..032cb8cd78
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
@@ -0,0 +1,186 @@
+---
+id: 66fbcf750a62784cf11f5637
+title: Step 13
+challengeType: 1
+dashedName: step-13
+---
+
+# --description--
+
+The `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe3` have been filled in for you.
+
+Now, log the `recipes` array to the console to see all its items filled with the updated values.
+
+With that, your recipes tracker project is complete.
+
+# --hints--
+
+You should log the `recipes` array to the console.
+
+```js
+assert.match(code, /console\.log\(recipes\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+recipe2.averageRating = getAverageRating(recipe2.ratings);
+recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients);
+recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime);
+
+recipe3.averageRating = getAverageRating(recipe3.ratings);
+recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients)
+recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime)
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return (total / ratings.length).toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(`Recipe 1 Average Rating ${recipe1AverageRating}`);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(`Recipe 1 Total Ingredients: ${recipe1TotalIngredients}`);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(`Recipe 1 Difficulty: ${recipe1DifficultyLevel}`);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+recipe2.averageRating = getAverageRating(recipe2.ratings);
+recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients);
+recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime);
+
+recipe3.averageRating = getAverageRating(recipe3.ratings);
+recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients)
+recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime)
+
+console.log(recipes);
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
new file mode 100644
index 0000000000..193d3d702f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
@@ -0,0 +1,86 @@
+---
+id: 66ff02792b3042a2b811f475
+title: Step 3
+challengeType: 1
+dashedName: step-3
+---
+
+# --description--
+
+Add the following properties to the `recipe1` object:
+
+| Key                | Value  |
+| ------------------ | ------ |
+| `cookingTime`      | `22`   |
+| `totalIngredients` | `null` |
+| `difficultyLevel`  | `""`   |
+| `averageRating`    | `null` |
+
+The properties with `null` and empty string values will be updated later after you calculate them.
+
+# --hints--
+
+Your `recipe1` object should have a `cookingTime` property.
+
+```js
+assert.property(recipe1, "cookingTime");
+```
+
+Your `cookingTime` property should be set to `22`.
+
+```js
+assert.equal(recipe1.cookingTime, 22);
+```
+
+Your `recipe1` object should have a `totalIngredients` property.
+
+```js
+assert.property(recipe1, "totalIngredients");
+```
+
+Your `totalIngredients` property should be set to `null`.
+
+```js
+assert.isNull(recipe1.totalIngredients);
+```
+
+Your `recipe1` object should have a `difficultyLevel` property.
+
+```js
+assert.property(recipe1, "difficultyLevel");
+```
+
+Your `difficultyLevel` property should be set to an empty string.
+
+```js
+assert.deepEqual(recipe1.difficultyLevel, "");
+```
+
+Your `recipe1` object should have a `averageRating` property.
+
+```js
+assert.property(recipe1, "averageRating");
+```
+
+Your `averageRating` property should be set to `null`.
+
+```js
+assert.isNull(recipe1.averageRating);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  ratings: [4, 5, 4, 5],
+--fcc-editable-region--
+
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
new file mode 100644
index 0000000000..6e051af223
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
@@ -0,0 +1,135 @@
+---
+id: 670e4f45f7116c0f216a5177
+title: Step 5
+challengeType: 1
+dashedName: step-5
+---
+
+# --description--
+
+Before we move on, you should practice how to access properties from an object.
+
+You can use either dot (`.`) or bracket (`[]`) notation to do this. Here's an example:
+
+```js
+const person = {
+  name: 'John',
+  age: 30,
+  job: 'Software Engineer'
+};
+
+console.log(person.name); // John
+console.log(person['age']);  // 30
+```
+
+Access the `name` properties of both `recipe1` and `recipe2`, and assign them to the variables `recipe1Name` and `recipe2Name`, respectively.
+
+Next, access the `cookingTime` properties of both recipes and assign them to the variables `recipe1CookingTime` and `recipe2CookingTime`, respectively.
+
+Make sure all the variables you created are logged to the console.
+
+# --hints--
+
+You should create a `recipe1Name` variable.
+
+```js
+assert.isNotNull(recipe1Name)
+```
+
+You should set your `recipe1Name` variable to the accessment of the `name` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.name|recipe1\[("|'|`)name("|'|`)\]/)
+```
+
+You should log `recipe1Name` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1Name\)/)
+```
+
+You should create a `recipe2Name` variable.
+
+```js
+assert.isNotNull(recipe2Name)
+```
+
+You should set your `recipe2Name` variable to the accessment of the `name` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.name|recipe2\[("|'|`)name("|'|`)\]/)
+```
+
+You should log `recipe2Name` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe2Name\)/)
+```
+
+You should create a `recipe1CookingTime` variable.
+
+```js
+assert.isNotNull(recipe1CookingTime)
+```
+
+You should set your `recipe1CookingTime` variable to the accessment of the `cookingTime` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.cookingTime|recipe1\[("|'|`)cookingTime("|'|`)\]/)
+```
+
+You should log `recipe1CookingTime` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1CookingTime\)/)
+```
+
+You should create a `recipe2CookingTime` variable.
+
+```js
+assert.isNotNull(recipe2CookingTime)
+```
+
+You should set your `recipe2CookingTime` variable to the accessment of the `cookingTime` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.cookingTime|recipe2\[("|'|`)cookingTime("|'|`)\]/)
+```
+
+You should log `recipe2CookingTime` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe2CookingTime\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
new file mode 100644
index 0000000000..f86b2c6d43
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996b
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Begin your project by adding an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` within the `body` element.
+
+# --hints--
+
+Your code should have an `img` element.
+
+```js
+assert(document.querySelectorAll('img').length === 1);
+```
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
new file mode 100644
index 0000000000..ba70369909
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
@@ -0,0 +1,42 @@
+---
+id: 60a3e3396c7b40068ad6996c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+In the previous lecture videos about the CSS box model, you learned that every HTML element is treated as a box with four areas.
+
+Imagine you receive a box from your favorite online retailer — the content is the item in the box, or in your case, a header, paragraph, or image element.
+
+Change the `src` attribute in the `<img>` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`.
+
+# --hints--
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
new file mode 100644
index 0000000000..53f6395c12
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
@@ -0,0 +1,41 @@
+---
+id: 60a3e3396c7b40068ad6996d
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it.
+
+Think of the border like the cardboard box your item was shipped in.
+
+Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+# --hints--
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
new file mode 100644
index 0000000000..070dc57d06
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Margin is the area outside of the box, and can be used to control the space between other boxes or elements.
+
+Here the bottom element has a larger top margin, pushing it further down the page.
+
+Now that you quickly reviewed the CSS box model, let's get started on the Rothko painting.
+
+Remove the `<img>` element.
+
+# --hints--
+
+You should not have an `img` element in your code.
+
+```js
+assert(document.querySelector('img') === null);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
new file mode 100644
index 0000000000..33aa91b710
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
@@ -0,0 +1,47 @@
+---
+id: 60a3e3396c7b40068ad6996f
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Add a `div` element in the `body`.
+
+Set the `class` attribute equal to `canvas`.
+
+This will act as the canvas for your painting.
+
+# --hints--
+
+Your code should have a `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 1)
+```
+
+The `div` element should have a `class` with the value `canvas`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('canvas'))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
new file mode 100644
index 0000000000..4ef6fabe87
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
@@ -0,0 +1,53 @@
+---
+id: 60a3e3396c7b40068ad69970
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Before you can start styling the `div` you added, you need to link your CSS to your HTML.
+
+Add a `link` element to link your `styles.css` file. Set the `href` to `styles.css`, and remember to set the `rel` attribute to `stylesheet`.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert(/<link/.test(code))
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert.match(code, /<link.*?rel=('|"|`)stylesheet\1/)
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link.*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
new file mode 100644
index 0000000000..286d537b9e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69971
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Time for CSS.
+
+Even though your `<div>` has no text, it's still treated as a box with content. Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels. Here's a CSS rule that sets the width of the class `card` to 300 pixels:
+
+```css
+.card {
+  width: 300px;
+}
+```
+
+# --hints--
+
+Your code should have a `.canvas` selector.
+
+```js
+const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas');
+assert(hasCanvas)
+```
+
+You should set the `width` property to `500px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px')
+assert(hasWidth);
+```
+
+Your `.canvas` element should have a `width` of `500px`.
+
+```js
+const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width');
+assert(width === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
new file mode 100644
index 0000000000..9151276320
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
@@ -0,0 +1,54 @@
+---
+id: 60a3e3396c7b40068ad69972
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Add the `height` property with the value `600px` to your `.canvas` rule.
+
+# --hints--
+
+You should set the `height` property to `600px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px');
+assert(hasHeight);
+```
+
+Your `.canvas` element should have a `height` of `600px`.
+
+```js
+const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height');
+assert(canvasHeight === '600px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
new file mode 100644
index 0000000000..66a17e01da
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
@@ -0,0 +1,55 @@
+---
+id: 60a3e3396c7b40068ad69973
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Change the `background-color` of the canvas to `#4d0f00`.
+
+# --hints--
+
+You should set the `background-color` property to `#4d0f00`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)');
+assert(hasBackground);
+```
+
+Your `.canvas` element should have a `background-color` of `#4d0f00`.
+
+```js
+const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color');
+assert(canvasBackground === 'rgb(77, 15, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
new file mode 100644
index 0000000000..45d4fc208c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69974
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Every painting needs a frame.
+
+Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class.
+# --hints--
+
+You should add a new `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 2)
+```
+
+Your `.canvas` element should be nested in the new `div` element.
+
+```js
+assert(document.querySelector('.canvas').parentElement.tagName === 'DIV');
+```
+
+Your new `div` should have a `class` with the value `frame`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('frame'));
+```
+
+Your new `div` should be within your `body` element.
+
+```js
+assert(document.querySelector('div').parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+--fcc-editable-region--
+
+    <div class="canvas">
+    </div>
+
+--fcc-editable-region--
+  </body>
+  ```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
new file mode 100644
index 0000000000..8943f3095f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69975
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Write a new rule using the `.frame` class selector.
+
+Use the `border` shorthand declaration to give the `.frame` element a solid, black border with a width of `50px`.
+
+# --hints--
+
+Your code should have a `.frame` selector.
+
+```js
+const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame');
+assert(hasFrame);
+```
+
+You should set the `border` property to `50px solid black`.
+
+```js
+const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black');
+assert(hasBorder);
+```
+
+Your `.frame` element should have a `50px solid black` `border`.
+
+```js
+const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border');
+assert(frameBorder === '50px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
new file mode 100644
index 0000000000..67d334708d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
@@ -0,0 +1,64 @@
+---
+id: 60a3e3396c7b40068ad69976
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+The frame is much too wide.
+
+In `.frame`, set its `width` to 500 pixels.
+
+# --hints--
+
+You should set the `width` property to `500px`.
+
+```js
+const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px');
+assert(widthFilter.length === 2);
+```
+
+Your `.frame` element should have a `width` of `500px`.
+
+```js
+const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width');
+assert(frameWidth === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
new file mode 100644
index 0000000000..bba60c94f2
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
@@ -0,0 +1,65 @@
+---
+id: 60a3e3396c7b40068ad69977
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Use padding to adjust the spacing within an element.
+
+In `.frame`, use the `padding` shorthand property to increase the space between the `.frame` and `.canvas` elements by `50px`. The shorthand will increase space in the top, bottom, left, and right of the element's border and canvas within.
+
+# --hints--
+
+You should set the `padding` property to `50px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px');
+assert(hasPadding);
+```
+
+Your `.frame` element should have a `padding` value of `50px`.
+
+```js
+const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding');
+assert(framePadding === '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
new file mode 100644
index 0000000000..5bdf662a15
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
@@ -0,0 +1,66 @@
+---
+id: 60a3e3396c7b40068ad69978
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Use margins to adjust the spacing outside of an element.
+
+Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. This will move the frame down 20 pixels and horizontally center it on the page.
+
+# --hints--
+
+You should set the `margin` property to `20px auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto');
+assert(hasMargin);
+```
+
+Your `.frame` element should have a `margin` value of `20px auto`.
+
+```js
+const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin');
+assert(frameMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
new file mode 100644
index 0000000000..cbbaa5bd1d
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad69979
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Add a new `div` element inside of your `.canvas` element.
+
+Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 3);
+```
+
+You should nest the new `div` element within your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[0].tagName === 'DIV');
+```
+
+Your new `div` should have a `class` attribute with a value `one`.
+
+```js
+assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
new file mode 100644
index 0000000000..de2c2b089c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997a
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Write a new rule that targets `.one` and set its `width` to 425 pixels.
+
+# --hints--
+
+You should have a `.one` selector.
+
+```js
+const hasOne = new __helpers.CSSHelp(document).getStyle('.one');
+assert(hasOne);
+```
+
+You should set the `width` property to `425px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px');
+assert(hasWidth);
+```
+
+Your `.one` element should have a `width` value of `425px`.
+
+```js
+const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width');
+assert(oneWidth === '425px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
new file mode 100644
index 0000000000..aa9033dc8b
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
@@ -0,0 +1,70 @@
+---
+id: 60a3e3396c7b40068ad6997b
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Now set the `height` for `.one` to 150 pixels.
+
+# --hints--
+
+You should set the `height` property to `150px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px');
+assert(hasHeight);
+```
+
+Your `.one` element should have a `height` value of `150px`.
+
+```js
+const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height');
+assert(oneHeight === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
new file mode 100644
index 0000000000..bec4b8fdf3
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad6997c
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Set the `background-color` of `.one` to `#efb762`.
+
+# --hints--
+
+You should set the `background-color` property to `#efb762`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)');
+assert(hasBackground)
+```
+
+Your `.one` element should have a `background-color` value of `#efb762`.
+
+```js
+const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color');
+assert(oneBackground === 'rgb(239, 183, 98)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
new file mode 100644
index 0000000000..29042741c7
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997d
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Use margins to position the `.one` element on the canvas.
+
+Add the shorthand `margin` property with a vertical margin of `20px` and a horizontal margin of `auto`.
+
+# --hints--
+
+You should set the `margin` property to `20px auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto');
+assert(marginFilter.length === 2);
+```
+
+Your `.one` element should have a `margin` value of `20px auto`.
+
+```js
+const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin');
+assert(oneMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
new file mode 100644
index 0000000000..365ecbaec6
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
@@ -0,0 +1,75 @@
+---
+id: 60a3e3396c7b40068ad6997e
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels.
+
+Add `padding` of `1px` to the `.canvas` element to give the `.one` element something solid to push off of.
+
+# --hints--
+
+You should set the `padding` property to `1px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
+assert(hasPadding);
+```
+
+Your `.canvas` element should have a `padding` value of `1px`.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding');
+assert(canvasPadding === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
new file mode 100644
index 0000000000..9ffd481ee9
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
@@ -0,0 +1,82 @@
+---
+id: 60a3e3396c7b40068ad6997f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels.
+
+Replace the `padding` property with `overflow` set to `hidden` - changing the canvas back to its original dimensions.
+
+# --hints--
+
+You should remove the `padding` property from the `.canvas` selector.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding');
+assert(!canvasPadding);
+```
+
+You should set the `overflow` property to `hidden`.
+
+```js
+const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden');
+assert(hasOverflow);
+```
+
+Your `.canvas` element should have an `overflow` value of `hidden`.
+
+```js
+const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow');
+assert(canvasOverflow === 'hidden')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+  padding: 1px;
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
new file mode 100644
index 0000000000..84694dcaba
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69980
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle.
+
+# --hints--
+
+You should not change the existing `.one` element.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+```
+
+You should have a second `div` element in your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[1].tagName === 'DIV');
+```
+
+Your second `div` element should have a `class` value of `two`.
+
+```js
+assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two'));
+```
+
+Your `.two` element should come after your `.one` element.
+
+```js
+assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
new file mode 100644
index 0000000000..905c846534
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69981
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels.
+
+# --hints--
+
+You should have a `.two` selector.
+
+```js
+const hasTwo = new __helpers.CSSHelp(document).getStyle('.two');
+assert(hasTwo);
+```
+
+You should set the `width` property to `475px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px');
+assert(hasWidth);
+```
+
+Your `.two` element should have a `width` value of `475px`.
+
+```js
+const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width');
+assert(twoWidth === '475px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
new file mode 100644
index 0000000000..deb83104e5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
@@ -0,0 +1,79 @@
+---
+id: 60a3e3396c7b40068ad69982
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Set the `height` of the `.two` element to 200 pixels.
+
+# --hints--
+
+You should set the `height` property to `200px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px');
+assert(hasHeight);
+```
+
+Your `.two` element should have a `height` value of `200px`.
+
+```js
+const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height');
+assert(twoHeight === '200px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
new file mode 100644
index 0000000000..b473fbe95e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
@@ -0,0 +1,80 @@
+---
+id: 60a3e3396c7b40068ad69983
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Set the `background-color` of the `.two` element to `#8f0401`.
+
+# --hints--
+
+You should set the `background-color` property to `#8f0401`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)');
+assert(hasBackground);
+```
+
+Your `.two` element should have a `background-color` value of `#8f0401`.
+
+```js
+const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color');
+assert(twoBackground === 'rgb(143, 4, 1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
new file mode 100644
index 0000000000..aa6bfc9b10
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
@@ -0,0 +1,81 @@
+---
+id: 60a3e3396c7b40068ad69984
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Center the `.two` element by setting its `margin` to `auto`.
+
+# --hints--
+
+You should set the `margin` property to `auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto');
+assert(hasMargin);
+```
+
+Your `.two` element should have a `margin` value of `auto`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
new file mode 100644
index 0000000000..d4e9204170
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad69986
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle.
+
+# --hints--
+
+Your existing `.one` and `.two` elements should not be changed.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+assert(document.querySelectorAll('.two').length === 1);
+```
+
+Your new `div` should be nested in your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
+```
+
+Your new `div` should come after your `.two` element.
+
+```js
+assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
+```
+
+Your new `div` element should have a `class` with the value `three`.
+
+```js
+assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
new file mode 100644
index 0000000000..a8ed43828e
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
@@ -0,0 +1,94 @@
+---
+id: 60a3e3396c7b40068ad69987
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+You don't always have to use pixels when sizing an element.
+
+Create a new rule, `.three`, and set its `width` to `91%`.
+
+# --hints--
+
+You should use the `.three` selector.
+
+```js
+const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
+assert(hasThree);
+```
+
+You should set the `width` property to `91%`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
+assert(hasWidth);
+```
+
+Your `.three` element should have a `width` value of `91%`.
+
+```js
+const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
+assert(threeWidth === '91%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
new file mode 100644
index 0000000000..4bac9123c8
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
@@ -0,0 +1,87 @@
+---
+id: 60a3e3396c7b40068ad69988
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Set the `height` of `.three` to `28%`.
+
+# --hints--
+
+You should set the `height` property to `28%`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
+assert(hasHeight);
+```
+
+Your `.three` element should have a `height` value of `28%`.
+
+```js
+const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
+assert(threeHeight === '28%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
new file mode 100644
index 0000000000..aa949defd3
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
@@ -0,0 +1,88 @@
+---
+id: 60a3e3396c7b40068ad69989
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Change the `background-color` of `.three` to `#b20403`.
+
+# --hints--
+
+You should set the `background-color` property to `#b20403`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
+assert(hasBackground);
+```
+
+Your `.three` element should have a `background-color` value of `#b20403`.
+
+```js
+const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
+assert(threeBackground === 'rgb(178, 4, 3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
new file mode 100644
index 0000000000..6a8b129773
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
@@ -0,0 +1,89 @@
+---
+id: 60a3e3396c7b40068ad6998a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Center the `.three` element on the canvas by setting its `margin` to `auto`.
+
+# --hints--
+
+You should set the `margin` property to `auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
+assert(marginFilter.length === 2);
+```
+
+Your `.three` element should have a `margin` value of `auto`.
+
+```js
+const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
+assert(threeMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
new file mode 100644
index 0000000000..ba32bd466f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad6998b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+It's helpful to have your margins push in one direction.
+
+In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels.
+
+In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels.
+
+# --hints--
+
+You should set the `margin` property to `0 auto 20px`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
+assert(hasMargin);
+```
+
+Your `.two` element should have a `margin` value of `0 auto 20px`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === '0px auto 20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+  margin: auto;
+--fcc-editable-region--
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
new file mode 100644
index 0000000000..db47cb9346
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad6998c
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The colors and shapes of your painting are too sharp to pass as a Rothko.
+
+Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element.
+
+Here's an example of a rule that add a 3px `blur`:
+
+```css
+p {
+  filter: blur(3px);
+}
+```
+
+# --hints--
+
+You should set the `filter` property to `blur(2px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
+assert(hasFilter);
+```
+
+Your `.canvas` element should have a `filter` value of `blur(2px)`.
+
+```js
+const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
+assert(canvasFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+
+}
+--fcc-editable-region--
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
new file mode 100644
index 0000000000..06f7c56156
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
@@ -0,0 +1,108 @@
+---
+id: 60a3e3396c7b40068ad6998d
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel.
+
+# --hints--
+
+You should have a `.one, .two` selector list.
+
+```js
+const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
+assert(oneTwo);
+```
+
+You should set the `filter` property to `blur(1px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
+assert(hasFilter)
+```
+
+Your `.one` element should have a `filter` value of `blur(1px)`.
+
+```js
+const one = document.querySelector('.one');
+const oneFilter = getComputedStyle(one).filter;
+assert(oneFilter === 'blur(1px)');
+```
+
+Your `.two` element should have a `filter` value of `blur(1px)`.
+
+```js
+const two = document.querySelector('.two');
+const twoFilter = getComputedStyle(two).filter;
+assert(twoFilter === 'blur(1px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
new file mode 100644
index 0000000000..dafc3792ec
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
@@ -0,0 +1,95 @@
+---
+id: 60a3e3396c7b40068ad6998e
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Increase the `blur` of `.three` by 2 pixels.
+
+# --hints--
+
+You should set the `filter` property to `blur(2px)`.
+
+```js
+const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
+assert(filterFilter.length === 2);
+```
+
+Your `.three` element should have a `filter` value of `blur(2px)`.
+
+```js
+const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
+assert(threeFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
new file mode 100644
index 0000000000..9971a7dda8
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad6998f
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+The rectangles are too small and their edges don't have the soft quality of a painting.
+
+Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
+
+```js
+const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
+assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
new file mode 100644
index 0000000000..70123d3e87
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
@@ -0,0 +1,97 @@
+---
+id: 60a3e3396c7b40068ad69990
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 3px 3px #8f0401`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`.
+
+```js
+const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
+assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
new file mode 100644
index 0000000000..e7582ebc5a
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad69991
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+assert(hasBoxShadow);
+```
+
+Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
+
+```js
+const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
+assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
new file mode 100644
index 0000000000..f78535e86c
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
@@ -0,0 +1,101 @@
+---
+id: 60a3e3396c7b40068ad69992
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+The corners of each rectangle are still too sharp.
+
+Round each corner of the `.one` element by 9 pixels, using the `border-radius` property.
+
+# --hints--
+
+You should set the `border-radius` property to `9px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
+assert(hasBorderRadius);
+```
+
+Your `.one` element should have a `border-radius` value of `9px`.
+
+```js
+const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
+assert(oneBorderRadius === '9px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
new file mode 100644
index 0000000000..e99b91467f
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad69993
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Use the `border-radius` property on the `.two` selector, to set its top-left radius and bottom-right radius to `8px`, and top-right radius and bottom-left radius to `10px`.
+
+# --hints--
+
+You should set the `border-radius` property to `8px 10px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
+assert(hasBorderRadius);
+```
+
+Your `.two` element should have a `border-radius` value of `8px 10px`.
+
+```js
+const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
+assert(twoBorderRadius === '8px 10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
new file mode 100644
index 0000000000..41be8e8fd5
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69994
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners.
+
+Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels.
+
+# --hints--
+
+You should set the `border-radius` property to `30px 25px 60px 12px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
+assert(hasBorderRadius);
+```
+
+Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`.
+
+```js
+const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
+assert(threeBorderRadius === '30px 25px 60px 12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
new file mode 100644
index 0000000000..f5ebe9a726
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
@@ -0,0 +1,104 @@
+---
+id: 60a3e3396c7b40068ad69995
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Rotate each rectangle to give them more of an imperfect, hand-painted look.
+
+Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees.
+
+# --hints--
+
+You should set the `transform` property to `rotate(-0.6deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
+assert(hasTransform);
+```
+
+Your `.one` element should have a `transform` value of `rotate(-0.6deg)`.
+
+```js
+const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
+assert(oneTransform === 'rotate(-0.6deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
new file mode 100644
index 0000000000..3b25d4ac04
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69996
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Rotate the `.two` element clockwise by 0.4 degrees.
+
+# --hints--
+
+You should set the `transform` property to `rotate(0.4deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
+assert(hasTransform);
+```
+
+Your `.two` element should have a `transform` value of `rotate(0.4deg)`.
+
+```js
+const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
+assert(twoTransform === 'rotate(0.4deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
new file mode 100644
index 0000000000..a41a1976ff
--- /dev/null
+++ b/curriculum/challenges/swahili/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
@@ -0,0 +1,180 @@
+---
+id: 60a3e3396c7b40068ad69997
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Rotate `.three` counter clockwise by 0.2 degrees.
+
+With this final step, your Rothko painting is now complete.
+
+# --hints--
+
+You should set the `transform` property to `rotate(-0.2deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
+assert(hasTransform);
+```
+
+Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
+
+```js
+const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
+assert(threeTransform === 'rotate(-0.2deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+  transform: rotate(-0.2deg);
+}
+```
diff --git a/curriculum/challenges/ukrainian/00-certifications/a2-english-for-developers-certification/a2-english-for-developers-certification.yml b/curriculum/challenges/ukrainian/00-certifications/a2-english-for-developers-certification/a2-english-for-developers-certification.yml
index f4c5abb1c1..c586ef1a8d 100644
--- a/curriculum/challenges/ukrainian/00-certifications/a2-english-for-developers-certification/a2-english-for-developers-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/a2-english-for-developers-certification/a2-english-for-developers-certification.yml
@@ -7,4 +7,4 @@ isPrivate: true
 tests:
   - 
     id: 651dd3e06ffb500e3f2ce478
-    title: Challenge 1
+    title: Завдання 1
diff --git a/curriculum/challenges/ukrainian/00-certifications/b1-english-for-developers-certification/b1-english-for-developers-certification.yml b/curriculum/challenges/ukrainian/00-certifications/b1-english-for-developers-certification/b1-english-for-developers-certification.yml
index 7d494b7e08..e75ef87540 100644
--- a/curriculum/challenges/ukrainian/00-certifications/b1-english-for-developers-certification/b1-english-for-developers-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/b1-english-for-developers-certification/b1-english-for-developers-certification.yml
@@ -7,4 +7,4 @@ isPrivate: true
 tests:
   - 
     id: 66607e5b317411dd5e8aae22
-    title: "Dialogue 1: I'm Tom"
+    title: "Діалог 1: мене звати Том"
diff --git a/curriculum/challenges/ukrainian/00-certifications/back-end-development-and-apis-certification/back-end-development-and-apis-certification.yml b/curriculum/challenges/ukrainian/00-certifications/back-end-development-and-apis-certification/back-end-development-and-apis-certification.yml
index d020e8c1e5..396a41e08c 100644
--- a/curriculum/challenges/ukrainian/00-certifications/back-end-development-and-apis-certification/back-end-development-and-apis-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/back-end-development-and-apis-certification/back-end-development-and-apis-certification.yml
@@ -1,22 +1,22 @@
 ---
 id: 561add10cb82ac38a17523bc
-title: Back End Development and APIs Certification
+title: Сертифікація «Розробка Back End та API»
 certification: back-end-development-and-apis
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: bd7158d8c443edefaeb5bdef
-    title: Timestamp Microservice
+    title: Мікросервіс часової мітки
   - 
     id: bd7158d8c443edefaeb5bdff
-    title: Request Header Parser Microservice
+    title: Мікросервіс парсингу заголовків запиту
   - 
     id: bd7158d8c443edefaeb5bd0e
-    title: URL Shortener Microservice
+    title: Мікросервіс скорочення посилань
   - 
     id: 5a8b073d06fa14fcfde687aa
-    title: Exercise Tracker
+    title: Трекер вправ
   - 
     id: bd7158d8c443edefaeb5bd0f
-    title: File Metadata Microservice
+    title: Мікросервіс метаданих файлу
diff --git a/curriculum/challenges/ukrainian/00-certifications/college-algebra-with-python-certification/college-algebra-with-python-certification.yml b/curriculum/challenges/ukrainian/00-certifications/college-algebra-with-python-certification/college-algebra-with-python-certification.yml
index 707d18c049..c5e3ac4e64 100644
--- a/curriculum/challenges/ukrainian/00-certifications/college-algebra-with-python-certification/college-algebra-with-python-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/college-algebra-with-python-certification/college-algebra-with-python-certification.yml
@@ -1,22 +1,22 @@
 ---
 id: 61531b20cc9dfa2741a5b800
-title: College Algebra with Python Certification
+title: Сертифікація «Алгебра з Python»
 certification: college-algebra-with-python
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: 63d83ff239c73468b059cd3f
-    title: Build a Multi-Function Calculator
+    title: Створіть багатофункціональний калькулятор
   - 
     id: 63d83ffd39c73468b059cd40
-    title: Build a Graphing Calculator
+    title: Створіть графічний калькулятор
   - 
     id: 63d8401039c73468b059cd41
-    title: Build Three Math Games
+    title: Створіть три математичні ігри
   - 
     id: 63d8401e39c73468b059cd42
-    title: Build a Financial Calculator
+    title: Створіть фінансовий калькулятор
   - 
     id: 63d8402e39c73468b059cd43
-    title: Build a Data Graph Explorer
+    title: Створіть дослідник графіку даних
diff --git a/curriculum/challenges/ukrainian/00-certifications/data-analysis-with-python-certification/data-analysis-with-python-certification.yml b/curriculum/challenges/ukrainian/00-certifications/data-analysis-with-python-certification/data-analysis-with-python-certification.yml
index d867faab96..6990367bd1 100644
--- a/curriculum/challenges/ukrainian/00-certifications/data-analysis-with-python-certification/data-analysis-with-python-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/data-analysis-with-python-certification/data-analysis-with-python-certification.yml
@@ -1,22 +1,22 @@
 id: 5e46fc95ac417301a38fb934
-title: Data Analysis with Python Certification
+title: Сертифікація «Аналіз даних з Python»
 certification: data-analysis-with-python
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: 5e46f7e5ac417301a38fb928
-    title: Mean-Variance-Standard Deviation Calculator
+    title: Калькулятор середньоквадратичного відхилення
   - 
     id: 5e46f7e5ac417301a38fb929
-    title: Demographic Data Analyzer
+    title: Аналізатор демографічних даних
   - 
     id: 5e46f7f8ac417301a38fb92a
-    title: Medical Data Visualizer
+    title: Візуалізатор медичних даних
   - 
     id: 5e46f802ac417301a38fb92b
-    title: Page View Time Series Visualizer
+    title: Візуалізатор часового ряду перегляду сторінки
   - 
     id: 5e4f5c4b570f7e3a4949899f
-    title: Sea Level Predictor
+    title: Прогнозування змін рівня моря
 
diff --git a/curriculum/challenges/ukrainian/00-certifications/data-visualization-certification/data-visualization-certification.yml b/curriculum/challenges/ukrainian/00-certifications/data-visualization-certification/data-visualization-certification.yml
index cfda40657c..3ea9aa57e0 100644
--- a/curriculum/challenges/ukrainian/00-certifications/data-visualization-certification/data-visualization-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/data-visualization-certification/data-visualization-certification.yml
@@ -1,21 +1,21 @@
 id: 5a553ca864b52e1d8bceea14
-title: Data Visualization Certification
+title: Сертифікація «Візуалізація даних»
 certification: data-visualization
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: bd7168d8c242eddfaeb5bd13
-    title: Visualize Data with a Bar Chart
+    title: Візуалізуйте дані за допомогою стовпчикової діаграми
   - 
     id: bd7178d8c242eddfaeb5bd13
-    title: Visualize Data with a Scatterplot Graph
+    title: Візуалізуйте дані за допомогою точкової діаграми
   - 
     id: bd7188d8c242eddfaeb5bd13
-    title: Visualize Data with a Heat Map
+    title: Візуалізуйте дані за допомогою теплокарти
   - 
     id: 587d7fa6367417b2b2512bbf
-    title: Visualize Data with a Choropleth Map
+    title: Візуалізуйте дані за допомогою фонової картограми
   - 
     id: 587d7fa6367417b2b2512bc0
-    title: Visualize Data with a Treemap Diagram
+    title: Візуалізуйте дані за допомогою деревовидної карти
diff --git a/curriculum/challenges/ukrainian/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml b/curriculum/challenges/ukrainian/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml
index a145a188e7..2dd8c33911 100644
--- a/curriculum/challenges/ukrainian/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml
@@ -1,10 +1,10 @@
 ---
 id: 647f7da207d29547b3bee1ba
-title: 'Foundational C# with Microsoft Certification'
+title: 'Сертифікація «Основи C# з Microsoft»'
 certification: foundational-c-sharp-with-microsoft
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: 647e22d18acb466c97ccbef8
-    title: 'Foundational C# with Microsoft Certification Exam'
+    title: 'Екзамен з сертифікації «Основи C# з Microsoft»'
diff --git a/curriculum/challenges/ukrainian/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml b/curriculum/challenges/ukrainian/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml
index adacd42f16..7382271faa 100644
--- a/curriculum/challenges/ukrainian/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml
@@ -1,22 +1,22 @@
 ---
 id: 561acd10cb82ac38a17513bc
-title: Front End Development Libraries Certification
+title: Сертифікація «Бібліотеки Front End»
 certification: front-end-development-libraries
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: bd7158d8c442eddfaeb5bd13
-    title: Build a Random Quote Machine
+    title: Створіть генератор випадкових цитат
   - 
     id: bd7157d8c242eddfaeb5bd13
-    title: Build a Markdown Previewer
+    title: Створіть попередній перегляд Markdown
   - 
     id: 587d7dbc367417b2b2512bae
-    title: Build a Drum Machine
+    title: Створіть драм-машину
   - 
     id: bd7158d8c442eddfaeb5bd17
-    title: Build a JavaScript Calculator
+    title: Створіть калькулятор JavaScript
   - 
     id: bd7158d8c442eddfaeb5bd0f
-    title: Build a 25 + 5 Clock
+    title: Створіть таймер 25 + 5
diff --git a/curriculum/challenges/ukrainian/00-certifications/information-security-certification/information-security-certification.yml b/curriculum/challenges/ukrainian/00-certifications/information-security-certification/information-security-certification.yml
index b3fba222c8..5245a5464c 100644
--- a/curriculum/challenges/ukrainian/00-certifications/information-security-certification/information-security-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/information-security-certification/information-security-certification.yml
@@ -1,21 +1,21 @@
 id: 5e6021435ac9d0ecd8b94b00
-title: Information Security Certification
+title: Сертифікація «Інформаційна безпека»
 certification: information-security
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: 587d824a367417b2b2512c44
-    title: Stock Price Checker
+    title: Перевірка ціни на ринку акцій
   - 
     id: 587d824a367417b2b2512c45
-    title: Anonymous Message Board
+    title: Дошка анонімних повідомлень
   - 
     id: 5e46f979ac417301a38fb932
-    title: Port Scanner
+    title: Сканер портів
   - 
     id: 5e46f983ac417301a38fb933
-    title: SHA-1 Password Cracker
+    title: Програма для злому паролів SHA-1
   - 
     id: 5e601c775ac9d0ecd8b94aff
-    title: Secure Real Time Multiplayer Game
+    title: Захищена мультиплєрна гра в режимі реального часу
diff --git a/curriculum/challenges/ukrainian/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml b/curriculum/challenges/ukrainian/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
index 2b2ce86ac8..4a1708eb2f 100644
--- a/curriculum/challenges/ukrainian/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
@@ -1,21 +1,21 @@
 id: 561abd10cb81ac38a17513bc
-title: JavaScript Algorithms and Data Structures Certification
+title: Сертифікація «Алгоритми JavaScript та структури даних»
 certification: javascript-algorithms-and-data-structures
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: aaa48de84e1ecc7c742e1124
-    title: Palindrome Checker
+    title: Перевірка паліндрому
   - 
     id: a7f4d8f2483413a6ce226cac
-    title: Roman Numeral Converter
+    title: Конвертер римських чисел
   - 
     id: 56533eb9ac21ba0edf2244e2
-    title: Caesars Cipher
+    title: Шифр Цезаря
   - 
     id: aff0395860f5d3034dc0bfc9
-    title: Telephone Number Validator
+    title: Валідатор мобільного номера
   - 
     id: aa2e6f85cab2ab736c9a9b24
-    title: Cash Register
+    title: Касовий апарат
diff --git a/curriculum/challenges/ukrainian/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml b/curriculum/challenges/ukrainian/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml
index 0c548e1343..34828a6bc7 100644
--- a/curriculum/challenges/ukrainian/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml
@@ -1,5 +1,5 @@
 id: 658180220947283cdc0689ce
-title: JavaScript Algorithms and Data Structures (Beta) Certification
+title: Сертифікація «Алгоритми JavaScript та структури даних» (бета)
 certification: javascript-algorithms-and-data-structures-v8
 challengeType: 7
 isPrivate: true
@@ -15,7 +15,7 @@ tests:
     title: Створіть валідатор мобільного номера
   - 
     id: 657bdcc3a322aae1eac38392
-    title: Build a Cash Register
+    title: Створіть касовий апарат
   - 
     id: 6555c1d3e11a1574434cf8b5
     title: Створіть застосунок Pokémon Search
diff --git a/curriculum/challenges/ukrainian/00-certifications/legacy-back-end-certification/legacy-back-end-certification.yml b/curriculum/challenges/ukrainian/00-certifications/legacy-back-end-certification/legacy-back-end-certification.yml
index aac4f8e0cb..7a8634951d 100644
--- a/curriculum/challenges/ukrainian/00-certifications/legacy-back-end-certification/legacy-back-end-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/legacy-back-end-certification/legacy-back-end-certification.yml
@@ -1,36 +1,36 @@
 id: 660add10cb82ac38a17513be
-title: Legacy Back End Certification
+title: Застаріла сертифікація «Back End»
 certification: legacy-back-end
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: bd7158d8c443edefaeb5bdef
-    title: Timestamp Microservice
+    title: Мікросервіс часової мітки
   - 
     id: bd7158d8c443edefaeb5bdff
-    title: Request Header Parser Microservice
+    title: Мікросервіс парсингу заголовків запиту
   - 
     id: bd7158d8c443edefaeb5bd0e
-    title: URL Shortener Microservice
+    title: Мікросервіс скорочення посилань
   - 
     id: bd7158d8c443edefaeb5bdee
-    title: Image Search Abstraction Layer
+    title: Шар абстракції для пошуку зображень
   - 
     id: bd7158d8c443edefaeb5bd0f
-    title: File Metadata Microservice
+    title: Мікросервіс метаданих файлу
   - 
     id: bd7158d8c443eddfaeb5bdef
-    title: Build a Voting App
+    title: Створіть застосунок для голосування
   - 
     id: bd7158d8c443eddfaeb5bdff
-    title: Build a Nightlife Coordination App
+    title: Створіть застосунок для координації нічного життя
   - 
     id: bd7158d8c443eddfaeb5bd0e
-    title: Chart the Stock Market
+    title: Створіть діаграму фондової біржі
   - 
     id: bd7158d8c443eddfaeb5bd0f
-    title: Manage a Book Trading Club
+    title: Керуйте клубом книжкового обміну
   - 
     id: bd7158d8c443eddfaeb5bdee
-    title: Build a Pinterest Clone
+    title: Створіть копію Pinterest
diff --git a/curriculum/challenges/ukrainian/00-certifications/legacy-data-visualization-certification/legacy-data-visualization-certification.yml b/curriculum/challenges/ukrainian/00-certifications/legacy-data-visualization-certification/legacy-data-visualization-certification.yml
index 3066d439be..8256b7d9e4 100644
--- a/curriculum/challenges/ukrainian/00-certifications/legacy-data-visualization-certification/legacy-data-visualization-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/legacy-data-visualization-certification/legacy-data-visualization-certification.yml
@@ -1,36 +1,36 @@
 id: 561add10cb82ac39a17513bc
-title: Legacy Data Visualization Certification
+title: Застаріла сертифікація «Візуалізація даних»
 certification: legacy-data-visualization
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: bd7157d8c242eddfaeb5bd13
-    title: Build a Markdown Previewer
+    title: Створіть попередній перегляд Markdown
   - 
     id: bd7156d8c242eddfaeb5bd13
-    title: Build a Camper Leaderboard
+    title: Створіть таблицю лідерів серед кемперів
   - 
     id: bd7155d8c242eddfaeb5bd13
-    title: Build a Recipe Box
+    title: Створіть збірник рецептів
   - 
     id: bd7154d8c242eddfaeb5bd13
-    title: Build the Game of Life
+    title: Створіть гру «Життя»
   - 
     id: bd7153d8c242eddfaeb5bd13
-    title: Build a Roguelike Dungeon Crawler Game
+    title: Створіть мандрівну гру «Dungeon Crawler»
   - 
     id: bd7168d8c242eddfaeb5bd13
-    title: Visualize Data with a Bar Chart
+    title: Візуалізуйте дані за допомогою стовпчикової діаграми
   - 
     id: bd7178d8c242eddfaeb5bd13
-    title: Visualize Data with a Scatterplot Graph
+    title: Візуалізація даних за допомогою точкової діаграми
   - 
     id: bd7188d8c242eddfaeb5bd13
-    title: Visualize Data with a Heat Map
+    title: Візуалізуйте дані за допомогою теплокарти
   - 
     id: bd7198d8c242eddfaeb5bd13
-    title: Show National Contiguity with a Force Directed Graph
+    title: Зобразіть сусідні країни за допомогою силового алгоритму візуалізації графа
   - 
     id: bd7108d8c242eddfaeb5bd13
-    title: Map Data Across the Globe
+    title: Картографічні дані по всьому світу
diff --git a/curriculum/challenges/ukrainian/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml b/curriculum/challenges/ukrainian/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml
index 2ad2f1cb19..62d16243a6 100644
--- a/curriculum/challenges/ukrainian/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml
@@ -1,36 +1,36 @@
 id: 561add10cb82ac38a17513be
-title: Legacy Front End Certification
+title: Застаріла сертифікація «Front End»
 certification: legacy-front-end
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: bd7158d8c242eddfaeb5bd13
-    title: Build a Personal Portfolio Webpage
+    title: Створіть вебсторінку персонального портфоліо
   - 
     id: bd7158d8c442eddfaeb5bd13
-    title: Build a Random Quote Machine
+    title: Створіть генератор випадкових цитат
   - 
     id: bd7158d8c442eddfaeb5bd0f
-    title: Build a 25 + 5 Clock
+    title: Створіть таймер 25 + 5
   - 
     id: bd7158d8c442eddfaeb5bd17
-    title: Build a JavaScript Calculator
+    title: Створіть калькулятор JavaScript
   - 
     id: bd7158d8c442eddfaeb5bd10
-    title: Show the Local Weather
+    title: Покажіть місцеву погоду
   - 
     id: bd7158d8c442eddfaeb5bd1f
-    title: Use the Twitch JSON API
+    title: Використайте Twitch JSON API
   - 
     id: bd7158d8c442eddfaeb5bd18
-    title: Stylize Stories on Camper News
+    title: Стилізуйте стрічку новин на Camper News
   - 
     id: bd7158d8c442eddfaeb5bd19
-    title: Build a Wikipedia Viewer
+    title: Створіть переглядача вікіпедії
   - 
     id: bd7158d8c442eedfaeb5bd1c
-    title: Build a Tic Tac Toe Game
+    title: Створіть гру «Хрестики-нулики»
   - 
     id: bd7158d8c442eddfaeb5bd1c
-    title: Build a Simon Game
+    title: Створіть гру «Simon»
diff --git a/curriculum/challenges/ukrainian/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml b/curriculum/challenges/ukrainian/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml
index 9800c4a117..319d5940cb 100644
--- a/curriculum/challenges/ukrainian/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml
@@ -1,24 +1,24 @@
 id: 561add10cb82ac38a17213bd
-title: Legacy Full Stack Certification
+title: Застаріла сертифікація «Full Stack»
 certification: legacy-full-stack
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: 561add10cb82ac38a17513bc
-    title: Responsive Web Design Certification
+    title: Сертифікація «Адаптивний вебдизайн»
   - 
     id: 561abd10cb81ac38a17513bc
-    title: JavaScript Algorithms and Data Structures Certification
+    title: Сертифікація «Алгоритми JavaScript та структури даних»
   - 
     id: 561acd10cb82ac38a17513bc
-    title: Front End Libraries Certification
+    title: Сертифікація «Бібліотеки Front End»
   - 
     id: 5a553ca864b52e1d8bceea14
-    title: Data Visualization Certification
+    title: Сертифікація «Візуалізація даних»
   - 
     id: 561add10cb82ac38a17523bc
-    title: API's and Microservices Certification
+    title: Сертифікація «API та мікросервіси»
   - 
     id: 561add10cb82ac38a17213bc
-    title: Legacy Information Security and Quality Assurance Certification
+    title: Застаріла сертифікація «Інформаційна безпека та забезпечення якості»
diff --git a/curriculum/challenges/ukrainian/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml b/curriculum/challenges/ukrainian/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml
index 199f3f4894..8dc4dd4674 100644
--- a/curriculum/challenges/ukrainian/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml
@@ -1,21 +1,21 @@
 id: 561add10cb82ac38a17213bc
-title: Legacy Information Security and Quality Assurance Certification
+title: Застаріла сертифікація «Інформаційна безпека та забезпечення якості»
 certification: legacy-information-security-and-quality-assurance
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: 587d8249367417b2b2512c41
-    title: Metric-Imperial Converter
+    title: Метрико-імперський конвертер
   - 
     id: 587d8249367417b2b2512c42
-    title: Issue Tracker
+    title: Система відстеження помилок
   - 
     id: 587d824a367417b2b2512c43
-    title: Personal Library
+    title: Особиста бібліотека
   - 
     id: 587d824a367417b2b2512c44
-    title: Stock Price Checker
+    title: Перевірка ціни на ринку акцій
   - 
     id: 587d824a367417b2b2512c45
-    title: Anonymous Message Board
+    title: Дошка анонімних повідомлень
diff --git a/curriculum/challenges/ukrainian/00-certifications/machine-learning-with-python-certification/machine-learning-with-python-certification.yml b/curriculum/challenges/ukrainian/00-certifications/machine-learning-with-python-certification/machine-learning-with-python-certification.yml
index 3d8683875b..b992f8428f 100644
--- a/curriculum/challenges/ukrainian/00-certifications/machine-learning-with-python-certification/machine-learning-with-python-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/machine-learning-with-python-certification/machine-learning-with-python-certification.yml
@@ -1,22 +1,22 @@
 id: 5e46fc95ac417301a38fb935
-title: Machine Learning with Python Certification
+title: Сертифікація «Машинне навчання з Python»
 certification: machine-learning-with-python
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: 5e46f8d6ac417301a38fb92d
-    title: Rock Paper Scissors
+    title: Камінь-ножиці-папір
   - 
     id: 5e46f8dcac417301a38fb92e
-    title: Cat and Dog Image Classifier
+    title: Класифікатор зображень котів і собак
   - 
     id: 5e46f8e3ac417301a38fb92f
-    title: Book Recommendation Engine using KNN
+    title: Інструмент рекомендацій книг із використанням KNN
   - 
     id: 5e46f8edac417301a38fb930
-    title: Linear Regression Health Costs Calculator
+    title: Калькулятор лінійної регресії витрат на здоров’я
   - 
     id: 5e46f8edac417301a38fb931
-    title: Neural Network SMS Text Classifier
+    title: Нейронна мережа для класифікації СМС
 
diff --git a/curriculum/challenges/ukrainian/00-certifications/quality-assurance-certification/quality-assurance-certification.yml b/curriculum/challenges/ukrainian/00-certifications/quality-assurance-certification/quality-assurance-certification.yml
index 7d4651bd38..3cb5c23f13 100644
--- a/curriculum/challenges/ukrainian/00-certifications/quality-assurance-certification/quality-assurance-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/quality-assurance-certification/quality-assurance-certification.yml
@@ -1,22 +1,22 @@
 id: 5e611829481575a52dc59c0e
-title: Quality Assurance Certification
+title: Сертифікація «Забезпечення якості»
 certification: quality-assurance
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: 587d8249367417b2b2512c41
-    title: Metric-Imperial Converter
+    title: Метрико-імперський конвертер
   - 
     id: 587d8249367417b2b2512c42
-    title: Issue Tracker
+    title: Система відстеження помилок
   - 
     id: 587d824a367417b2b2512c43
-    title: Personal Library
+    title: Особиста бібліотека
   - 
     id: 5e601bf95ac9d0ecd8b94afd
-    title: Sudoku Solver
+    title: Програма для розв’язування судоку
   - 
     id: 5e601c0d5ac9d0ecd8b94afe
-    title: American British Translator
+    title: Перекладач з американської на британську
 
diff --git a/curriculum/challenges/ukrainian/00-certifications/relational-database-certification/relational-database-certification.yml b/curriculum/challenges/ukrainian/00-certifications/relational-database-certification/relational-database-certification.yml
index 02094ba181..45278eadd4 100644
--- a/curriculum/challenges/ukrainian/00-certifications/relational-database-certification/relational-database-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/relational-database-certification/relational-database-certification.yml
@@ -1,21 +1,21 @@
 id: 606243f50267e718b1e755f4
-title: Relational Database Certification
+title: Сертифікація «Реляційна база даних»
 certification: relational-database
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: 5f1a4ef5d5d6b5ab580fc6ae
-    title: Celestial Bodies Database
+    title: База даних «Небесні тіла»
   - 
     id: 5f9771307d4d22b9d2b75a94
-    title: World Cup Database
+    title: База даних «Чемпіонат світу»
   - 
     id: 5f87ac112ae598023a42df1a
-    title: Salon Appointment Scheduler
+    title: Планувальник «Записи в салоні»
   - 
     id: 602d9ff222201c65d2a019f2
-    title: Periodic Table Database
+    title: База даних «Періодична таблиця»
   - 
     id: 602da04c22201c65d2a019f4
-    title: Number Guessing Game
+    title: Гра «Вгадай число»
diff --git a/curriculum/challenges/ukrainian/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml b/curriculum/challenges/ukrainian/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml
index d0e6d17039..e81219262d 100644
--- a/curriculum/challenges/ukrainian/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml
@@ -1,21 +1,21 @@
 id: 561add10cb82ac38a17513bc
-title: Responsive Web Design Certification
+title: Сертифікація «Адаптивний вебдизайн»
 certification: responsive-web-design
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: bd7158d8c442eddfaeb5bd18
-    title: Build a Tribute Page
+    title: Створіть пам’ятну сторінку
   - 
     id: 587d78af367417b2b2512b03
-    title: Build a Survey Form
+    title: Створіть форму для опитування
   - 
     id: 587d78af367417b2b2512b04
-    title: Build a Product Landing Page
+    title: Створіть посадкову сторінку продукту
   - 
     id: 587d78b0367417b2b2512b05
-    title: Build a Technical Documentation Page
+    title: Створіть сторінку технічної документації
   - 
     id: bd7158d8c242eddfaeb5bd13
-    title: Build a Personal Portfolio Webpage
+    title: Створіть вебсторінку персонального портфоліо
diff --git a/curriculum/challenges/ukrainian/00-certifications/scientific-computing-with-python-certification/scientific-computing-with-python-certification.yml b/curriculum/challenges/ukrainian/00-certifications/scientific-computing-with-python-certification/scientific-computing-with-python-certification.yml
index b0b734fe03..5921feb519 100644
--- a/curriculum/challenges/ukrainian/00-certifications/scientific-computing-with-python-certification/scientific-computing-with-python-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/scientific-computing-with-python-certification/scientific-computing-with-python-certification.yml
@@ -1,21 +1,21 @@
 id: 5e44431b903586ffb414c951
-title: Scientific Computing with Python Certification
+title: Сертифікація «Наукові обчислення з Python»
 certification: scientific-computing-with-python
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: 5e44412c903586ffb414c94c
-    title: Arithmetic Formatter
+    title: Арифметичне форматування
   - 
     id: 5e444136903586ffb414c94d
-    title: Time Calculator
+    title: Калькулятор часу
   - 
     id: 5e44413e903586ffb414c94e
-    title: Budget App
+    title: Застосунок для ведення бюджету
   - 
     id: 5e444147903586ffb414c94f
-    title: Polygon Area Calculator
+    title: Калькулятор площі багатокутника
   - 
     id: 5e44414f903586ffb414c950
-    title: Probability Calculator
+    title: Калькулятор ймовірностей
diff --git a/curriculum/challenges/ukrainian/00-certifications/upcoming-python-certification/upcoming-python-certification.yml b/curriculum/challenges/ukrainian/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
index 71963dffb5..a7e72b680c 100644
--- a/curriculum/challenges/ukrainian/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
+++ b/curriculum/challenges/ukrainian/00-certifications/upcoming-python-certification/upcoming-python-certification.yml
@@ -1,10 +1,10 @@
 ---
 id: 64afc4e8f3b37856e035b85f
-title: Upcoming Python Certification
+title: Майбутня сертифікація з Python
 certification: upcoming-python-certification
 challengeType: 7
 isPrivate: true
 tests:
   - 
     id: 64afc37bf3b37856e035b85e
-    title: Upcoming Python Project
+    title: Майбутній проєкт з Python
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/deep-learning-demystified.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/deep-learning-demystified.md
index 69e0d8957b..f1788a3639 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/deep-learning-demystified.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/deep-learning-demystified.md
@@ -1,6 +1,6 @@
 ---
 id: 5e9a0e9ef99a403d019610cc
-title: Deep Learning Demystified
+title: Пояснення глибинного навчання
 challengeType: 11
 videoId: bejQ-W9BGJg
 dashedName: deep-learning-demystified
@@ -10,23 +10,23 @@ dashedName: deep-learning-demystified
 
 ## --text--
 
-How should you assign weights to input neurons before training your network for the first time?
+Яке значення необхідно задавати ваговим коефіцієнтам вхідних нейронів перед першим тренуванням нейронної мережі?
 
 ## --answers--
 
-From smallest to largest.
+Від найменшого до найбільшого.
 
 ---
 
-Completely randomly.
+Абсолютно випадково.
 
 ---
 
-Alphabetically.
+За алфавітом.
 
 ---
 
-None of the above.
+Жодне із перерахованого вище.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/how-convolutional-neural-networks-work.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/how-convolutional-neural-networks-work.md
index 5106d2cd66..5a1d1d501d 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/how-convolutional-neural-networks-work.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/how-convolutional-neural-networks-work.md
@@ -10,7 +10,7 @@ dashedName: how-convolutional-neural-networks-work
 
 ## --text--
 
-When are Convolutional Neural Networks not useful?
+Коли згорткові нейронні мережі не є корисними?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/how-deep-neural-networks-work.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/how-deep-neural-networks-work.md
index 27dd321edb..8770760301 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/how-deep-neural-networks-work.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/how-deep-neural-networks-work.md
@@ -10,7 +10,7 @@ dashedName: how-deep-neural-networks-work
 
 ## --text--
 
-Why is it better to calculate the gradient (slope) directly rather than numerically?
+Чому обраховувати кутовий коефіцієнт краще за напрямком, а не чисельно?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/recurrent-neural-networks-rnn-and-long-short-term-memory-lstm.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/recurrent-neural-networks-rnn-and-long-short-term-memory-lstm.md
index 6b726cbf1d..3d2f8b578f 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/recurrent-neural-networks-rnn-and-long-short-term-memory-lstm.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/how-neural-networks-work/recurrent-neural-networks-rnn-and-long-short-term-memory-lstm.md
@@ -1,6 +1,6 @@
 ---
 id: 5e9a0e9ef99a403d019610cb
-title: Recurrent Neural Networks RNN and Long Short Term Memory LSTM
+title: Рекурентні нейронні мережі (RNN) і довга короткочасна пам’ять (LSTM)
 challengeType: 11
 videoId: UVimlsy9eW0
 dashedName: recurrent-neural-networks-rnn-and-long-short-term-memory-lstm
@@ -10,19 +10,19 @@ dashedName: recurrent-neural-networks-rnn-and-long-short-term-memory-lstm
 
 ## --text--
 
-What are the main neural network components that make up a Long Short Term Memory network?
+Якими є основні компоненти нейронної мережі, що утворюють мережу довгої короткочасної пам’яті?
 
 ## --answers--
 
-New information and prediction.
+Нова інформація та передбачення.
 
 ---
 
-Prediction, collected possibilities, and selection.
+Передбачення, набір зібраних можливостей та вибірка.
 
 ---
 
-Prediction, ignoring, forgetting, and selection.
+Передбачення, ігнорування, забування та вибірка.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/book-recommendation-engine-using-knn.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/book-recommendation-engine-using-knn.md
index a34c3555c2..ed45d96f9b 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/book-recommendation-engine-using-knn.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/book-recommendation-engine-using-knn.md
@@ -1,6 +1,6 @@
 ---
 id: 5e46f8e3ac417301a38fb92f
-title: Book Recommendation Engine using KNN
+title: Інструмент рекомендацій книг із використанням KNN
 challengeType: 10
 forumTopicId: 462378
 dashedName: book-recommendation-engine-using-knn
@@ -8,29 +8,29 @@ dashedName: book-recommendation-engine-using-knn
 
 # --description--
 
-You will be <a href="https://colab.research.google.com/github/freeCodeCamp/boilerplate-book-recommendation-engine/blob/master/fcc_book_recommendation_knn.ipynb" target="_blank" rel="noopener noreferrer nofollow">working on this project with Google Colaboratory</a>.
+Ви будете <a href="https://colab.research.google.com/github/freeCodeCamp/boilerplate-book-recommendation-engine/blob/master/fcc_book_recommendation_knn.ipynb" target="_blank" rel="noopener noreferrer nofollow">працювати над цим проєктом з Google Colaboratory</a>.
 
-After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link."
+Перейшовши за цим посиланням, створіть копію блокнота у своєму обліковому записі або локально. Як тільки ви завершили проєкт та пройшли тест (доданий до посилання), введіть посилання на свій проєкт. Якщо ви надаєте посилання на Google Colaboratory, переконайтеся, що ви увімкнули режим доступу для «усіх, хто має це посилання».
 
-We are still developing the interactive instructional content for the machine learning curriculum. For now, you can go through the video challenges in this certification. You may also have to seek out additional learning resources, similar to what you would do when working on a real-world project.
+Ми досі розробляємо інтерактивну складову для навчальної програми з машинного навчання. Поки ви можете переглянути відеозавдання цієї сертифікації. Вам також можуть знадобитися додаткові навчальні ресурси, так само як під час роботи із повноцінним проєктом.
 
 # --instructions--
 
-In this challenge, you will create a book recommendation algorithm using **K-Nearest Neighbors**.
+У цьому завданні ви створите алгоритм книжкових рекомендацій, використовуючи метод **k-найближчих сусідів**.
 
-You will use the <a href="http://www2.informatik.uni-freiburg.de/~cziegler/BX/" target="_blank" rel="noopener noreferrer nofollow">Book-Crossings dataset</a>. This dataset contains 1.1 million ratings (scale of 1-10) of 270,000 books by 90,000 users.
+Ви будете використовувати набір даних <a href="http://www2.informatik.uni-freiburg.de/~cziegler/BX/" target="_blank" rel="noopener noreferrer nofollow">Book-Crossings</a>. Цей набір даних містить 1,1 млн рейтингів (за шкалою 1-10) 270 000 книжок від 90 000 користувачів.
 
-After importing and cleaning the data, use `NearestNeighbors` from `sklearn.neighbors` to develop a model that shows books that are similar to a given book. The Nearest Neighbors algorithm measures the distance to determine the “closeness” of instances.
+Після імпортування та очищення даних використайте `NearestNeighbors` з `sklearn.neighbors`, щоб розробити модель, яка показує книжки, схожі на подану книжку. Алгоритм найближчих сусідів вимірює відстань, щоб визначити «близькість» екземплярів.
 
-Create a function named `get_recommends` that takes a book title (from the dataset) as an argument and returns a list of 5 similar books with their distances from the book argument.
+Створіть функцію під назвою `get_recommends`, яка приймає назву книжки (з набору даних) як аргумент та повертає список із 5 подібних книжок з відстанями до аргументу книжки.
 
-This code:
+Цей код:
 
 ```py
 get_recommends("The Queen of the Damned (Vampire Chronicles (Paperback))")
 ```
 
-should return:
+має повернути:
 
 ```py
 [
@@ -45,15 +45,15 @@ should return:
 ]
 ```
 
-Notice that the data returned from `get_recommends()` is a list. The first element in the list is the book title passed into the function. The second element in the list is a list of five more lists. Each of the five lists contains a recommended book and the distance from the recommended book to the book passed into the function.
+Зверніть увагу, що дані, які повертає `get_recommends()`, є списком. Першим елементом у списку є назва книжки, передана до функції. Другим елементом списку є список із ще п’яти списків. Кожен з п’яти списків містить рекомендовану книжку та відстань від рекомендованої книжки до книжки, переданої до функції.
 
-If you graph the dataset (optional), you will notice that most books are not rated frequently. To ensure statistical significance, remove from the dataset users with less than 200 ratings and books with less than 100 ratings.
+Якщо ви побудуєте графік набору даних (необов’язково), ви помітите, що більшість книжок оцінюється рідко. Щоб забезпечити статистичну значущість, видаліть із набору даних користувачів з менш ніж 200 оцінками та книжки з менш ніж 100 оцінками.
 
-The first three cells import libraries you may need and the data to use. The final cell is for testing. Write all your code in between those cells.
+Перші три клітинки імпортують бібліотеки, які вам можуть знадобитися, та дані для використання. Кінцева клітинка — для тестування. Напишіть весь свій код між цими клітинками.
 
 # --hints--
 
-It should pass all Python tests.
+Він повинен пройти усі тести Python.
 
 ```js
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/cat-and-dog-image-classifier.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/cat-and-dog-image-classifier.md
index a2f8b5a914..c174d6b3b3 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/cat-and-dog-image-classifier.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/cat-and-dog-image-classifier.md
@@ -39,7 +39,7 @@ cats_and_dogs
 
 Наступні інструкції відповідають конкретним номерам клітинок, позначеним коментарем у верхній частині клітинки (наприклад, `# 3`).
 
-## Cell 3
+## Клітинка 3
 
 Тепер ваша черга! Правильно встановіть кожну зі змінних у цій клітинці. (Вони більше не повинні дорівнювати `None`.)
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/linear-regression-health-costs-calculator.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/linear-regression-health-costs-calculator.md
index 1537851511..e2ea0dd556 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/linear-regression-health-costs-calculator.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/linear-regression-health-costs-calculator.md
@@ -8,7 +8,7 @@ dashedName: linear-regression-health-costs-calculator
 
 # --description--
 
-You will be <a href="https://colab.research.google.com/github/freeCodeCamp/boilerplate-linear-regression-health-costs-calculator/blob/master/fcc_predict_health_costs_with_regression.ipynb" target="_blank" rel="noopener noreferrer nofollow">working on this project with Google Colaboratory</a>.
+Ви будете <a href="https://colab.research.google.com/github/freeCodeCamp/boilerplate-linear-regression-health-costs-calculator/blob/master/fcc_predict_health_costs_with_regression.ipynb" target="_blank" rel="noopener noreferrer nofollow">працювати над цим проєктом з Google Colaboratory</a>.
 
 Перейшовши за цим посиланням, створіть копію блокнота у своєму обліковому записі або локально. Як тільки ви завершили проєкт та пройшли тест (доданий до посилання), введіть посилання на свій проєкт. Якщо ви надаєте посилання на Google Colaboratory, переконайтеся, що ви увімкнули режим доступу для «усіх, хто має це посилання».
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/neural-network-sms-text-classifier.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/neural-network-sms-text-classifier.md
index 9d28934290..4d31f7e8ae 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/neural-network-sms-text-classifier.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/neural-network-sms-text-classifier.md
@@ -8,7 +8,7 @@ dashedName: neural-network-sms-text-classifier
 
 # --description--
 
-You will be <a href="https://colab.research.google.com/github/freeCodeCamp/boilerplate-neural-network-sms-text-classifier/blob/master/fcc_sms_text_classification.ipynb" target="_blank" rel="noopener noreferrer nofollow">working on this project with Google Colaboratory</a>.
+Ви будете <a href="https://colab.research.google.com/github/freeCodeCamp/boilerplate-neural-network-sms-text-classifier/blob/master/fcc_sms_text_classification.ipynb" target="_blank" rel="noopener noreferrer nofollow">працювати над цим проєктом з Google Colaboratory</a>.
 
 Перейшовши за цим посиланням, створіть копію блокнота у своєму обліковому записі або локально. Як тільки ви завершили проєкт та пройшли тест (доданий до посилання), введіть посилання на свій проєкт. Якщо ви надаєте посилання на Google Colaboratory, переконайтеся, що ви увімкнули режим доступу для «усіх, хто має це посилання».
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/rock-paper-scissors.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/rock-paper-scissors.md
index 3cc7cc49fe..691689cb6f 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/rock-paper-scissors.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/machine-learning-with-python-projects/rock-paper-scissors.md
@@ -8,7 +8,7 @@ dashedName: rock-paper-scissors
 
 # --description--
 
-For this challenge, you will create a program to play Rock, Paper, Scissors. A program that picks at random will usually win 50% of the time. To pass this challenge your program must play matches against four different bots, winning at least 60% of the games in each match.
+В цьому завданні ви створите програму, щоб грати в камінь-ножиці-папір. Програма, яка обиратиме випадково, зазвичай виграватиме у 50%. Щоб виконати це завдання, ваша програма повинна зіграти матчі проти чотирьох різних ботів, вигравши принаймні 60% ігор у кожному матчі.
 
 Ви будете <a href="https://gitpod.io/?autostart=true#https://github.com/freeCodeCamp/boilerplate-rock-paper-scissors/" target="_blank" rel="noopener noreferrer nofollow">працювати над цим проєктом з нашим стартовим кодом Gitpod</a>.
 
@@ -24,7 +24,7 @@ For this challenge, you will create a program to play Rock, Paper, Scissors. A p
 
 *Підказка: щоб перемогти всіх чотирьох супротивників, ваша програма повинна мати багато стратегій, які змінюються залежно від гри супротивника.*
 
-## Development
+## Розробка
 
 Не змінюйте `RPS_game.py`. Запишіть весь свій код у `RPS.py`. Для розробки ви можете використати `main.py`, щоб протестувати свій код.
 
@@ -32,7 +32,7 @@ For this challenge, you will create a program to play Rock, Paper, Scissors. A p
 
 Щоб перевірити свій код, пограйте в гру за допомогою функції `play`. Функція `play` приймає чотири аргументи:
 
-- two players to play against each other (the players are actually functions)
+- два гравці грають один проти одного (насправді гравцями є функції)
 - кількість ігор, які потрібно зіграти в матчі
 - необов'язковий аргумент для перегляду журналу кожної гри. Встановіть його на `True`, щоб побачити ці повідомлення.
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/conclusion.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/conclusion.md
index c5e33abc3d..ce3bd5b94e 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/conclusion.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/conclusion.md
@@ -14,7 +14,7 @@ dashedName: conclusion
 
 ## --text--
 
-Most people that are experts in AI or machine learning usually...:
+Більшість людей, які є фахівцями в галузі штучного інтелекту та машинного навчання зазвичай...:
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-evaluating-the-model.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-evaluating-the-model.md
index 7a606c4cb4..502b97c38c 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-evaluating-the-model.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-evaluating-the-model.md
@@ -14,7 +14,7 @@ dashedName: convolutional-neural-networks-evaluating-the-model
 
 ## --text--
 
-What is **not** a good way to increase the accuracy of a convolutional neural network?
+Що **не** варто робити для вдосконалення згорткової нейронної мережі?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-picking-a-pretrained-model.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-picking-a-pretrained-model.md
index ec5ad483da..3c53ff6048 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-picking-a-pretrained-model.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-picking-a-pretrained-model.md
@@ -1,6 +1,6 @@
 ---
 id: 5e8f2f13c4cdbe86b5c72d9a
-title: 'Convolutional Neural Networks: Picking a Pretrained Model'
+title: 'Згорткові нейронні мережі: вибір попередньо підготовленої моделі'
 challengeType: 11
 videoId: h1XUt1AgIOI
 bilibiliIds:
@@ -14,7 +14,7 @@ dashedName: convolutional-neural-networks-picking-a-pretrained-model
 
 ## --text--
 
-Fill in the blanks below to use Google's pre-trained MobileNet V2 model as a base for a convolutional neural network:
+Заповніть пропуски нижче, щоб використати попередньо підготовлену модель Google MobileNet V2 як основу для згорткової нейронної мережі:
 
 ```py
 base_model = tf.__A__.applications.__B__(input_shape=(160, 160, 3),
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-the-convolutional-layer.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-the-convolutional-layer.md
index 3486db0714..5f874b3dca 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-the-convolutional-layer.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-the-convolutional-layer.md
@@ -1,6 +1,6 @@
 ---
 id: 5e8f2f13c4cdbe86b5c72d97
-title: 'Convolutional Neural Networks: The Convolutional Layer'
+title: 'Згорткові нейронні мережі: згортковий шар'
 challengeType: 11
 videoId: LrdmcQpTyLw
 bilibiliIds:
@@ -14,19 +14,19 @@ dashedName: convolutional-neural-networks-the-convolutional-layer
 
 ## --text--
 
-What are the three main properties of each convolutional layer?
+Які три основні властивості кожного згорткового шару?
 
 ## --answers--
 
-Input size, the number of filters, and the sample size of the filters.
+Вхідний розмір, кількість фільтрів та розмір вибірки фільтрів.
 
 ---
 
-Input size, input dimensions, and the color values of the input.
+Вхідний розмір, вхідні виміри та значення кольору входу.
 
 ---
 
-Input size, input padding, and stride.
+Вхідний розмір, вхідний відступ та крок.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks.md
index b35cc828e2..9a57db94d6 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/convolutional-neural-networks.md
@@ -12,25 +12,25 @@ dashedName: convolutional-neural-networks
 
 # --description--
 
-The next few video lessons will reference [this Colab notebook](https://colab.research.google.com/drive/1ZZXnCjFEOkp_KdNcNabd14yok0BAIuwS#forceEdit=true&sandboxMode=true).
+Декілька наступних відеоуроків посилатимуться на [цей блокнот Colab](https://colab.research.google.com/drive/1ZZXnCjFEOkp_KdNcNabd14yok0BAIuwS#forceEdit=true&sandboxMode=true).
 
 # --questions--
 
 ## --text--
 
-Dense neural networks analyze input on a global scale and recognize patterns in specific areas. Convolutional neural networks...:
+Щільні нейронні мережі обробляють вхідні дані і виділяють структури у певних місцях. Згорткові нейронні мережі...:
 
 ## --answers--
 
-also analyze input globally and extract features from specific areas.
+теж глобально обробляють вхідні дані та виділяють елементи у певних місцях.
 
 ---
 
-do not work well for image classification or object detection.
+погано працюють із класифікацією зображення або визначенням об’єкта.
 
 ---
 
-scan through the entire input a little at a time and learn local patterns.
+ретельно переглядають всі вхідні дані та вивчають локальні шаблони.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-building-the-model.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-building-the-model.md
index d6df0f712a..a7274b94a2 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-building-the-model.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-building-the-model.md
@@ -14,7 +14,7 @@ dashedName: core-learning-algorithms-building-the-model
 
 ## --text--
 
-What kind of estimator/model does TensorFlow recommend using for classification?
+Який тип оцінки/моделювання TensorFlow рекомендовано використовувати для класифікації?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-classification.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-classification.md
index 518913d5e9..445ef51255 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-classification.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-classification.md
@@ -14,7 +14,7 @@ dashedName: core-learning-algorithms-classification
 
 ## --text--
 
-What is classification?
+Що таке класифікація?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-clustering.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-clustering.md
index 1771a221f0..b18492dd3f 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-clustering.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-clustering.md
@@ -14,7 +14,7 @@ dashedName: core-learning-algorithms-clustering
 
 ## --text--
 
-Which of the following steps is **not** part of the K-Means algorithm?
+Який з нижченаведених кроків **не** є частиною алгоритму K-Means?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-hidden-markov-models.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-hidden-markov-models.md
index 080f868c03..e7a3a4005f 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-hidden-markov-models.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-hidden-markov-models.md
@@ -14,7 +14,7 @@ dashedName: core-learning-algorithms-hidden-markov-models
 
 ## --text--
 
-What makes a Hidden Markov model different than linear regression or classification?
+Що відрізняє приховану модель Маркова від лінійної регресії чи класифікації?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-the-training-process.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-the-training-process.md
index 6291ec2141..5d28258ae0 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-the-training-process.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-the-training-process.md
@@ -14,7 +14,7 @@ dashedName: core-learning-algorithms-the-training-process
 
 ## --text--
 
-What are epochs?
+Що таке епохи?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-training-and-testing-data.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-training-and-testing-data.md
index 2a0ae5db7f..0225730fdd 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-training-and-testing-data.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-training-and-testing-data.md
@@ -14,7 +14,7 @@ dashedName: core-learning-algorithms-training-and-testing-data
 
 ## --text--
 
-What is categorical data?
+Що таке категорійні дані?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-using-probabilities-to-make-predictions.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-using-probabilities-to-make-predictions.md
index 163528dd82..ef8469b6c9 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-using-probabilities-to-make-predictions.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-using-probabilities-to-make-predictions.md
@@ -14,7 +14,7 @@ dashedName: core-learning-algorithms-using-probabilities-to-make-predictions
 
 ## --text--
 
-What TensorFlow module should you import to implement `.HiddenMarkovModel()`?
+Який модуль TensorFlow потрібно імпортувати для реалізації `.HiddenMarkovModel()`?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-working-with-data.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-working-with-data.md
index 16eec306b0..fad8a0d90e 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-working-with-data.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms-working-with-data.md
@@ -14,7 +14,7 @@ dashedName: core-learning-algorithms-working-with-data
 
 ## --text--
 
-What does the pandas `.head()` function do?
+Що робить функція pandas `.head()`?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms.md
index 84ea132764..f56b48041f 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/core-learning-algorithms.md
@@ -12,31 +12,31 @@ dashedName: core-learning-algorithms
 
 # --description--
 
-The next few video lessons will reference [this Colab notebook](https://colab.research.google.com/drive/15Cyy2H7nT40sGR7TBN5wBvgTd57mVKay#forceEdit=true&sandboxMode=true).
+Декілька наступних відеоуроків посилатимуться на [цей блокнот Colab](https://colab.research.google.com/drive/15Cyy2H7nT40sGR7TBN5wBvgTd57mVKay#forceEdit=true&sandboxMode=true).
 
 # --questions--
 
 ## --text--
 
-Which type of analysis would be best suited for the following problem?:
+Який тип аналізу найкраще підходить для розв’язання наданої задачі?
 
-You have the average temperature in the month of March for the last 100 years. Using this data, you want to predict the average temperature in the month of March 5 years from now.
+У вас є дані про середню температуру у березні за останні 100 років. Використовуючи цю інформацію, потрібно передбачити середню температуру у березні через 5 років.
 
 ## --answers--
 
-Multiple regression
+Множинна регресія
 
 ---
 
-Correlation
+Кореляція
 
 ---
 
-Decision tree
+Дерево рішень
 
 ---
 
-Linear regression
+Лінійна регресія
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/creating-a-convolutional-neural-network.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/creating-a-convolutional-neural-network.md
index 8da048a223..837d3c5ea1 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/creating-a-convolutional-neural-network.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/creating-a-convolutional-neural-network.md
@@ -14,7 +14,7 @@ dashedName: creating-a-convolutional-neural-network
 
 ## --text--
 
-Fill in the blanks below to complete the architecture for a convolutional neural network:
+Заповніть пропуски нижче, щоб завершити архітектуру згорткової нейронної мережі:
 
 ```py
 model = models.__A__()
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/introduction-machine-learning-fundamentals.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/introduction-machine-learning-fundamentals.md
index dfd2539ac2..726dee5f88 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/introduction-machine-learning-fundamentals.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/introduction-machine-learning-fundamentals.md
@@ -14,7 +14,7 @@ dashedName: introduction-machine-learning-fundamentals
 
 ## --text--
 
-Which statement below is **false**?
+Яке твердження подане нижче є **хибним**?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/introduction-to-tensorflow.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/introduction-to-tensorflow.md
index 51096d71d7..0c9c80fb4a 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/introduction-to-tensorflow.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/introduction-to-tensorflow.md
@@ -1,6 +1,6 @@
 ---
 id: 5e8f2f13c4cdbe86b5c72d88
-title: Introduction to TensorFlow
+title: Вступ до TensorFlow
 challengeType: 11
 videoId: r9hRyGGjOgQ
 bilibiliIds:
@@ -12,25 +12,25 @@ dashedName: introduction-to-tensorflow
 
 # --description--
 
-The next few video lessons will reference [this Colab notebook](https://colab.research.google.com/drive/1F_EWVKa8rbMXi3_fG0w7AtcscFq7Hi7B#forceEdit=true&sandboxMode=true).
+Декілька наступних відеоуроків посилатимуться на [цей блокнот Colab](https://colab.research.google.com/drive/1F_EWVKa8rbMXi3_fG0w7AtcscFq7Hi7B#forceEdit=true&sandboxMode=true).
 
 # --questions--
 
 ## --text--
 
-Which of the following is **not** a type of tensor?
+Що з нижчепереліченого **не** є типом тензору?
 
 ## --answers--
 
-Variable
+Змінна
 
 ---
 
-Flowing
+Потік
 
 ---
 
-Placeholder
+Заповнювач
 
 ---
 
@@ -38,7 +38,7 @@ SparseTensor
 
 ---
 
-Constant
+Константа
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-building-the-model.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-building-the-model.md
index 5afaefea03..3b0eb1c205 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-building-the-model.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-building-the-model.md
@@ -14,7 +14,7 @@ dashedName: natural-language-processing-with-rnns-building-the-model
 
 ## --text--
 
-Fill in the blanks below to complete the `build_model` function:
+Заповніть пропуски, щоб доповнити функцію `build_model`:
 
 ```py
 def build_mode(vocab_size, embedding_dim, rnn_units, batch_size):
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-create-a-play-generator.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-create-a-play-generator.md
index fa6f3375c7..8b9421e6a9 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-create-a-play-generator.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-create-a-play-generator.md
@@ -14,7 +14,7 @@ dashedName: natural-language-processing-with-rnns-create-a-play-generator
 
 ## --text--
 
-Fill in the blanks below to create the training examples for the RNN:
+Заповніть пробіли, щоб створити навчальні приклади рекурентних нейронних мереж:
 
 ```py
 char_dataset = tf.data.__A__.__B__(text_as_int)
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-making-predictions.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-making-predictions.md
index 16e02551b7..0a64ae39a8 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-making-predictions.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-making-predictions.md
@@ -14,7 +14,7 @@ dashedName: natural-language-processing-with-rnns-making-predictions
 
 ## --text--
 
-Before you make a prediction with your own review, you should...:
+Перед тим, як розпочати процес прогнозування свого огляду, потрібно...:
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-part-2.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-part-2.md
index f4930755aa..7ce85f18d8 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-part-2.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-part-2.md
@@ -14,7 +14,7 @@ dashedName: natural-language-processing-with-rnns-part-2
 
 ## --text--
 
-Word embeddings are...:
+Вкладання слів — це...:
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-recurring-neural-networks.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-recurring-neural-networks.md
index 8003dc7fcc..709b69a34b 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-recurring-neural-networks.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-recurring-neural-networks.md
@@ -14,7 +14,7 @@ dashedName: natural-language-processing-with-rnns-recurring-neural-networks
 
 ## --text--
 
-What is true about Recurrent Neural Networks?
+Що представляють собою рекурентні нейронні мережі?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-sentimental-analysis.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-sentimental-analysis.md
index 1ac057392b..ed8aa44b1d 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-sentimental-analysis.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-sentimental-analysis.md
@@ -14,7 +14,7 @@ dashedName: natural-language-processing-with-rnns-sentiment-analysis
 
 ## --text--
 
-Fill in the blanks below to create the model for the RNN:
+Заповніть пропуски нижче, щоб створити модель для рекурентної нейронної мережі:
 
 ```py
 model = __A__.keras.Sequential([
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-training-the-model.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-training-the-model.md
index 5b02c10e67..9989950dee 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-training-the-model.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-training-the-model.md
@@ -14,7 +14,7 @@ dashedName: natural-language-processing-with-rnns-training-the-model
 
 ## --text--
 
-Fill in the blanks below to save your model's checkpoints in the `./checkpoints` directory and call the latest checkpoint for training:
+Заповніть пропуски нижче, щоб зберегти контрольні точки своєї моделі у директорії `./checkpoints` і викличте останню контрольну точку для відпрацювання:
 
 ```py
 checkpoint_dir = __A__
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns.md
index ff40b2f225..9c0b125847 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns.md
@@ -12,25 +12,25 @@ dashedName: natural-language-processing-with-rnns
 
 # --description--
 
-The next few video lessons will reference [this Colab notebook](https://colab.research.google.com/drive/1ysEKrw_LE2jMndo1snrZUh5w87LQsCxk#forceEdit=true&sandboxMode=true).
+Декілька наступних відеоуроків посилатимуться на [цей блокнот Colab](https://colab.research.google.com/drive/1ysEKrw_LE2jMndo1snrZUh5w87LQsCxk#forceEdit=true&sandboxMode=true).
 
 # --questions--
 
 ## --text--
 
-Natural Language Processing is a branch of artificial intelligence that...:
+Обробка природної мови — це галузь штучного інтелекту, яка...:
 
 ## --answers--
 
-deals with how computers understand and process natural/human languages.
+стосується того, як комп’ютери розуміють та обробляють природні/людські мови.
 
 ---
 
-translates image data into natural/human languages.
+переводить зображення в природні/людські мови.
 
 ---
 
-is focused on translating computer languages into natural/human languages.
+спеціалізується на перекладі комп’ютерних мов на природні/людські мови.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-activation-functions.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-activation-functions.md
index b64aa64ba1..ea9c8989f1 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-activation-functions.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-activation-functions.md
@@ -14,7 +14,7 @@ dashedName: neural-networks-activation-functions
 
 ## --text--
 
-Which activation function squishes values between -1 and 1?
+Яка функція активації нормалізує значення між -1 та 1?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-creating-a-model.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-creating-a-model.md
index 4eb05a8bb9..0fdfdd8767 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-creating-a-model.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-creating-a-model.md
@@ -14,7 +14,7 @@ dashedName: neural-networks-creating-a-model
 
 ## --text--
 
-Fill in the blanks below to build a sequential model of dense layers:
+Заповніть пропуски нижче, щоб побудувати послідовну модель щільних шарів:
 
 ```py
 model = __A__.__B__([
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-optimizers.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-optimizers.md
index 12cc6b5849..1fa39286ee 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-optimizers.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-optimizers.md
@@ -14,7 +14,7 @@ dashedName: neural-networks-optimizers
 
 ## --text--
 
-What is an optimizer function?
+Що таке функція оптимізатора?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-with-tensorflow.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-with-tensorflow.md
index 5ea5c372c1..34208c488a 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-with-tensorflow.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/neural-networks-with-tensorflow.md
@@ -12,25 +12,25 @@ dashedName: neural-networks-with-tensorflow
 
 # --description--
 
-The next few video lessons will reference [this Colab notebook](https://colab.research.google.com/drive/1m2cg3D1x3j5vrFc-Cu0gMvc48gWyCOuG#forceEdit=true&sandboxMode=true).
+Декілька наступних відеоуроків посилатимуться на [цей блокнот Colab](https://colab.research.google.com/drive/1m2cg3D1x3j5vrFc-Cu0gMvc48gWyCOuG#forceEdit=true&sandboxMode=true).
 
 # --questions--
 
 ## --text--
 
-A densely connected neural network is one in which...:
+Щільно зв’язана нейронна мережа — це та, в якій...:
 
 ## --answers--
 
-all the neurons in the current layer are connected to one neuron in the previous layer.
+всі нейрони поточного шару з’єднані з одним нейроном попереднього шару.
 
 ---
 
-all the neurons in each layer are connected randomly.
+всі нейрони у кожному шарі пов’язані випадковим чином.
 
 ---
 
-all the neurons in the current layer are connected to every neuron in the previous layer.
+всі нейрони поточного шару з’єднані з кожним нейроном попереднього шару.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-example.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-example.md
index 4a55563ac3..aa6f9aba91 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-example.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-example.md
@@ -14,7 +14,7 @@ dashedName: reinforcement-learning-with-q-learning-example
 
 ## --text--
 
-Fill in the blanks to complete the following Q-Learning equation:
+Заповніть пропуски, щоб завершити наступне рівняння Q-Learning:
 
 ```py
 Q[__A__, __B__] = Q[__A__, __B__] + LEARNING_RATE * (reward + GAMMA * np.max(Q[__C__, :]) - Q[__A__, __B__])
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-part-2.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-part-2.md
index 3ccfa169c4..14cd2a720d 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-part-2.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-part-2.md
@@ -14,7 +14,7 @@ dashedName: reinforcement-learning-with-q-learning-part-2
 
 ## --text--
 
-What can happen if the agent does not have a good balance of taking random actions and using learned actions?
+Що може статися, якщо агент не має необхідного балансу між прийняттям випадкових дій та реалізацією попередньо вивчених дій?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning.md b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning.md
index 5737f44f4d..b2b7556564 100644
--- a/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning.md
+++ b/curriculum/challenges/ukrainian/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning.md
@@ -12,25 +12,25 @@ dashedName: reinforcement-learning-with-q-learning
 
 # --description--
 
-The next few video lessons will reference [this Colab notebook](https://colab.research.google.com/drive/1IlrlS3bB8t1Gd5Pogol4MIwUxlAjhWOQ#forceEdit=true&sandboxMode=true).
+Декілька наступних відеоуроків посилатимуться на [цей блокнот Colab](https://colab.research.google.com/drive/1IlrlS3bB8t1Gd5Pogol4MIwUxlAjhWOQ#forceEdit=true&sandboxMode=true).
 
 # --questions--
 
 ## --text--
 
-The key components of reinforcement learning are...
+До ключових компонентів посиленого навчання належать...
 
 ## --answers--
 
-environment, representative, state, reaction, and reward.
+середовище, представництво, стан, реакція та винагорода.
 
 ---
 
-environment, agent, state, action, and reward.
+середовище, агент, стан, дія та винагорода.
 
 ---
 
-habitat, agent, state, action, and punishment.
+середовище, агент, стан, дія та покарання.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/13-relational-databases/build-a-celestial-bodies-database-project/build-a-celestial-bodies-database.md b/curriculum/challenges/ukrainian/13-relational-databases/build-a-celestial-bodies-database-project/build-a-celestial-bodies-database.md
index f9dca5dc7a..c6700c0d00 100644
--- a/curriculum/challenges/ukrainian/13-relational-databases/build-a-celestial-bodies-database-project/build-a-celestial-bodies-database.md
+++ b/curriculum/challenges/ukrainian/13-relational-databases/build-a-celestial-bodies-database-project/build-a-celestial-bodies-database.md
@@ -1,6 +1,6 @@
 ---
 id: 5f1a4ef5d5d6b5ab580fc6ae
-title: Build a Celestial Bodies Database
+title: Створіть базу даних «Небесні тіла»
 challengeType: 13
 url: freeCodeCamp/learn-celestial-bodies-database
 dashedName: build-a-celestial-bodies-database
@@ -8,15 +8,15 @@ dashedName: build-a-celestial-bodies-database
 
 # --description--
 
-This is one of the required projects to earn your certification. For this project, you will build a database of celestial bodies using PostgreSQL.
+Цей проєкт потрібно виконати, щоб отримати сертифікацію. У цьому проєкті ви побудуєте базу даних небесних тіл, використовуючи PostgreSQL.
 
 # --instructions--
 
-**Important:** After you pass all the project tests, save a dump of your database into a `universe.sql` file so you can complete step 2. There will be instructions how to do that within the virtual machine.
+**Важливо:** після проходження всіх тестів проєкту збережіть дамп бази даних у файлі `universe.sql`, щоб ви могли виконати крок 2. Там будуть інструкції, як це зробити у віртуальній машині.
 
 # --notes--
 
-Required files: `universe.sql`
+Необхідні файли: `universe.sql`
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/13-relational-databases/build-a-number-guessing-game-project/build-a-number-guessing-game.md b/curriculum/challenges/ukrainian/13-relational-databases/build-a-number-guessing-game-project/build-a-number-guessing-game.md
index cdc162f979..15101a3389 100644
--- a/curriculum/challenges/ukrainian/13-relational-databases/build-a-number-guessing-game-project/build-a-number-guessing-game.md
+++ b/curriculum/challenges/ukrainian/13-relational-databases/build-a-number-guessing-game-project/build-a-number-guessing-game.md
@@ -8,7 +8,7 @@ dashedName: build-a-number-guessing-game
 
 # --description--
 
-This is one of the required projects to earn your certification. For this project, you will use Bash scripting, PostgreSQL, and Git to create a number guessing game that runs in the terminal and saves user information.
+Цей проєкт потрібно виконати, щоб отримати сертифікацію. У цьому проєкті ви використовуватимете сценарії Bash, PostgreSQL та Git, щоб створити гру з вгадуванням чисел, яка працює в терміналі та зберігає інформацію користувача.
 
 # --instructions--
 
diff --git a/curriculum/challenges/ukrainian/13-relational-databases/build-a-periodic-table-database-project/build-a-periodic-table-database.md b/curriculum/challenges/ukrainian/13-relational-databases/build-a-periodic-table-database-project/build-a-periodic-table-database.md
index 4d05465829..7932339885 100644
--- a/curriculum/challenges/ukrainian/13-relational-databases/build-a-periodic-table-database-project/build-a-periodic-table-database.md
+++ b/curriculum/challenges/ukrainian/13-relational-databases/build-a-periodic-table-database-project/build-a-periodic-table-database.md
@@ -8,7 +8,7 @@ dashedName: build-a-periodic-table-database
 
 # --description--
 
-This is one of the required projects to earn your certification. For this project, you will create a Bash script to get information about chemical elements from a periodic table database.
+Цей проєкт потрібно виконати, щоб отримати сертифікацію. У цьому проєкті ви створите Bash-скрипт, щоб отримати інформацію про хімічні елементи з бази даних періодичної таблиці.
 
 # --instructions--
 
diff --git a/curriculum/challenges/ukrainian/13-relational-databases/build-a-salon-appointment-scheduler-project/build-a-salon-appointment-scheduler.md b/curriculum/challenges/ukrainian/13-relational-databases/build-a-salon-appointment-scheduler-project/build-a-salon-appointment-scheduler.md
index bf72535d79..4928e420de 100644
--- a/curriculum/challenges/ukrainian/13-relational-databases/build-a-salon-appointment-scheduler-project/build-a-salon-appointment-scheduler.md
+++ b/curriculum/challenges/ukrainian/13-relational-databases/build-a-salon-appointment-scheduler-project/build-a-salon-appointment-scheduler.md
@@ -8,7 +8,7 @@ dashedName: build-a-salon-appointment-scheduler
 
 # --description--
 
-This is one of the required projects to earn your certification. For this project, you will create an interactive Bash program that uses PostgreSQL to track the customers and appointments for your salon.
+Цей проєкт потрібно виконати, щоб отримати сертифікацію. У цьому проєкті ви створите інтерактивну програму Bash, яка використовує PostgreSQL, щоб відстежувати клієнтів і записи в салоні.
 
 # --instructions--
 
diff --git a/curriculum/challenges/ukrainian/13-relational-databases/build-a-world-cup-database-project/build-a-world-cup-database.md b/curriculum/challenges/ukrainian/13-relational-databases/build-a-world-cup-database-project/build-a-world-cup-database.md
index 5f939aeb40..f6266d0a57 100644
--- a/curriculum/challenges/ukrainian/13-relational-databases/build-a-world-cup-database-project/build-a-world-cup-database.md
+++ b/curriculum/challenges/ukrainian/13-relational-databases/build-a-world-cup-database-project/build-a-world-cup-database.md
@@ -8,7 +8,7 @@ dashedName: build-a-world-cup-database
 
 # --description--
 
-This is one of the required projects to earn your certification. For this project, you will create a Bash script that enters information from World Cup games into PostgreSQL, then query the database for useful statistics.
+Цей проєкт потрібно виконати, щоб отримати сертифікацію. У цьому проєкті ви створите скрипт Bash, який вводить інформацію з ігор чемпіонату світу в PostgreSQL, а потім запитує базу даних для отримання статистики.
 
 # --instructions--
 
diff --git a/curriculum/challenges/ukrainian/13-relational-databases/learn-sql-by-building-a-student-database-part-1/build-a-student-database-part-1.md b/curriculum/challenges/ukrainian/13-relational-databases/learn-sql-by-building-a-student-database-part-1/build-a-student-database-part-1.md
index 8f78455890..94cd51e2b0 100644
--- a/curriculum/challenges/ukrainian/13-relational-databases/learn-sql-by-building-a-student-database-part-1/build-a-student-database-part-1.md
+++ b/curriculum/challenges/ukrainian/13-relational-databases/learn-sql-by-building-a-student-database-part-1/build-a-student-database-part-1.md
@@ -1,6 +1,6 @@
 ---
 id: 602da0c222201c65d2a019f5
-title: "Build a Student Database: Part 1"
+title: "Створіть базу даних студентів: частина 1"
 challengeType: 12
 url: freeCodeCamp/learn-sql-by-building-a-student-database-part-1
 dashedName: build-a-student-database-part-1
@@ -8,7 +8,7 @@ dashedName: build-a-student-database-part-1
 
 # --description--
 
-In this 140-lesson course, you will create a Bash script that uses SQL to enter information about your computer science students into PostgreSQL.
+У цьому курсі зі 140 уроків ви створите скрипт Bash, який використовує SQL для введення інформації про студентів з інформатики в PostgreSQL.
 
 # --instructions--
 
diff --git a/curriculum/challenges/ukrainian/13-relational-databases/learn-sql-by-building-a-student-database-part-2/build-a-student-database-part-2.md b/curriculum/challenges/ukrainian/13-relational-databases/learn-sql-by-building-a-student-database-part-2/build-a-student-database-part-2.md
index b19bf170bc..221e57ff8a 100644
--- a/curriculum/challenges/ukrainian/13-relational-databases/learn-sql-by-building-a-student-database-part-2/build-a-student-database-part-2.md
+++ b/curriculum/challenges/ukrainian/13-relational-databases/learn-sql-by-building-a-student-database-part-2/build-a-student-database-part-2.md
@@ -1,6 +1,6 @@
 ---
 id: 618590adb0730ca724e37672
-title: "Build a Student Database: Part 2"
+title: "Створіть базу даних студентів: частина 2"
 challengeType: 12
 url: freeCodeCamp/learn-sql-by-building-a-student-database-part-2
 dashedName: build-a-student-database-part-2
@@ -8,7 +8,7 @@ dashedName: build-a-student-database-part-2
 
 # --description--
 
-In this 140-lesson course, you will complete your student database while diving deeper into SQL commands.
+У цьому курсі зі 140 уроків ви завершите базу даних студентів, глибше занурившись в команди SQL.
 
 # --instructions--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
index ee3cf0f07b..7d5e5608d1 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
@@ -12,7 +12,7 @@ dashedName: build-a-product-landing-page
 
 **Історія користувача:**
 
-1. Your product landing page should have a `header` element with a corresponding `id="header"`
+1. Посадкова сторінка продукту повинна містити елемент `header` з відповідним `id="header"`
 1. Можна побачити зображення в межах елемента `header` з відповідним `id="header-img"` (на місце зображення чудово підійде логотип)
 1. В межах елемента `#header` видно елемент `nav` з відповідним `id="nav-bar"`
 1. Можна побачити принаймні три активні елементи всередині елемента `nav`, кожен з класом `nav-link`
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
index 8085095b25..3ca57c0110 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
@@ -12,7 +12,7 @@ dashedName: build-a-survey-form
 
 **Історія користувача:**
 
-1. You should have a page title in an `h1` element with an `id` of `title`
+1. Ви повинні мати назву сторінки в елементі `h1` з `id` зі значенням `title`
 1. Ви повинні мати коротке роз'яснення в елементі `p` з `id` зі значенням `description`
 1. Ви повинні мати елемент `form` з `id` зі значенням `survey-form`
 1. В елементі форми вам **потрібно** ввести своє ім'я в полі `input`, яке має `id` зі значенням `name` та `type` зі значенням `text`
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md
index 60874f5a95..9cd83b6e45 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md
@@ -7,7 +7,7 @@ dashedName: step-18
 
 # --description--
 
-To be able to navigate within the page, give each anchor element an `href` corresponding to the `id` of the `h2` elements.
+Для можливості навігації в межах сторінки, кожному елементу посилання надайте `href`, що відповідає `id` елементів `h2`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md
index 30340033d3..065b058203 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md
@@ -7,7 +7,7 @@ dashedName: step-2
 
 # --description--
 
-Вкладіть елемент `head` в елемент `html`. Just after the `head` element, add a `body` element.
+Вкладіть елемент `head` в елемент `html`. Відразу після елемента `head` додайте елемент `body`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md
index 83641fc42c..c23fa53f4c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md
@@ -7,7 +7,7 @@ dashedName: step-47
 
 # --description--
 
-You may already be familiar with decimal, or base 10 values, which go from 0 - 9. Hexadecimal, or base 16 values, go from 0 - 9, then A - F:
+Мабуть, ви вже знайомі з десятковими значеннями, або значеннями з основою 10, які йдуть від 0 до 9. Шістнадцяткові значення, або значення з основою 16, йдуть від 0 до 9, потім від A до F:
 
 ```js
 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md
index d833c2ccd0..66597f0bc1 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md
@@ -7,7 +7,7 @@ dashedName: step-69
 
 # --description--
 
-And as the third color argument, pass in the `hsl` function with the values `240` for hue, `56%` for saturation, and `42%` for lightness.
+І як третій аргумент, вкажіть функцію `hsl` зі значеннями `240` для відтінку, `56%` для насиченості та `42%` для освітленості.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md
index 5d0c11997e..f4fa363d0f 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md
@@ -7,7 +7,7 @@ dashedName: step-81
 
 # --description--
 
-Your border should be visible now. If no color is set, black is used by default.
+Тепер ви можете побачити кордон. Якщо колір не встановлено, за замовчуванням використовується чорний.
 
 Але щоб зробити ваш код читабельнішим, краще чітко встановити колір кордону.
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
index 7bd0e45152..25f27220a4 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
+Flexbox — це одновимірний макет CSS, який може керувати тим, як елементи розміщуються та вирівнюються всередині контейнера.
 
 Щоб використати його, надайте елементу властивість `display` зі значенням `flex`. Це зробить елемент <em>гнучким контейнером</em>. Будь-які прямі дочірні елементи гнучкого контейнера називаються <em>гнучкими елементами</em>.
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
index a43c505c67..1a3b4b77ae 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
@@ -8,7 +8,7 @@ dashedName: step-16
 # --description--
 
 
-The `flex-wrap` property determines how your flex items behave when the flex container is too small. Setting it to `wrap` will allow the items to wrap to the next row or column. `nowrap` (default) will prevent your items from wrapping and shrink them if needed.
+Властивість `flex-wrap` визначає як поводяться гнучкі елементи, якщо гнучкий контейнер замалий. Якщо встановити значення `wrap`, елементи зможуть переноситися до наступного рядка чи стовпця. `nowrap` (за замовчуванням) запобігає обгортанню елементів та зменшує їх, якщо потрібно.
 
 
 Зробіть так, щоб ваші гнучкі елементи переходили до наступного рядка, коли в них закінчується місце.
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md
index 610f1acc5f..421a24128a 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md
@@ -7,7 +7,7 @@ dashedName: step-15
 
 # --description--
 
-Below your `blockquote` element, add another `p` element with the following text:
+Під елементом `blockquote` додайте ще один елемент `p` з таким текстом:
 
 ```markup
 No more walls of explanatory text. No more walls of tests. Just one test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md
index 3f92c06606..cd4e584224 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md
@@ -7,7 +7,7 @@ dashedName: step-75
 
 # --description--
 
-The `place-items` property can be used to set the `align-items` and `justify-items` values at the same time. The `place-items` property takes one or two values. If one value is provided, it is used for both the `align-items` and `justify-items` properties. If two values are provided, the first value is used for the `align-items` property and the second value is used for the `justify-items` property.
+Властивість `place-items` можна використовувати, щоб одночасно встановити значення `align-items` та `justify-items`. Властивість `place-items` приймає одне або два значення. Якщо вказано одне значення, воно використовується обома властивостями `align-items` та `justify-items`. Якщо надано два значення, перше значення використовується для властивості `align-items`, а друге значення використовується для властивості `justify-items`.
 
 Надайте селектору `.image-wrapper` властивість `place-items` зі значенням `center`.
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md
index 0b2d0c6e86..d59af3fc25 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md
@@ -7,7 +7,7 @@ dashedName: step-13
 
 # --description--
 
-To create some scenery in the background, you will add two mountains.
+Щоб створити якийсь краєвид на задньому плані, ви додасте дві гори.
 
 Над елементом `.penguin` додайте `div`, що має `class` зі значенням `left-mountain`.
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md
index 00cdd9864e..2df6fe9072 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md
@@ -7,7 +7,7 @@ dashedName: step-18
 
 # --description--
 
-To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`.
+Щоб краще перекривати гору та елементи `.ground`, надайте горі `margin-top` зі значенням `100px` та елементу `.ground` надайте `margin-top` зі значенням `-58px`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md
index d502241539..a7dafe07b2 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md
@@ -7,7 +7,7 @@ dashedName: step-21
 
 # --description--
 
-Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout.
+Встановіть властивість `position` в `.back-mountain`, щоб запобігти тому, щоб вона займала місце на макеті сторінки.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md
index 46b596d270..9b30def0bb 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md
@@ -7,7 +7,7 @@ dashedName: step-48
 
 # --description--
 
-Currently, the two `.face` elements are on top of each other.
+Зараз два елементи `.face` розташовані один на одному.
 
 Виправте це, додавши `class` зі значенням `left` до першого елемента `.face` та `class` зі значенням `right` до другого елемента `.face`.
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md
index 9f4409c0ec..48bca78a54 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md
@@ -7,7 +7,7 @@ dashedName: step-62
 
 # --description--
 
-Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`.
+Розташуйте елементи `.eye-lid` на `25%` зверху та `-23%` зліва від батьків. Потім задайте всім кутам радіус `50%`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md
index eb257edb1b..e62687fac2 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md
@@ -7,7 +7,7 @@ dashedName: step-92
 
 # --description--
 
-Rotate the right arm by `45deg` counterclockwise.
+Поверніть праву руку на `45deg` проти годинникової стрілки.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md
index b6c5237a78..26d85b6ea5 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md
@@ -8,7 +8,7 @@ demoType: onLoad
 
 # --description--
 
-Welcome to the CSS Variables Skyline project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading.
+Ласкаво просимо до проєкту «Панорама CSS-змінних»! Почніть з додавання декларації `!DOCTYPE html` у верхній частині документа, щоб браузер знав, який тип документа він читає.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md
index 2b3c7c7773..8961b450b4 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md
@@ -7,7 +7,7 @@ dashedName: step-6
 
 # --description--
 
-Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements.
+Також додайте `box-sizing` зі значенням `border-box` до всього. Це зробить так, що доданий кордон не додасть розміру елементам.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md
index f2621b3104..55e2bfbf1f 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md
@@ -7,7 +7,7 @@ dashedName: step-8
 
 # --description--
 
-Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings.
+Створіть елемент `div` у `body` з класом `background-buildings`. Це буде контейнер для групи будівель.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
index 84b85d12eb..b9f9c27b45 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Now you have something that is resembling a building. You are ready to create your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the rule for the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`.
+Тепер у вас є щось, що нагадує будівлю. Ви готові створити свою першу змінну. Декларації змінних починаються з двох дефісів (`-`) та отримують ім’я і значення, ось так: `--variable-name: value;`. У правилі для класу `bb1` створіть змінну під назвою `--building-color1` та надайте їй значення `#999`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md
index f8eb7f36dc..00731ce90e 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md
@@ -7,7 +7,7 @@ dashedName: step-26
 
 # --description--
 
-Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now.
+Тепер коли ви виправили помилки та будівлі мають правильні кольори, ви можете видалити резервні значення в двох місцях, де вони використовувалися. Зробіть це зараз.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md
index 454f8eb570..cfce651b18 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md
@@ -7,7 +7,7 @@ dashedName: step-44
 
 # --description--
 
-Gradients can use as many colors as you want like this:
+Градієнти можуть використовувати скільки завгодно кольорів, ось так:
 
 ```css
 gradient-type(
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
index e9f4e4cb2c..41756ce2de 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
@@ -17,22 +17,36 @@ gradient-type(
 );
 ```
 
-Заповніть `.bb3`, використовуючи `repeating-linear-gradient`. Використайте `90deg` для напрямку, свій `building-color3` для перших двох кольорів та `window-color3` на `15%` для третього. Якщо ви не вказуєте відстань для кольору, він використовуватиме розумні значення. В цьому разі першими двома кольорами за замовчуванням будуть `0%` та `7.5%`, оскільки вони починаються з `0%`, а `7.5%` становить половину `15%`.
+Заповніть `.bb3`, використовуючи `repeating-linear-gradient`. Використайте `90deg` для напрямку, свій `building-color3` для перших двох кольорів та `window-color3` на `15%` для третього.
+
+When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`, so you do not need to set them.
 
 # --hints--
 
-Ви повинні надати `.bb3` властивість `background`, використовуючи `repeating-linear-gradient`.
+You should give `.bb3` a `background` using `repeating-linear-gradient`.
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
 ```
 
-Ви повинні використати `90deg` для напрямку в першому аргументі `repeating-linear-gradient`.
+You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`.
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
 ```
 
+You should not set the percentage for the first color.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "var(--building-color3)0%");
+```
+
+You should not set the percentage for the second color.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "var(--building-color3)7.5%");
+```
+
 Ви повинні використати `--building-color3` для перших двох кольорів.
 
 ```js
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md
index 6ca77b95c8..7dcb43a730 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md
@@ -7,7 +7,7 @@ dashedName: step-63
 
 # --description--
 
-Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`.
+Надайте новим елементам `div` такі значення `width` та `height`: `3%` та `10%` до `.bb4a`, `80%` та `5%` до `.bb4b` й `100%` та `85%` до `.bb4c`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md
index d7777adeec..7ac7161491 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md
@@ -7,7 +7,7 @@ dashedName: step-68
 
 # --description--
 
-Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building.
+Створіть нову змінну під назвою `--window-color4` в `:root` та надайте їй значення `#8cb3d9`. Це буде вторинний колір для останньої фонової будівлі.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md
index 13f338ced0..1d747dccaa 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md
@@ -7,7 +7,7 @@ dashedName: step-80
 
 # --description--
 
-When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide.
+Коли ви збільшуєте розмір лівого та правого кордону, кордон внизу розширюватиметься на ширину комбінованої ширини лівого та правого кордону. Додайте `2vw solid transparent` як значення властивостей `border-left` та `border-right` елемента `.fb1a`. Вони будуть невидимі, але це зробить кордон внизу шириною `4vw`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md
index 4f07e75e96..91cd35d175 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md
@@ -7,7 +7,7 @@ dashedName: step-87
 
 # --description--
 
-For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape.
+Додайте `border-bottom` зі значенням `10vh solid var(--building-color3)` та `border-left` й `border-right` зі значенням `1vw solid transparent` до `.fb2a`. Цього разу трюк з кордоном створить форму в вигляді трапеції.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
index dd2b71d5f6..bd69ccf4f3 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
@@ -9,7 +9,7 @@ dashedName: step-3
 
 Елемент `p` використаний для створення абзаців тексту на сайтах. Створіть елемент `p` під елементом `h2` та надайте йому такий текст:
 
-`See more cat photos in our gallery.`
+`Everyone loves cute cats online!`
 
 # --hints--
 
@@ -25,13 +25,13 @@ assert(document.querySelector('p'));
 assert(code.match(/<\/p\>/));
 ```
 
-Текстом елемента `p` має бути `See more cat photos in our gallery.` Ви або не написали текст, або маєте друкарську помилку.
+Your `p` element's text should be `Everyone loves cute cats online!` You have either omitted the text or have a typo.
 
 ```js
 const extraSpacesRemoved = document
   .querySelector('p')
   .innerText.replace(/\s+/g, ' ');
-assert(extraSpacesRemoved.match(/see more cat photos in our gallery\.?$/i));
+assert.match(extraSpacesRemoved, /everyone loves cute cats online!$/i);
 ```
 
 Елемент `p` повинен бути під елементом `h2`. Вони знаходяться в неправильному порядку.
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
index 0555afc0dd..e7b565cf96 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
@@ -49,12 +49,9 @@ assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/i));
 Коментар повинен бути над елементом `p`. Вони знаходяться в неправильному порядку.
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
-    )
+assert.match(
+  code.replace(/\s/g, ''),
+  /<!--todo:addlinktocatphotos--><p>everyonelovescutecatsonline!<\/p>/i
 );
 ```
 
@@ -69,7 +66,7 @@ assert(
     <h2>Cat Photos</h2>
 --fcc-editable-region--
 
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
index ecd5c724e8..1cea4a9712 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -55,10 +55,8 @@ assert(collection.indexOf('MAIN') < collection.indexOf('H1'));
 ```js
 const mainNode = document.querySelector('main');
 const pNode = document.querySelector('p');
-assert(
-  mainNode.contains(pNode) &&
-    pNode.textContent.toLowerCase().match(/see more cat photos in our gallery/)
-);
+assert.isTrue(mainNode.contains(pNode));
+assert.match(pNode.textContent.toLowerCase(), /everyone loves cute cats online!/);
 ```
 
 # --seed--
@@ -73,7 +71,7 @@ assert(
     <h1>CatPhotoApp</h1>
     <h2>Cat Photos</h2>
     <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 4fdc8b6a8d..f70b7090bb 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -74,14 +74,14 @@ Your code should have a `p` element. You have removed the `p` element from an ea
 assert(document.querySelector('p'));
 ```
 
-The text of the `p` element should be `See more cat photos in our gallery.` Do not change the text, spacing, or punctuation of the `p` element.
+The text of the `p` element should be `Everyone loves cute cats online!` Do not change the text, spacing, or punctuation of the `p` element.
 
 ```js
-assert(
+assert.match(
   document
     .querySelector('p')
-    .innerText.toLowerCase()
-    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
+    .innerText.toLowerCase(),
+    /everyone\s+loves\s+cute\s+cats\s+online!$/
 );
 ```
 
@@ -98,12 +98,12 @@ assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-    <p>See more cat photos in our gallery.</p>
+    <p>Everyone loves cute cats online!</p>
     </main>
 --fcc-editable-region--
   </body>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
index fe70b5a8b0..93f6ecd918 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -52,7 +52,7 @@ assert(collection.indexOf('P') < collection.indexOf('IMG'));
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
     </main>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
index cc55b1391f..62e871de7e 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
@@ -36,19 +36,19 @@ assert(document.querySelector('img').src);
 Атрибут `src` вашого елемента `img` повинен мати значення '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. Ви або не написали URL-адресу, або маєте друкарську помилку. Важливо, з якої літери написана URL-адреса (з великої чи малої).
 
 ```js
-assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
+assert.strictEqual(document.querySelector('img').src, 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
 ```
 
 Хоча ви встановили атрибут `src` елемента `img` як правильну URL-адресу, краще завжди писати значення атрибута в лапках.
 
 ```js
-assert(!/\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/);
 ```
 
 Елемент `img` має бути закритим за допомогою `>` або `/>`.
 
 ```js
-assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\1\s*\/?>/.test(code));
+assert.match(code, /<img\s+src\s*=\s*("|')\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\s*\1\s*\/?>/);
 ```
 
 # --seed--
@@ -62,7 +62,7 @@ assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img>
 --fcc-editable-region--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
index 52ecb918f6..6d8b53d804 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
@@ -54,7 +54,7 @@ assert(altText.match(/A cute orange cat lying on its back\.?$/i));
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
 --fcc-editable-region--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index efcf2b23d1..cecd428978 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -75,7 +75,7 @@ assert(
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index 6c2eef13c1..5d2064ac14 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -15,7 +15,7 @@ dashedName: step-11
 <a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>
 ```
 
-Додайте текст `link to cat pictures` до елемента посилання. Це буде текстом посилання.
+Add the anchor text `cat photos` to the anchor element. Це буде текстом посилання.
 
 # --hints--
 
@@ -31,12 +31,12 @@ assert(document.querySelector('a'));
 assert(code.match(/<\/a\>/));
 ```
 
-Текстом елемента посилання (`a`) має бути `link to cat pictures`. Переконайтеся, що розмістили текст посилання між початковим та кінцевим тегами елемента посиланння (`a`).
+Your anchor (`a`) element's text should be `cat photos`. Переконайтеся, що розмістили текст посилання між початковим та кінцевим тегами елемента посиланння (`a`).
 
 ```js
-assert(
-  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
-    'link to cat pictures'
+assert.strictEqual(
+  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' '),
+    'cat photos'
 );
 ```
 
@@ -51,7 +51,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
-      <p>See more cat photos in our gallery.</p>
+      <p>Everyone loves cute cats online!</p>
 --fcc-editable-region--
       <a href="https://freecatphotoapp.com"></a>
 --fcc-editable-region--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
index 6ebc49d2fe..c751d4719c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa2407b521be39a3de7be1
-title: Крок 14
+title: Step 15
 challengeType: 0
-dashedName: step-14
+dashedName: step-15
 ---
 
 # --description--
@@ -25,22 +25,20 @@ Your `p` element should have a nested anchor (`a`) element with the text `cat ph
 
 ```js
 const anchor = document.querySelectorAll('p > a');
-assert(
-  anchor.length &&
-    anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+assert.isNotEmpty(anchor);
+assert.strictEqual(anchor[1]?.innerText?.toLowerCase().replace(/\s+/g, ' '), 'cat photos')
 ```
 
 Елемент посилання (`a`) не має атрибута `target`. Перевірте, чи є пробіл після назви початкового тега та/або є пробіли перед усіма назвами атрибутів.
 
 ```js
-assert(document.querySelector('a').hasAttribute('target'));
+assert.isTrue(document.querySelectorAll('a')[1]?.hasAttribute('target'));
 ```
 
 The value of the `target` attribute should be `_blank`. Ви або не написали значення, або маєте друкарську помилку. Пам'ятайте, що значення атрибутів повинні бути в лапках.
 
 ```js
-assert(document.querySelector('a').getAttribute('target') === '_blank');
+assert.strictEqual(document.querySelectorAll('a')[1]?.getAttribute('target'), '_blank');
 ```
 
 # --seed--
@@ -54,6 +52,7 @@ assert(document.querySelector('a').getAttribute('target') === '_blank');
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
       <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
 --fcc-editable-region--
       <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
index d834a438b6..1355440130 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa30b9eacea3f48c6300ad
-title: Крок 15
+title: Step 17
 challengeType: 0
-dashedName: step-15
+dashedName: step-17
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert(document.querySelectorAll('a').length >= 2);
 You are missing a closing (`a`) tag after the image.
 
 ```js
-assert(document.querySelectorAll('a').length === 2);
+assert.lengthOf(document.querySelectorAll('a'), 3);
 ```
 
 Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
@@ -52,7 +52,7 @@ assert(code.match(/<\/a>/g).length >= 2);
 You should only add one closing anchor (`a`) tag. Please remove any extras.
 
 ```js
-assert(code.match(/<\/a>/g).length === 2);
+assert.lengthOf(code.match(/<\/a>/g), 3);
 ```
 
 Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
@@ -86,7 +86,7 @@ assert(document.querySelector('img').parentNode.nodeName === 'A');
     <main>
       <h1>CatPhotoApp</h1>
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
 --fcc-editable-region--
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
index cb043c8c08..61139e4f42 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa3589eacea3f48c6300ae
-title: Крок 18
+title: Step 20
 challengeType: 0
-dashedName: step-18
+dashedName: step-20
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
index 83cffc540b..ccc3e1f977 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa371beacea3f48c6300af
-title: Крок 19
+title: Step 21
 challengeType: 0
-dashedName: step-19
+dashedName: step-21
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index 14b7ed4173..5c307f1191 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfa37b9eacea3f48c6300b0
-title: Крок 20
+title: Step 22
 challengeType: 0
-dashedName: step-20
+dashedName: step-22
 ---
 
 # --description--
@@ -43,7 +43,7 @@ assert.equal(secondSectionLastElemNode?.nodeName , 'UL');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
index 3c566487cf..79fe34f90f 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb5ecbeacea3f48c6300b1
-title: Крок 21
+title: Step 23
 challengeType: 0
-dashedName: step-21
+dashedName: step-23
 ---
 
 # --description--
@@ -63,7 +63,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
index 9eaf61f99d..6352072b63 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6250eacea3f48c6300b2
-title: Крок 22
+title: Step 24
 challengeType: 0
-dashedName: step-22
+dashedName: step-24
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert.isTrue(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curricu
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
index 02741d9845..8fc782c410 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb655eeacea3f48c6300b3
-title: Крок 23
+title: Step 25
 challengeType: 0
-dashedName: step-23
+dashedName: step-25
 ---
 
 # --description--
@@ -34,11 +34,7 @@ assert.equal(document.querySelectorAll('section')?.[1]?.lastElementChild?.nodeNa
 Елемент `img` «лазанья» повинен бути вкладеним в елементі `figure`.
 
 ```js
-assert(
-  document.querySelector('figure > img') &&
-    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
-      'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
-);
+assert.strictEqual(document.querySelector('figure > img')?.src.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg');
 ```
 
 # --seed--
@@ -52,7 +48,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
index 8dc12fc87d..2dcacf06f9 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -1,8 +1,8 @@
 ---
 id: 5dfb6a35eacea3f48c6300b4
-title: Крок 24
+title: Step 26
 challengeType: 0
-dashedName: step-24
+dashedName: step-26
 ---
 
 # --description--
@@ -82,7 +82,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
index ee1aec623f..1b2c2e05f7 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d0
-title: Крок 25
+title: Step 27
 challengeType: 0
-dashedName: step-25
+dashedName: step-27
 ---
 
 # --description--
@@ -61,7 +61,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
index 25521179aa..71441d7f9e 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d1
-title: Крок 26
+title: Step 28
 challengeType: 0
-dashedName: step-26
+dashedName: step-28
 ---
 
 # --description--
@@ -55,7 +55,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
index 1786cd32c1..4be3e3f31b 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d2
-title: Крок 27
+title: Step 29
 challengeType: 0
-dashedName: step-27
+dashedName: step-29
 ---
 
 # --description--
@@ -72,7 +72,7 @@ assert([...document.querySelectorAll('ol')].length == 1);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
index 12e7f7e106..eeeda74570 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d3
-title: Крок 28
+title: Step 30
 challengeType: 0
-dashedName: step-28
+dashedName: step-30
 ---
 
 # --description--
@@ -40,7 +40,7 @@ assert.equal(document.querySelectorAll('main > section')?.[1]?.lastElementChild?
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
index 53902d625b..723cd909f2 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d4
-title: Крок 32
+title: Step 34
 challengeType: 0
-dashedName: step-32
+dashedName: step-34
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
index 2733772687..bb210791e6 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d5
-title: Крок 34
+title: Step 36
 challengeType: 0
-dashedName: step-34
+dashedName: step-36
 ---
 
 # --description--
@@ -67,7 +67,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
index 31d17cd862..aa25ca3902 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d6
-title: Крок 35
+title: Step 37
 challengeType: 0
-dashedName: step-35
+dashedName: step-37
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
index 7cb2eb0e75..2a92a7c481 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d7
-title: Крок 36
+title: Step 38
 challengeType: 0
-dashedName: step-36
+dashedName: step-38
 ---
 
 # --description--
@@ -83,7 +83,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
index 6a1d05ceea..a8a5f7d8d2 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d8
-title: Крок 37
+title: Step 39
 challengeType: 0
-dashedName: step-37
+dashedName: step-39
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.isTrue(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
index a39a4a28fc..bc7d463a79 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804d9
-title: Крок 40
+title: Step 42
 challengeType: 0
-dashedName: step-40
+dashedName: step-42
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
index b3812ae0e6..b414a655ed 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804da
-title: Крок 42
+title: Step 44
 challengeType: 0
-dashedName: step-42
+dashedName: step-44
 ---
 
 # --description--
@@ -51,7 +51,7 @@ assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
index 2fd0aa8166..f806a25e97 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804db
-title: Крок 41
+title: Step 43
 challengeType: 0
-dashedName: step-41
+dashedName: step-43
 ---
 
 # --description--
@@ -49,7 +49,7 @@ assert.strictEqual(document.querySelector('input')?.getAttribute('required'), ''
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
index 4a90b47914..490dc04ddb 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dc
-title: Крок 44
+title: Step 46
 challengeType: 0
-dashedName: step-44
+dashedName: step-46
 ---
 
 # --description--
@@ -107,7 +107,7 @@ assert.match(radioInputElem?.nextSibling?.nodeValue?.replace(/\s+/g, ' '), /\s*I
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
index 0ae9713abf..78c8cba66b 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804dd
-title: Крок 45
+title: Step 47
 challengeType: 0
-dashedName: step-45
+dashedName: step-47
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
index 8a45f6f75c..d7e2ad8724 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804de
-title: Крок 48
+title: Step 50
 challengeType: 0
-dashedName: step-48
+dashedName: step-50
 ---
 
 # --description--
@@ -68,9 +68,10 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
index db0c1c6b29..8b763b380c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804df
-title: Крок 46
+title: Step 48
 challengeType: 0
-dashedName: step-46
+dashedName: step-48
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert.match(document.querySelector('input')?.id, /^indoor$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
index cba02e682c..4f2285b00f 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e1
-title: Крок 50
+title: Step 52
 challengeType: 0
-dashedName: step-50
+dashedName: step-52
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
index 920856c981..dab851c0e7 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e2
-title: Крок 54
+title: Step 56
 challengeType: 0
-dashedName: step-54
+dashedName: step-56
 ---
 
 # --description--
@@ -76,7 +76,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
index c4dcda1567..d5fb1ab9bc 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e3
-title: Крок 58
+title: Step 60
 challengeType: 0
-dashedName: step-58
+dashedName: step-60
 ---
 
 # --description--
@@ -68,7 +68,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
index bf0689bc78..653bdbad24 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e5
-title: Крок 61
+title: Step 63
 challengeType: 0
-dashedName: step-61
+dashedName: step-63
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.isFalse(document.querySelectorAll('input[type="checkbox"]')?.[2]?.hasAttr
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
index ed4bce9c85..446a4d8955 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e7
-title: Крок 62
+title: Step 64
 challengeType: 0
-dashedName: step-62
+dashedName: step-64
 ---
 
 # --description--
@@ -48,7 +48,7 @@ assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
index 6b56bb407f..33a7bdfa85 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e8
-title: Крок 63
+title: Step 65
 challengeType: 0
-dashedName: step-63
+dashedName: step-65
 ---
 
 # --description--
@@ -23,11 +23,11 @@ assert(document.querySelector('footer') && code.match(/<\/footer>/));
 assert(document.querySelector('footer > p'));
 ```
 
-Елемент `footer` повинен мати кінцевий тег. Кінцеві теги мають `/` одразу після символу `<`.
+Your `p` element should have a closing tag. Кінцеві теги мають `/` одразу після символу `<`.
 
 ```js
 const pElemClosingTags = code.match(/<\/p\>/g);
-assert(pElemClosingTags && pElemClosingTags.length === 2);
+assert.lengthOf(pElemClosingTags, 3);
 ```
 
 Текстом елемента `p` має бути `No Copyright - freeCodeCamp.org`. Ви пропустили текст, маєте друкарську помилку, або його немає між початковим та кінцевим теґами елемента `p`.
@@ -48,7 +48,7 @@ assert.match(extraSpacesRemoved, /No Copyright - freeCodeCamp\.org$/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
index 05a9fd581d..d7287d2291 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804e9
-title: Крок 64
+title: Step 66
 challengeType: 0
-dashedName: step-64
+dashedName: step-66
 ---
 
 # --description--
@@ -21,7 +21,7 @@ assert(document.querySelectorAll('footer > p > a').length);
 
 ```js
 const aElemClosingTags = code.match(/<\/a\>/g);
-assert(aElemClosingTags && aElemClosingTags.length === 3);
+assert.lengthOf(aElemClosingTags, 4);
 ```
 
 Елемент посилання (`a`) повинен мати атрибут `href` зі значенням `https://www.freecodecamp.org`. Можливо, ви пропустили атрибут/значення або маєте друкарську помилку.
@@ -59,7 +59,7 @@ assert.match(pText, /^no copyright - freecodecamp.org$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
index 3aaff2fdb0..8bff6f9b3f 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ea
-title: Крок 65
+title: Step 67
 challengeType: 0
-dashedName: step-65
+dashedName: step-67
 ---
 
 # --description--
@@ -54,7 +54,7 @@ assert(noSpaces.match(/\<\/head\>\<body\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
index 253dbc0bec..e388117d9b 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804eb
-title: Крок 66
+title: Step 68
 challengeType: 0
-dashedName: step-66
+dashedName: step-68
 ---
 
 # --description--
@@ -56,7 +56,7 @@ assert(document.title && document.title.toLowerCase() === 'catphotoapp');
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
index 39424790ee..6c48afb975 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ec
-title: Крок 67
+title: Step 69
 challengeType: 0
-dashedName: step-67
+dashedName: step-69
 ---
 
 # --description--
@@ -44,7 +44,7 @@ assert(extraSpacesRemoved.match(/\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
index 7217f1b4ff..cbc53571cb 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
@@ -1,8 +1,8 @@
 ---
 id: 5ef9b03c81a63668521804ee
-title: Крок 68
+title: Step 70
 challengeType: 0
-dashedName: step-68
+dashedName: step-70
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\<html/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
index a65fb9d25d..7c8bf0319c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
@@ -1,8 +1,8 @@
 ---
 id: 5efada803cbd2bbdab94e332
-title: Крок 29
+title: Step 31
 challengeType: 0
-dashedName: step-29
+dashedName: step-31
 ---
 
 # --description--
@@ -42,16 +42,15 @@ assert(
 
 ```js
 const catsImg = document.querySelectorAll('figure > img')[1];
-assert(
-  catsImg &&
-    catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
+assert.strictEqual(
+  catsImg?.src?.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
 );
 ```
 
 Хоча ви встановили `src` нового зображення як правильну URL-адресу, краще завжди писати значення атрибута в лапках.
 
 ```js
-assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/);
 ```
 
 # --seed--
@@ -65,7 +64,7 @@ assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/ca
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
index 24af2330c8..bca82051d2 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae0543cbd2bbdab94e333
-title: Крок 30
+title: Step 32
 challengeType: 0
-dashedName: step-30
+dashedName: step-32
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
index 01cb6a4ee2..d17464c137 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
@@ -1,8 +1,8 @@
 ---
 id: 5efae16e3cbd2bbdab94e334
-title: Крок 31
+title: Step 33
 challengeType: 0
-dashedName: step-31
+dashedName: step-33
 ---
 
 # --description--
@@ -88,7 +88,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
index d62a890c32..b846e68ecf 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb23e70dc218d6c85f89b1
-title: Крок 38
+title: Step 40
 challengeType: 0
-dashedName: step-38
+dashedName: step-40
 ---
 
 # --description--
@@ -60,7 +60,7 @@ assert(!/\<input\s+type\s*=\s*text/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
index 80b2eeabf4..1dfd0c7585 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
@@ -1,8 +1,8 @@
 ---
 id: 5efb2c990dc218d6c85f89b2
-title: Крок 43
+title: Step 45
 challengeType: 0
-dashedName: step-43
+dashedName: step-45
 ---
 
 # --description--
@@ -57,7 +57,7 @@ assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
index 8b1f76607b..cd7b881548 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc4f528d6a74d05e68af74
-title: Крок 56
+title: Step 58
 challengeType: 0
-dashedName: step-56
+dashedName: step-58
 ---
 
 # --description--
@@ -110,7 +110,7 @@ assert.match(code, />\s+<label\s+for\s*=\s*('|")loving/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
index c6582114df..9c771a8966 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc518e8d6a74d05e68af75
-title: Крок 57
+title: Step 59
 challengeType: 0
-dashedName: step-57
+dashedName: step-59
 ---
 
 # --description--
@@ -45,7 +45,7 @@ assert.match(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
index aec8b43124..627a09cb10 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc54138d6a74d05e68af76
-title: Крок 55
+title: Step 57
 challengeType: 0
-dashedName: step-55
+dashedName: step-57
 ---
 
 # --description--
@@ -34,7 +34,7 @@ assert.match(document.querySelector('input[type="checkbox"]')?.id, /^loving$/);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
index 547d48c1a4..6c56d1dd7f 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
@@ -1,8 +1,8 @@
 ---
 id: 5efc575c8d6a74d05e68af77
-title: Крок 59
+title: Step 61
 challengeType: 0
-dashedName: step-59
+dashedName: step-61
 ---
 
 # --description--
@@ -71,7 +71,7 @@ assert.strictEqual(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
index e1a7a6bd2b..2dc33b64fe 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
@@ -1,8 +1,8 @@
 ---
 id: 5f05a1d8e233dff4a68508d8
-title: Крок 47
+title: Step 49
 challengeType: 0
-dashedName: step-47
+dashedName: step-49
 ---
 
 # --description--
@@ -92,7 +92,7 @@ assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
index 93b9853d3c..ed189063cd 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07be6ef7412fbad0c5626b
-title: Крок 16
+title: Step 18
 challengeType: 0
-dashedName: step-16
+dashedName: step-18
 ---
 
 # --description--
@@ -40,14 +40,14 @@ assert(code.match(/<\/section\s*>/i));
 assert(document.querySelector('section').parentNode.nodeName === 'MAIN');
 ```
 
-The existing `h2`, comment, `p` element, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
+The existing `h2`, comment, two `p` elements, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
 
 ```js
 const childrenOfSection = [...document.querySelector('section').childNodes];
 const foundElements = childrenOfSection.filter((child) => {
   return ['H2', 'A', 'P'].includes(child.nodeName);
 });
-assert(foundElements.length === 3);
+assert.lengthOf(foundElements, 4);
 ```
 
 Елемент `h1` не повинен бути вкладеним в елементі `section`.
@@ -65,12 +65,12 @@ assert.isFalse(includesH1);
 ```html
 <html>
   <body>
-    --fcc-editable-region--
+--fcc-editable-region--
     <main>
       <h1>CatPhotoApp</h1>
 
       <h2>Cat Photos</h2>
-      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
       <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
       <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
index 482430f542..b6126cb3c8 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07c98cdb9413cbd4b16750
-title: Крок 17
+title: Step 19
 challengeType: 0
-dashedName: step-17
+dashedName: step-19
 ---
 
 # --description--
@@ -69,7 +69,7 @@ assert(foundElems.length === 2);
 --fcc-editable-region--
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
index 8b50033d64..a3927dec68 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
@@ -1,8 +1,8 @@
 ---
 id: 5f07fb1579dc934717801375
-title: Крок 33
+title: Step 35
 challengeType: 0
-dashedName: step-33
+dashedName: step-35
 ---
 
 # --description--
@@ -62,7 +62,7 @@ assert.lengthOf(document.querySelectorAll('main > section')?.[2]?.children, 0);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
index ac2fac9ad6..d632fbfdc4 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d48e7b435f13ab6550051
-title: Крок 51
+title: Step 53
 challengeType: 0
-dashedName: step-51
+dashedName: step-53
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
index 62b921f702..1a24e821f8 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4ab1b435f13ab6550052
-title: Крок 52
+title: Step 54
 challengeType: 0
-dashedName: step-52
+dashedName: step-54
 ---
 
 # --description--
@@ -79,7 +79,7 @@ assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
index 0f3f8b7564..57757efa41 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
@@ -1,8 +1,8 @@
 ---
 id: 5f0d4d04b435f13ab6550053
-title: Крок 53
+title: Step 55
 challengeType: 0
-dashedName: step-53
+dashedName: step-55
 ---
 
 # --description--
@@ -64,7 +64,7 @@ assert(
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
index 970dca73af..08cd0b525c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a80975fc4bcae0edb3497
-title: Крок 49
+title: Step 51
 challengeType: 0
-dashedName: step-49
+dashedName: step-51
 ---
 
 # --description--
@@ -64,9 +64,10 @@ assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
       <section>
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
index 997c8f3e6b..915d30c3f0 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
@@ -1,8 +1,8 @@
 ---
 id: 5f1a89f1190aff21ae42105a
-title: Крок 60
+title: Step 62
 challengeType: 0
-dashedName: step-60
+dashedName: step-62
 ---
 
 # --description--
@@ -52,7 +52,7 @@ assert(energeticCheckbox.getAttribute('value').match(/^energetic$/));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
index 6fcddb39d1..1c7c6b6430 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
@@ -1,8 +1,8 @@
 ---
 id: 62bb4009e3458a128ff57d5d
-title: Крок 69
+title: Step 71
 challengeType: 0
-dashedName: step-69
+dashedName: step-71
 ---
 
 # --description--
@@ -58,7 +58,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
@@ -127,7 +127,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
new file mode 100644
index 0000000000..aa057f8e17
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
@@ -0,0 +1,57 @@
+---
+id: 671141d8e32fe934c26fa1be
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Add the words `See more` before the anchor element and `in our gallery` after the anchor element
+
+# --hints--
+
+You should use the existing anchor element, do not create a new one.
+
+```js
+assert.lengthOf(document.querySelectorAll('a'), 1);
+```
+
+You should have the words `See more` before the anchor element.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a>/)
+```
+
+You should have the words `in our gallery` after the anchor element.
+
+```js
+assert.match(code, /<a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+You should have `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery` in your code.
+
+```js
+assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <a href="https://freecatphotoapp.com">cat photos</a>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
new file mode 100644
index 0000000000..78aae1394e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md
@@ -0,0 +1,48 @@
+---
+id: 671141f948cbab359e74cc93
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Add `p` tags to turn `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.` into a paragraph.
+
+# --hints--
+
+You should add a `p` element around `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.`.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P);
+assert.strictEqual(P.innerText, "See more cat photos in our gallery.");
+```
+
+You should still have the anchor element inside the new paragraph.
+
+```js
+const P = document.querySelectorAll('p')[1];
+assert.exists(P.querySelector('a'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
new file mode 100644
index 0000000000..57b4139497
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -0,0 +1,57 @@
+---
+id: 671141feba228a35cefba82d
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Turn the text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+# --hints--
+
+There should be a new anchor element in the first `p` element.
+
+```js
+assert.exists(document.querySelector('p')?.querySelector('a'));
+```
+
+The anchor text should be `cute cats`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.innerText, "cute cats");
+```
+
+The `href` attrivute of the new anchor element should be `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+```js
+assert.strictEqual(document.querySelector('a')?.href, "https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg");
+```
+
+The text of the `p` element should still be `Everyone loves cute cats online!`.
+
+```js
+assert.strictEqual(document.querySelector('p')?.innerText, "Everyone loves cute cats online!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Everyone loves cute cats online!</p>
+--fcc-editable-region--
+      <p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
new file mode 100644
index 0000000000..7256f63593
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md
@@ -0,0 +1,47 @@
+---
+id: 671144cdcc01d73f7dd79dc9
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have added the link you can remove the comment.
+
+# --hints--
+
+There should not be any comment in your code.
+
+```js
+assert.notMatch(code, /<!--/);
+assert.notMatch(code, /-->/);
+```
+
+The text `TODO: Add link to cat photos` should not be present anymore.
+
+```js
+assert.notMatch(code, /TODO:?/i)
+assert.notMatch(code, /Add\s*link\s*to\s*cat\s*photos/i)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+--fcc-editable-region--
+      <!-- TODO: Add link to cat photos -->
+      <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
+      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
index 862a348c4c..ae83d333fd 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
@@ -1,8 +1,8 @@
 ---
 id: 7cf9b03d81a65668421804c3
-title: Крок 39
+title: Step 41
 challengeType: 0
-dashedName: step-39
+dashedName: step-41
 ---
 
 # --description--
@@ -66,7 +66,7 @@ assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
       <h1>CatPhotoApp</h1>
       <section>
         <h2>Cat Photos</h2>
-        <!-- TODO: Add link to cat photos -->
+        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md
index 0db7c2e0b3..369f113e62 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md
@@ -7,7 +7,7 @@ dashedName: step-21
 
 # --description--
 
-At this point, you should be able to submit the form. However, you might notice not much happens.
+На цьому етапі ви зможете надіслати форму. Однак ви можете помітити, що майже нічого не відбувається.
 
 Щоб зробити форму більш інтерактивною, додайте атрибут `required` до елементів `input` в першому `fieldset`.
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md
index dc72d096c2..c5fe36cd38 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md
@@ -7,7 +7,7 @@ dashedName: step-23
 
 # --description--
 
-With `type="password"` you can use the `pattern` attribute to define a regular expression that the password must match to be considered valid.
+З допомогою `type="password"` можна використати атрибут `pattern` для встановлення регулярного виразу, якому повинен відповідати пароль, щоб вважатися дійсним.
 
 Додайте атрибут `pattern` до елемента-пароля `input`, щоб відповідати певним умовам: `[a-z0-5]{8,}`
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md
index e59fc35a4b..472528889e 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md
@@ -7,7 +7,7 @@ dashedName: step-38
 
 # --description--
 
-The `:last-of-type` pseudo-selector does the exact opposite - it targets the last element that matches the selector. Create an `h1 .flex span:last-of-type` selector to target the last `span` in your flex container, and give it a `font-size` property set to `1.2em` to make it look like a header.
+Псевдоселектор `:last-of-type` робить зовсім протилежне: він націлює останній елемент, який відповідає селектору. Створіть селектор `h1 .flex span:last-of-type`, щоб націлити останній `span` в гнучкому контейнері та надайте йому властивість `font-size` зі значенням `1.2em`, щоб він виглядав як заголовок.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md
index 2287d251f0..869326b5dc 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md
@@ -7,7 +7,7 @@ dashedName: step-41
 
 # --description--
 
-Now apply some color to your `#years`. Make the text `#fff` and the background `#0a0a23`.
+Тепер додайте колір до `#years`. Встановіть текст на `#fff`, а фон на `#0a0a23`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md
index 145dba2dc0..1389a1bd51 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md
@@ -7,7 +7,7 @@ dashedName: step-62
 
 # --description--
 
-Select the `th` elements within your `tr.data` elements. Align the text to the left, and give them a top padding of `0.3rem` and a left padding of `0.5rem`.
+Виберіть елементи `th` в межах елементів `tr.data`. Вирівняйте текст за лівим краєм та надайте їм верхній відступ зі значенням `0.3rem` та лівий відступ зі значенням `0.5rem`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md
index e800cd9b92..0c57eb8835 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md
@@ -7,7 +7,7 @@ dashedName: step-5
 
 # --description--
 
-Within your `.keys` element, add seven `div` elements. Give them all the class `key`.
+В межах елементу `.keys` додайте сім елементів `div`. Надайте їм клас `key`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md
index 071d6fc8f8..668408b373 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md
@@ -7,7 +7,7 @@ dashedName: step-11
 
 # --description--
 
-Every painting needs a frame.
+Кожній картині потрібна рамка.
 
 Обгорніть елемент `.canvas` в інший `div`. Надайте цьому `div` клас `frame`.
 # --hints--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md
index 9b0768f967..c4710edf61 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md
@@ -7,7 +7,7 @@ dashedName: step-6
 
 # --description--
 
-The font is a bit small. Створіть селектор `html` та встановіть розмір шрифту на `16px`.
+Шрифт трохи замалий. Створіть селектор `html` та встановіть розмір шрифту на `16px`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md
index 2aec7b467a..cd2c25dd66 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md
@@ -7,7 +7,7 @@ dashedName: step-25
 
 # --description--
 
-Now update your `h1` selector to be `header h1` to specifically target your `h1` element within your new `header`.
+Тепер оновіть селектор `h1` на `header h1`, щоб конкретно націлити елемент `h1` в новому `header`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
index a02fb0a809..48f37a3824 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-introduction-to-flexbox/introduction-flexbox-lesson-g.md
@@ -1,43 +1,43 @@
 ---
 id: 6571c34568e4b3b17d3957f8
-title: Introduction to Flexbox Lesson G
+title: Вступ до гнучкого контейнера. Урок №7
 challengeType: 15
 dashedName: introduction-flexbox-lesson-g
 ---
 
 # --description--
 
-`flex-shrink` is similar to `flex-grow`, but sets the "shrink factor" of a flex item. `flex-shrink` only ends up being applied if the size of all flex items is larger than their parent container. For example, if our 3 divs from above had a width declaration like: `width: 100px`, and `.flex-container` was smaller than `300px`, our divs would have to shrink to fit.
+Властивість `flex-shrink` схожа до `flex-grow`, але встановлює «коефіцієнт стиснення» гнучкого предмета. `flex-shrink` застосовується лише в тому випадку, коли розмір всіх гнучких предметів більший за їхній батьківський контейнер. Наприклад, якби три елементи div мали оголошення ширини `width: 100px`, а значення `.flex-container` було меншим за `300px`, то елементам div потрібно було б стиснутись, щоб поміститись.
 
-The default shrink factor is `flex-shrink: 1`, which means all items will shrink evenly. If you do not want an item to shrink then you can specify `flex-shrink: 0;`. You can also specify higher numbers to make certain items shrink at a higher rate than normal.
+Коефіцієнтом стиснення за замовчуванням є `flex-shrink: 1`, тобто всі предмети стискаються рівномірно. Якщо ви не хочете, щоб предмет стискався, вкажіть `flex-shrink: 0;`. Ви можете вказати більше значення, щоб змусити певні предмети стискатися більше, ніж за звичайних значень.
 
-Here's an example. If you shrink your browser window you'll notice that `.two` never gets smaller than the given width of `250px`, even though the `flex-grow` rule would otherwise specify that each element should be equally sized.
+Ось приклад. Якщо зменшити вікно браузера, ви помітите, що `.two` ніколи не буде меншим за задану ширину `250px`, навіть якщо правило `flex-grow` вказує, що елементи мають бути однакового розміру.
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&amp;default-tab=html%2Cresult&amp;slug-hash=JjJXZVz&amp;editable=true&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
 
-An important implication to notice here is that when you specify `flex-grow` or `flex-shrink`, flex items do not necessarily respect your given values for `width`. In the above example, all 3 divs are given a `width` of `250px`, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren’t expecting it.
+Важливо звернути увагу: якщо ви вказали `flex-grow` або `flex-shrink`, то не факт, що гнучкі предмети дотримаються заданих значень `width`. У прикладі вище всі 3 елементи div мають `width` зі значенням `250px`, але якщо їхній батьківський контейнер достатньо великий, вони збільшуються, щоб заповнити його. А якщо батьківський контейнер замалий, вони за замовчуванням зменшуються, щоб поміститись. Це не помилка, але може збити з пантелику, якщо ви цього не знаєте.
 
 # --questions--
 
 ## --text--
 
-What is the default behavior of `flex-shrink` when applied to flex items?
+Яка поведінка властивості `flex-shrink` за замовчуванням, якщо застосувати її до гнучких предметів?
 
 ## --answers--
 
-It prevents any item from shrinking.
+Вона заважає будь-якому предмету стискатися.
 
 ---
 
-It makes all items shrink at an equal rate.
+Вона стискає предмети відносно решти.
 
 ---
 
-It causes only specific items to shrink.
+Вона робить так, що стискаються лише певні предмети.
 
 ---
 
-It enlarges the items' sizes equally.
+Вона однаково збільшує розміри предметів.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
index b0555f4436..8938d99f7c 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-b.md
@@ -1,15 +1,15 @@
 ---
 id: 661e27568602567c118451d2
-title: Learn Arrays and Loops Lesson B
+title: Вивчіть масиви та цикли. Урок №2
 challengeType: 15
 dashedName: learn-arrays-and-loops-lesson-b
 ---
 
 # --description--
 
-To access the elements of an array, you can use the index number. The index number starts from 0, so the first element of an array is at index 0, the second element is at index 1, and so on.
+Щоб отримати елементи масиву, можна використати індекс. Індекси починаються з 0, тому перший елемент масиву розташований за індексом 0, другий — за індексом 1 і так далі.
 
-For example, to access the first element of the `fruits` array, you can use the following code:
+Наприклад, щоб отримати перший елемент масиву `fruits`, можна використати такий код:
 
 ```javascript
 const fruits = ['apple', 'banana', 'orange'];
@@ -17,14 +17,14 @@ console.log(fruits[0]); // Output: apple
 console.log(fruits[2]); // Output: orange
 ```
 
-If the index is out of range, JavaScript will return `undefined`. Meaning that if you try to access `fruits[3]` in the above example, it will return `undefined`.
+Якщо індекс поза діапазоном, JavaScript поверне `undefined`. Якби ви спробували отримати `fruits[3]` у прикладі вище, він би повернув `undefined`.
 
 
 # --questions--
 
 ## --text--
 
-What is the element at the fourth index of the `fruits` array?
+Який елемент розташований за четвертим індексом в масиві `fruits`?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
index c939560e28..5679b45655 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-arrays-and-loops/learn-arrays-and-loops-lesson-g.md
@@ -1,13 +1,13 @@
 ---
 id: 661e275a8602567c118451d7
-title: Learn Arrays and Loops Lesson G
+title: Вивчіть масиви та цикли. Урок №7
 challengeType: 15
 dashedName: learn-arrays-and-loops-lesson-g
 ---
 
 # --description--
 
-Now that you know about the most common ways to iterate over values and arrays, there are a few more ways to iterate over arrays. Arrays have a built-in method called `map()`, which is used to create a new array by applying a function to each element of the original array. The `map()` method does not change the original array. The syntax of the `map()` method is as follows:
+Ви вже знаєте про найпоширеніші способи ітерувати над значеннями та масивами, тому розглянемо й інші способи ітерації над масивами. Масиви мають вбудований метод під назвою `map()`, який використовують для створення нового масиву, застосовуючи функцію до кожного елемента вхідного масиву. Метод `map()` не змінює вхідний масив. Синтаксис методу `map()` такий:
 
 ```javascript
 const array = [1, 2, 3, 4, 5];
@@ -19,13 +19,13 @@ const newArray = array.map((arrayValue) => {
 console.log(newArray); // Output: [2, 4, 6, 8, 10]
 ```
 
-The `map()` method creates a new array by applying the function `(arrayValue) => { return arrayValue * 2; }` to each element of the original array. This is particularly useful when you want to transform the elements of an array without changing the original array.
+Метод `map()` створює новий масив, застосовуючи функцію `(arrayValue) => { return arrayValue * 2; }` до кожного елемента вхідного масиву. Це особливо корисно, якщо потрібно змінити елементи масиву, не змінюючи вхідний масив.
 
 # --questions--
 
 ## --text--
 
-What will be the output of the following JavaScript code snippet?
+Яким буде вивід даного фрагменту коду JavaScript?
 
 ```javascript
 const numbers = [1, 2, 3, 4, 5];
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
index b513da400d..79c4a4f1af 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-block-and-inline/learn-block-and-inline-lesson-i.md
@@ -1,31 +1,31 @@
 ---
 id: 65704484e7b02272663824e7
-title: Learn Block and Inline Lesson I
+title: Блокові та рядкові елементи. Урок №9
 challengeType: 15
 dashedName: learn-block-and-inline-lesson-i
 ---
 
 # --description--
 
-You can't talk about `block` and `inline` elements without discussing `div`s and `span`s. All the other HTML elements you have encountered so far give meaning to their content. For example, paragraph elements tell the browser to display the text it contains as a paragraph. Strong elements tell the browser which texts within are important and so on. Yet, `div`s and `span`s give no particular meaning to their content. They are just generic boxes that can contain anything.
+Про блокові та рядкові елементи неможливо говорити, не згадавши елементи `div` та `span`. Всі інші елементи HTML, з якими ви стикались, надають значення своєму вмісту. Наприклад, елементи `p` повідомляють браузеру відтворювати текст у вигляді абзацу. Елементи `strong` повідомляють браузеру який текст важливий і так далі. А ось елементи `div` та `span` не надають певного значення своєму вмісту. Вони є звичайними блоками, які містять що завгодно.
 
 # --questions--
 
 ## --text--
 
-What is the primary difference of `span` and `div` elements from other elements?
+Яка основна різниця елементів `span` та `div` від інших елементів?
 
 ## --answers--
 
-Unlike specific HTML elements that carry inherent meanings, `span` and `div` elements are versatile and are primarily used for styling and layout purposes.
+На відміну від певних елементів HTML, які містять властиве значення, елементи `span` та `div` є гнучкими та здебільшого використовуються з метою стилізації та макетування.
 
 ---
 
-`span` and `div` elements do not impart any specific semantic meaning to the content they contain, unlike other HTML elements such as paragraphs or headings.
+Елементи `span` та `div` не передають семантичного значення вмісту на відміну від інших елементів HTML, як-от абзаци та заголовки.
 
 ---
 
-`span` and `div` elements are generic containers that allow developers to apply CSS styles and structure content without any particular semantic significance.
+Елементи `span` та `div` є загальними контейнерами, які дозволяють розробникам застосувати стилі CSS та структурувати вміст без будь-якого семантичного значення.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations-projects/css-foundations-exercise-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations-projects/css-foundations-exercise-e.md
index 1f1a60542e..6e1a2dc93d 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations-projects/css-foundations-exercise-e.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations-projects/css-foundations-exercise-e.md
@@ -1,24 +1,24 @@
 ---
 id: 63ee3ff8381756f9716727f3
-title: CSS Foundations Exercise E
+title: Основи CSS. Вправа №5
 challengeType: 14
 dashedName: css-foundations-exercise-e
 ---
 
 # --description--
 
-Understanding how combinators work can become a lot easier when you start playing around with them and see what exactly is affected by them versus what isn't.
+Роботу комбінаторів простіше зрозуміти, як тільки ви почнете працювати з ними та побачите, на що саме вони впливають.
 
-The goal of this exercise is to apply styles to elements that are descendants of another element, while leaving elements that aren't descendants of that element unstyled.
+Мета цієї вправи — застосувати стилі до елементів, які є нащадками іншого елемента, тим часом залишаючи без стилю елементи, які не є нащадками цього елемента.
 
-1. You should see a `yellow` background for `p` elements that are descendants of the `div` element.
-1. You should see a text color of `red` for elements that are descendants of the `div` element.
-1. You should see a font size of `20px` for elements that are descendants of the `div` element.
-1. You should center align text for elements that are descendants of the `div` element.
+1. Ви повинні бачити фон зі значенням `yellow` для елементів `p`, які є нащадками елемента `div`.
+1. Ви повинні бачити колір тексту зі значенням `red` для елементів, які є нащадками елемента `div`.
+1. Ви повинні бачити розмір шрифту зі значенням `20px` для елементів, які є нащадками елемента `div`.
+1. Ви повинні вирівняти за центром текст елементів, які є нащадками елемента `div`.
 
 # --hints--
 
-You should have a background color of `yellow` on your descendants.
+Нащадки повинні мати колір фону зі значенням `yellow`.
 
 ```js
 const styleOne = new __helpers.CSSHelp(document).getStyle('.container .text');
@@ -40,7 +40,7 @@ assert(getCorrectStyle()?.backgroundColor === 'yellow');
 
 ```
 
-You should have a text color of `red` on your descendants.
+Нащадки повинні мати колір тексту зі значенням `red`.
 
 ```js
 const styleOne = new __helpers.CSSHelp(document).getStyle('.container .text');
@@ -62,7 +62,7 @@ assert(getCorrectStyle()?.color === 'red');
 
 ```
 
-You should have a font size of `20px` on your descendants.
+Нащадки повинні мати розмір шрифту зі значенням `20px`.
 
 ```js
 const styleOne = new __helpers.CSSHelp(document).getStyle('.container .text');
@@ -84,7 +84,7 @@ assert(getCorrectStyle()?.fontSize === '20px');
 
 ```
 
-You should center align the text on your descendants.
+Вирівняйте текст нащадків за центром.
 
 ```js
 const styleOne = new __helpers.CSSHelp(document).getStyle('.container .text');
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
index d59be3524a..b13e2d84ad 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-c.md
@@ -1,14 +1,14 @@
 ---
 id: 63ee352b0d8d4841c3a7091c
 videoId: LGQuIIv2RVA
-title: CSS Foundations Lesson C
+title: Основи CSS. Урок №3
 challengeType: 15
 dashedName: css-foundations-lesson-c
 ---
 
 # --description--
 
-What if you have two groups of elements that share some of their style declarations?
+Що робити, якщо у вас є дві групи елементів, які мають спільні оголошення стилів?
 
 ```css
 .read {
@@ -24,7 +24,7 @@ What if you have two groups of elements that share some of their style declarati
 }
 ```
 
-Both our `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, you can group these two selectors together as a comma-separated list:
+Обидва селектори (`.read` та `.unread`) мають спільні оголошення `color: white;` та `background-color: black;`, але окрім них вони мають декілька власних унікальних оголошень. Щоб зменшити повторення, ви можете згрупувати ці два селектори разом у вигляді списку, розділеного комами:
 
 ```css
 .read,
@@ -42,13 +42,13 @@ Both our `.read` and `.unread` selectors share the `color: white;` and `backgrou
 }
 ```
 
-Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the `color` or `background-color` for both classes at once.
+Обидва наведені вище приклади (з групуванням і без нього) матимуть однаковий результат, але другий приклад зменшує повтори оголошень та полегшує одночасне редагування `color` чи `background-color` для обох класів.
 
 # --questions--
 
 ## --text--
 
-How would you apply a single rule to two different selectors, `.red-box` and `.yellow-box`?
+Як би ви застосували одне правило до двох різних селекторів: `.red-box` та `.yellow-box`?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
index f5c150c213..5765ce1f24 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-d.md
@@ -48,7 +48,7 @@ dashedName: css-foundations-lesson-d
 }
 ```
 
-Ви не зможете об’єднати декілька селекторів типу, оскільки елемент може мати лише один тип. For example, chaining two type selectors like `div` and `p` would give us the selector `divp`, which wouldn’t work since the selector would try to find a literal `<divp>` element, which doesn’t exist.
+Ви не зможете об’єднати декілька селекторів типу, оскільки елемент може мати лише один тип. Наприклад, якщо об’єднати два селектори (`div` та `p`), ми отримаємо селектор `divp`, який не працюватиме, оскільки шукатиме елемент `<divp>`, якого не існує.
 
 # --questions--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
index b742e33977..a857079474 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-f.md
@@ -10,9 +10,9 @@ dashedName: css-foundations-lesson-f
 
 Ви вже багато чого навчились. Лишилось дізнатись, як додати CSS до HTML. Для цього існує три методи.
 
-External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a `<link>` element (which is a void element and doesn't require a closing tag):
+Зовнішній CSS — найпопулярніший метод, який передбачає створення окремого файлу для CSS, що розміщується всередині початкового та кінцевого тегів `<head>` з елементом `<link>` (який є порожнім елементом та не вимагає кінцевого тегу):
 
-First, you add a void element `<link>` tag inside of the opening and closing `<head>` tags of the HTML file. Атрибут `href` — це розташування файлу CSS: абсолютна URL-адреса або URL-адреса відносно розташування файлу HTML (залежно від того, що ви використовуєте). У прикладі вище ми припускаємо, що обидва файли розміщені в одному каталозі. Атрибут `rel` є обов’язковим, оскільки він вказує зв’язок між файлом HTML та пов’язаним файлом.
+Спочатку додайте тег порожнього елементу `<link>` всередині початкового та кінцевого тегів `<head>` файлу HTML. Атрибут `href` — це розташування файлу CSS: абсолютна URL-адреса або URL-адреса відносно розташування файлу HTML (залежно від того, що ви використовуєте). У прикладі вище ми припускаємо, що обидва файли розміщені в одному каталозі. Атрибут `rel` є обов’язковим, оскільки він вказує зв’язок між файлом HTML та пов’язаним файлом.
 
 Всередині щойно створеного файлу `styles.css` наявний селектор (`div` та `p`), після якого розташовані початкові та кінцеві фігурні дужки, що створює «блок оголошення». Будь-які оголошення потрібно розміщувати всередині блоку оголошень. Першим оголошенням є `color: white;` (властивість `color` та значення `white`), а іншим оголошенням є `background-color: black;`.
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
index 8113d074b9..1b0e640db5 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-foundations/css-foundations-lesson-h.md
@@ -1,14 +1,14 @@
 ---
 id: 63ee354c0d8d4841c3a70921
 videoId: LGQuIIv2RVA
-title: CSS Foundations Lesson H
+title: Основи CSS. Урок №8
 challengeType: 15
 dashedName: css-foundations-lesson-h
 ---
 
 # --description--
 
-Inline `CSS` makes it possible to add styles directly to `HTML` elements, though this method isn’t as recommended:
+Вбудований `CSS` дозволяє додавати стилі одразу до елементів `HTML`, хоча цей метод нерекомендований:
 
 ```html
 <body>
@@ -16,29 +16,29 @@ Inline `CSS` makes it possible to add styles directly to `HTML` elements, though
 </body>
 ```
 
-The first thing to note is that there aren't any selectors here, since the styles are being added directly to the opening `<div>` tag itself. Next, you have the `style` attribute, with its value within the pair of quotation marks being the declarations.
+Потрібно зазначити, що тут немає селекторів, оскільки стилі додаються одразу до початкового тегу `<div>`. Ви маєте атрибут `style`, значення якого всередині пари лапок є оголошеннями.
 
-If you need to add a unique style for a single element, this method can work just fine. Generally, though, this isn’t exactly a recommended way for adding CSS to HTML for a few reasons:
+Якщо вам потрібно додати унікальний стиль для одного елементу, цей метод підходить. Однак це нерекомендований спосіб додавання CSS до HTML через декілька причин:
 
-It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated. If you want many elements to have the same style, you would have to copy + paste the same style to each individual element, causing lots of unnecessary repetition and more bloat. Any inline CSS will override the other two methods, which can cause unexpected results. (While you won’t dive into it here, this can actually be taken advantage of).
+Все може швидко стати досить заплутаним, як тільки ви почнете додавати багато оголошень до одного елемента, забруднюючи свій файл HTML. Якщо ви хочете надати багатьом елементам одного стилю, ви копіюватимете та вставлятимете їх по декілька разів, що призведе до непотрібного повторення. Будь-який вбудований CSS перекриватиме інші два методи, що може призвести до несподіваних результатів. (Ми не будемо вдаватися в деталі, але насправді це можна використати на користь).
 
 # --questions--
 
 ## --text--
 
-Which of the following is the main disadvantage of using inline CSS?
+Що з переліченого є головним недоліком вбудованого CSS?
 
 ## --answers--
 
-It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
+Все може швидко стати досить заплутаним, як тільки ви почнете додавати багато оголошень до одного елемента, забруднюючи свій файл HTML.
 
 ---
 
-It requires using selectors, which can be complicated for beginners.
+Вбудований CSS вимагає використання селекторів, що може бути складним для початківців.
 
 ---
 
-Any inline CSS will override the other two methods (internal and external), which can cause unexpected results.
+Будь-який вбудований CSS перекриватиме інші два методи (внутрішній та зовнішній), що може призвести до несподіваних результатів.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
index 413ebfaa11..3f472ea29d 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-css-specificity/the-cascade-of-css-lesson-f.md
@@ -34,9 +34,9 @@ dashedName: the-cascade-of-css-lesson-f
 
 Цей приклад показує те саме. Хоча правило №2 використовує дочірній комбінатор (`>`), значення специфічності не змінюється. Обидва правила мають два класи, тому специфічність однакова.
 
-*Note:* Not everything adds to specificity
+*Примітка:* не все впливає на специфічність
 
-When comparing selectors, you may come across special symbols for the universal selector (`*`) as well as combinators (`+`, `~`, `>`, and an empty space). Такі символи не додають жодної специфічності.
+Порівнюючи селектори, ви можете наткнутись на спеціальні символи універсального селектора (`*`), а також комбінаторів (`+`, `~`, `>` й пробіл). Такі символи не додають жодної специфічності.
 
 # --questions--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
index 8c443212f9..2f47071ac5 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-lesson-i.md
@@ -1,15 +1,15 @@
 ---
 id: 65e97280484dd50f720e6fee
-title: Learn Data Types and Conditionals Lesson I
+title: Вивчіть типи даних та умови. Урок №9
 challengeType: 15
 dashedName: learn-data-types-and-conditionals-lesson-i
 ---
 
 # --description--
 
-In the last example, you had two choices `if` or `else`. But what if you want to have more than two choices? You can use the `else if` statement to add more conditions to our code. The `else if` statement allows us to check multiple conditions and execute a block of code when the first condition is true. If the first condition is false, it will check the next condition and so on. If none of the conditions are true, the `else` block will be executed.
+У попередньому прикладі було два варіанти: `if` або `else`. А якщо ви хочете більше? Щоб додати більше умовних інструкцій до коду, можна використати інструкцію `else if`. Інструкція `else if` дозволить перевірити декілька умов та виконає блок коду, якщо перша умова правдива. Якщо перша умова хибна, вона перевірить наступну умову і так далі. Якщо всі інструкції хибні, буде виконано блок `else`.
 
-Here is an example of the `else if` statement:
+Ось приклад інструкції `else if`:
 
 ```javascript
 let x = 5;
@@ -23,13 +23,13 @@ if (x > 10) {
 }
 ```
 
-In this example, the `x` variable is compared to the number `10` using the `>` operator. If `x` is greater than `10`, the first block of code will be executed. Otherwise, the `else if` statement will check the next condition. If `x` is greater than `5`, the second block of code will be executed. Otherwise, the `else` block will be executed.
+У цьому прикладі порівнюють змінну `x` з числом `10`, використовуючи оператор `>`. Якщо значення `x` більше за `10`, то виконується перший блок коду. В іншому випадку інструкція `else if` перевірить наступну умову. Якщо значення `x` більше за `5`, то виконується другий блок коду. В іншому випадку виконається блок `else`.
 
 # --questions--
 
 ## --text--
 
-What will be the output of the following code?
+Як буде виглядати результат виконання даного коду?
 
 ```javascript
 let x = 4;
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
index 9e28654815..5df5256a48 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-function-basics/learn-function-basics-lesson-a.md
@@ -1,13 +1,13 @@
 ---
 id: 6617a128e90de1b3fd10bd4d
-title: Learn Function Basics Lesson A
+title: Вивчіть основи функцій. Урок №1
 challengeType: 15
 dashedName: learn-function-basics-lesson-a
 ---
 
 # --description--
 
-Let’s discuss parameters and arguments in the context of the following example function:
+Обговоримо параметри та аргументи на прикладі даної функції:
 
 ```js
 function favoriteAnimal(animal) {
@@ -17,31 +17,31 @@ function favoriteAnimal(animal) {
 console.log(favoriteAnimal('Goat'));
 ```
 
-In JavaScript, parameters are the items listed between the parentheses `()` in the function declaration. Function arguments are the actual values you decide to pass to the function.
+Параметри в JavaScript — це предмети, розміщені в круглих дужках `()` в оголошенні функції. Аргументи функції — це реальні значення, передані до функції.
 
-In the example above, the function definition is written on the first line: `function favoriteAnimal(animal)`. The parameter, `animal`, is found inside the parentheses. You could just as easily replace `animal` with `pet`, `x`, or `blah`. But in this case, naming the parameter `animal` gives someone reading your code a bit of context so that they don't have to guess what `animal` may eventually contain.
+Визначення функції в прикладі вище написане в першому рядку: `function favoriteAnimal(animal)`. Параметр `animal` знаходиться в круглих дужках. `animal` можна легко замінити на `pet`, `x` або `blah`. Але в цьому випадку назва параметра `animal` надає коду певного контексту, тому читачі не зобов’язані вгадувати, що насправді міститиме `animal`.
 
 # --questions--
 
 ## --text--
 
-What does the parameter in the function `favoriteAnimal` represent in the context of JavaScript functions?
+Що представляє параметр у функції `favoriteAnimal` в контексті функцій JavaScript?
 
 ## --answers--
 
-The actual value that is used when calling the function.
+Реальне значення, яке використовується при виклику функції.
 
 ---
 
-A placeholder for the value that will be passed to the function when it is called.
+Заповнювач для значення, яке буде передано до функції при її виклику.
 
 ---
 
-The name of the function.
+Назву функції.
 
 ---
 
-The result of the function execution.
+Результат виконання функції.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
index c4df8fb496..aa00922ac7 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-b.md
@@ -1,37 +1,37 @@
 ---
 id: 637f4e1672c65bc8e73dfe1f
-title: HTML Foundations Lesson B
+title: Основи HTML. Урок №2
 challengeType: 15
 dashedName: html-foundations-lesson-b
 ---
 
 # --description--
 
-You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+Елементи можна вважати контейнерами, в яких зберігається вміст. Початкові та кінцеві теги повідомляють браузеру вміст, який містить елемент. Браузер використовує цю інформацію, щоб знати як інтерпретувати та форматувати вміст.
 
-There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as void elements or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
+Деякі елементи HTML не мають кінцевих тегів. Ці елементи часто виглядають так: `<br />` або `<img/>`, але деякі також можна використовувати без кінцевої скісної риски (наприклад, `<br>` або `<img>`). Вони відомі як порожні елементи або порожні елементи, оскільки вони не обгортають жоден вміст. З деякими ви зустрінетесь у наступних завданнях, але здебільшого ви використовуватимете і початковий, і кінцевий теги.
 
-HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
+HTML має великий список стандартних тегів, які можна використовувати для створення будь-яких елементів. Важливо використовувати правильні теги для вмісту. Правильні теги впливають на два аспекти: рейтинг сайтів у пошукових системах і їхня доступність для користувачів, які покладаються на допоміжні технології, щоб користуватися інтернетом (наприклад, читачі екрана).
 
-Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
+Використання правильних елементів для вмісту називається семантичним HTML. Про це ви дізнаєтесь пізніше.
 
 # --questions--
 
 ## --text--
 
-Why are void elements like `<br/>` or `<img>` essential in HTML?
+Чому в HTML важливі порожні елементи (наприклад, `<br/>` чи `<img>`)?
 
 ## --answers--
 
-They prevent formatting issues in HTML documents.
+Вони запобігають виникненню проблем з форматуванням в документах HTML.
 
 ---
 
-They indicate empty elements and require no closing tag.
+Вони вказують на порожні елементи і не вимагають кінцевого тегу.
 
 ---
 
-They improve website performance by reducing code complexity.
+Вони покращують ефективність вебсайту, зменшуючи складність коду.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
index b46daa3cbe..607167b754 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-foundations-lesson-h.md
@@ -1,31 +1,31 @@
 ---
 id: 637633162724a688c04636e4
-title: HTML Foundations Lesson H
+title: Основи HTML. Урок №8
 challengeType: 15
 dashedName: html-foundations-lesson-h
 ---
 
 # --description--
 
-Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
+Багато ресурсів продовжують називати HTML та CSS мовами програмування, але, якщо розібратися з технічної точки зору, це не зовсім правильно. Причина в тому, що їх використовують лише для представлення інформації. Їх не використовують для створення логіки програми. JavaScript, який ви вивчите в наступному розділі, є мовою програмування, оскільки його використовують для того, щоб вебсторінки виконували певні дії. Однак багато чого можна зробити, використовуючи лише HTML та CSS, тому вони обов’язково знадобляться. Наступні уроки нашої навчальної програми зосереджені на інструментах, які необхідно осягнути перед тим, як перейти до JavaScript.
 
 # --questions--
 
 ## --text--
 
-Why are HTML and CSS not typically classified as programming languages?
+Чому HTML та CSS зазвичай не класифікуються як мови програмування?
 
 ## --answers--
 
-They lack the ability to create webpages.
+Їм не вистачає здатності створювати вебсторінки.
 
 ---
 
-They focus on presenting information rather than programming logic.
+Вони зосереджуються на відтворенні інформації, а не логіці програмування.
 
 ---
 
-They are outdated technologies.
+Це застарілі технології.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
index 01e2988e57..652c49f7b4 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-variables-and-operators/learn-variables-and-operators-lesson-c.md
@@ -1,19 +1,19 @@
 ---
 id: 65e1957a500d930ce8ed90a6
-title: Learn Variables and Operators Lesson C
+title: Вивчіть змінні та оператори. Урок №3
 challengeType: 15
 dashedName: learn-variables-and-operators-lesson-c
 ---
 
 # --description--
 
-To declare a constant (unchanging) variable, use `const` instead of `let`:
+Щоб оголосити константну (незмінну) змінну, використайте `const`, а не `let`:
 
 ```javascript
 const myBirthday = '16-09-2003';
 ```
 
-Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error:
+Змінні, оголошені за допомогою `const`, називають «константами». Їх неможливо перепризначити. Така спроба призведе до помилки:
 
 ```javascript
 const myBirthday = '16-09-2003';
@@ -21,29 +21,29 @@ const myBirthday = '16-09-2003';
 myBirthday = '01-01-2001'; // error, can't reassign the constant!
 ```
 
-When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+Якщо програміст впевнений, що змінна ніколи не змінюватиметься, то її оголосять за допомогою `const`, тим самим гарантуючи цей факт та повідомляючи інших.
 
 # --questions--
 
 ## --text--
 
-What is the result of attempting to reassign a `const` declared variable in JavaScript?
+Що відбудеться, якщо спробувати перепризначити змінну, оголошену за допомогою `const` в JavaScript?
 
 ## --answers--
 
-The reassignment succeeds with no errors.
+Перепризначення спрацює без помилок.
 
 ---
 
-An error is thrown because `const` declared variables cannot be reassigned.
+Вискочить помилка, оскільки неможливо перепризначити змінні, оголошені за допомогою `const`.
 
 ---
 
-JavaScript silently ignores the reassignment.
+JavaScript проігнорує перепризначення.
 
 ---
 
-The variable type is automatically changed to `let`.
+Тип змінної автоматично зміниться на `let`.
 
 
 ## --video-solution--
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
index 470bc1ec1f..2ecb3ee52b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-c.md
@@ -1,50 +1,50 @@
 ---
 id: 637f703072c65bc8e73dfe34
-title: Links and Images Lesson C
+title: Посилання та зображення. Урок №3
 challengeType: 15
 dashedName: links-and-images-lesson-c
 ---
 
 # --description--
 
-To get some practice using links and images throughout this lesson you need an HTML project to work with.
+Щоб попрактикуватись з посиланнями та зображеннями, вам потрібний проєкт HTML.
 
-- Create a new directory named `odin-links-and-images`.
+- Створіть новий каталог під назвою `odin-links-and-images`.
 
-- Within that directory, create a new file named `index.html`.
+- У цьому каталозі створіть новий файл під назвою `index.html`.
 
-- Fill in the usual HTML boilerplate.
+- Заповніть звичайний шаблонний код HTML.
 
-- Finally, add the following `h1` to the `body`: `<h1>Homepage</h1>`
+- Вкінці додайте такий `h1` до `body`: `<h1>Homepage</h1>`
 
-## Anchor Elements
-To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `<a>` tag.
+## Елементи посилання
+Щоб створити посилання в HTML, використовують елемент посилання. Щоб визначити елемент посилання, потрібно обгорнути текст або інший елемент HTML, який має бути посиланням, тегом `<a>`.
 
-Add the following to the `body` of the `index.html` page you created and open it in the browser:
+Додайте такий елемент до `body` створеної сторінки `index.html` та відкрийте сторінку у браузері:
 
 ```html
 <a>click me</a>
 ```
 
-You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute.
+Можливо, ви помітили, що при натисканні на посилання нічого не відбувається. Тег посилання не знає куди переходити. Ви повинні сказати йому місце призначення. Для цього використовують атрибут HTML.
 
-An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add an `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to.
+Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині початкового тегу елемента. Зазвичай атрибут складається з двох частин: назви та значення, однак не всі атрибути вимагають значення. У нашому випадку потрібно додати атрибут `href` (hyperlink reference) до початкового тегу посилання. Значенням атрибута `href` є місце призначення, на яке потрібно направляти користувачів.
 
-Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied.
+Додайте даний атрибут `href` до створеного елемента посилання та спробуйте натиснути на нього знову. Не забудьте оновити браузер, щоб застосувати нові зміни.
 
 ```html
 <a href="https://www.theodinproject.com/about">click me</a>
 ```
 
-By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
+Будь-який текст з тегом посилання без атрибута `href` буде звичайним текстом. Якщо атрибут `href` наявний, браузер надасть тексту синього кольору та підкреслення, щоб вказати, що це посилання.
 
-It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents.
+Важливо зазначити, що теги посилання можна використовувати для будь-яких ресурсів в інтернеті, а не лише документів HTML. Ви можете направляти на відео, файли pdf, зображення та інше, але здебільшого ви направлятимете на інші документи HTML.
 
 # --questions--
 
 ## --text--
 
-What attribute tells links where to go to?
+Який атрибут повідомляє посиланню про місце призначення?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
index dd822d0253..35f0db5431 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-d.md
@@ -1,7 +1,7 @@
 ---
 id: 637f702872c65bc8e73dfe33
 videoId: ta3Oxx7Yqbo
-title: Links and Images Lesson D
+title: Посилання та зображення. Урок №4
 challengeType: 15
 dashedName: links-and-images-lesson-d
 ---
@@ -9,26 +9,26 @@ dashedName: links-and-images-lesson-d
 # --description--
 
 
-Generally, there are two kinds of links you will create:
+Загалом існує два типи посилань, які ви створюватимете:
 
-- Links to pages on other websites on the internet
+- посилання на сторінки інших вебсайтів в інтернеті;
 
-- Links to pages located on your own websites
+- посилання на сторінки власних вебсайтів.
 
 
-## Absolute Links
-Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination.
+## Абсолютні посилання
+Посилання на сторінку іншого вебсайту в інтернеті називають абсолютним посиланням. Зазвичай абсолютне посилання складається з наступних частин: `protocol://domain/path`. Абсолютне посилання завжди міститиме протокол та домен місця призначення.
 
-You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain.
+Ви вже бачили абсолютне посилання в дії. Посилання на головну сторінку проєкту Odin є абсолютним посиланням, оскільки воно містить протокол та домен.
 
 `https://www.theodinproject.com/about`
 
-## Relative Links
-Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on.
+## Відносні посилання
+Посилання на іншу сторінку власного вебсайту називають відносним посиланням. Відносне посилання не містить домену, оскільки це інша сторінка на тому ж сайті, тому назва домену буде одинаковою.
 
-Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example.
+Відносні посилання містять лише шлях файлу до іншої сторінки відносно сторінки, на яку ви направляєте. Це досить абстрактно, тому розглянемо приклад.
 
-Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it:
+У межах каталогу `odin-links-and-images` створіть ще один файл HTML під назвою `about.html` та додайте до нього такий код:
 
 ```html
 <!DOCTYPE html>
@@ -44,7 +44,7 @@ Within the `odin-links-and-images` directory, create another HTML file named `ab
 </html>
 ```
 
-Back in the `index` page, add the following anchor element to create a link to the `about` page:
+Повернемось до сторінки `index`: додайте даний елемент посилання, щоб створити посилання на сторінку `about`:
 
 ```html
 <body>
@@ -55,17 +55,17 @@ Back in the `index` page, add the following anchor element to create a link to t
 </body>
 ```
 
-Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created.
+Відкрийте файл `index.html` у браузері та натисніть на посилання, щоб перевірити, що все працює правильно. Після натискання на посилання ви маєте перейти на щойно створену сторінку `about`.
 
-This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value.
+Все працює, оскільки `index` та `about` знаходяться в одному каталозі. Це означає, що ви можете використати назву (`about.html`) як значення `href`.
 
-But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory.
+Однак зазвичай каталоги потрібно організовувати кращим способом. Зазвичай у кореневому каталозі ви б мали тільки `index.html`, а всі інші файли HTML мали власні каталоги.
 
-Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory.
+Створіть новий каталог під назвою `pages` в межах каталогу `odin-links-and-images` та перемістіть файл `about.html` до нового каталогу.
 
-Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed.
+Оновіть сторінку `index` у браузері та натисніть на посилання `about`. Зараз воно буде недійсним. Причина в тому, що змінилось розташування сторінки `about`.
 
-To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file.
+Щоб виправити це, вам просто потрібно оновити значення `href` посилання `about`, щоб включити каталог `pages/`, оскільки це нове розташування файлу `about.html` відносно файлу `index.html`.
 
 ```html
 <body>
@@ -74,9 +74,9 @@ To fix this, you just need to update the `about` link `href` value to include th
 </body>
 ```
 
-Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order.
+Оновіть сторінку `index` у браузері та спробуйте знову натиснути на посилання `about`. Зараз воно має працювати.
 
-In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory.
+У більшості випадків все працюватиме. Однак іноді ви можете натрапити на непередбачувані проблеми. Якщо додати `./` перед посиланням, проблем можна уникнути. За допомогою `./` ви вказуєте коду, що він повинен шукати файл/каталог відносно **поточного** каталогу.
 
 ```html
 <body>
@@ -87,25 +87,25 @@ In many cases, this will work just fine; however, you can still run into unexpec
 
 # --assignment--
 
-Watch Kevin Powell’s HTML File Structure video above.
+Перегляньте відео Кевіна Павелла про структуру файлів у HTML (розміщене вище).
 
 # --questions--
 
 ## --text--
 
-What is the difference between an absolute and a relative link?
+Яка різниця між абсолютним та відносним посиланням?
 
 ## --answers--
 
-An absolute link is a link to another page on the current website. A relative link is a link to another website.
+Абсолютне посилання — посилання на іншу сторінку поточного вебсайту. Відносне посилання — посилання на інший вебсайт.
 
 ---
 
-An absolute link is a link to another website. A relative link is a link another page on the current website.
+Абсолютне посилання — посилання на інший вебсайт. Відносне посилання — посилання на іншу сторінку поточного вебсайту.
 
 ---
 
-There is no difference between absolute and relative links.
+Між абсолютним та відносним посиланням немає різниці.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
index 3c70254ca6..c937b9e3f5 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-e.md
@@ -10,7 +10,7 @@ dashedName: links-and-images-lesson-e
 
 Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
 
-Щоб відтворити зображення у HTML, використовують елемент `<img>`. Unlike the other elements you have encountered, the `<img>` is a void element. Empty, void HTML elements do not need a closing tag.
+Щоб відтворити зображення у HTML, використовують елемент `<img>`. На відміну від інших елементів, які ми вже вивчили, `<img>` є порожнім елементом. Пусті порожні елементи HTML не потребують кінцевого тегу.
 
 Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів.
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
index 9265c666b0..e0ef18574a 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-f.md
@@ -9,7 +9,7 @@ dashedName: links-and-images-lesson-f
 
 Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
 
-Щоб відтворити зображення у HTML, використовують елемент `<img>`. Unlike the other elements you have encountered, the `<img>` is a void element. Empty, void HTML elements do not need a closing tag.
+Щоб відтворити зображення у HTML, використовують елемент `<img>`. На відміну від інших елементів, які ми вже вивчили, `<img>` є порожнім елементом. Пусті порожні елементи HTML не потребують кінцевого тегу.
 
 Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів.
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
index 8891eb1bbe..f1e237e662 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-g.md
@@ -9,7 +9,7 @@ dashedName: links-and-images-lesson-g
 
 Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
 
-Щоб відтворити зображення у HTML, використовують елемент `<img>`. Unlike the other elements you have encountered, the `<img>` is a void element. Empty, void HTML elements do not need a closing tag.
+Щоб відтворити зображення у HTML, використовують елемент `<img>`. На відміну від інших елементів, які ми вже вивчили, `<img>` є порожнім елементом. Пусті порожні елементи HTML не потребують кінцевого тегу.
 
 Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів.
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
index 267fbeecea..6a4dfe517c 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-links-and-images/links-and-images-lesson-h.md
@@ -9,7 +9,7 @@ dashedName: links-and-images-lesson-h
 
 Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для відтворення різних видів медіа. Найчастіше використовують елемент зображення.
 
-Щоб відтворити зображення у HTML, використовують елемент `<img>`. Unlike the other elements you have encountered, the `<img>` is a void element. Empty, void HTML elements do not need a closing tag.
+Щоб відтворити зображення у HTML, використовують елемент `<img>`. На відміну від інших елементів, які ми вже вивчили, `<img>` є порожнім елементом. Пусті порожні елементи HTML не потребують кінцевого тегу.
 
 Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів.
 
diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
index 161d2e9aa7..628eafeb5b 100644
--- a/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
+++ b/curriculum/challenges/ukrainian/16-the-odin-project/top-working-with-text/working-with-text-lesson-i.md
@@ -1,31 +1,31 @@
 ---
 id: 637f4e4672c65bc8e73dfe25
-title: Working With Text Lesson I
+title: Робота з текстом. Урок №9
 challengeType: 15
 dashedName: working-with-text-lesson-i
 ---
 
 # --description--
 
-If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
+Якщо ви хочете мати список елементів, порядок яких не має значення (наприклад, список покупок із товарами, які можна купити в будь-якому порядку), можна використати невпорядкований список.
 
-Unordered lists are created using the `<ul>` element, and each item within the list is created using the list item element `<li>`.
+Невпорядковані списки створені за допомогою елемента `<ul>`, а кожен елемент списку створений за допомогою елемента списку `<li>`.
 
-Each list item in an unordered list begins with a bullet point:
+Елементи невпорядкованого списку починаються з маркера списку:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_powjajd"></iframe>
 
-If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
+Якщо ви хочете мати список елементів, порядок яких має значення (наприклад, покроковий рецепт або 10 улюблених телешоу), можна використати впорядкований список.
 
-Ordered lists are created using the `<ol>` element. Each individual item in them is again created using the list item element `<li>`. However, each list item in an ordered list begins with a number instead:
+Впорядковані списки створені за допомогою елемента `<ol>`. Кожен елемент списку також створений за допомогою елемента списку `<li>`. Однак елементи впорядкованого списку починаються з числа:
 
-<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
+<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="Вставка CodePen" loading="lazy" id="cp_embed_yLXYvYp"></iframe>
 
 # --questions--
 
 ## --text--
 
-What HTML tag is used to create an ordered list?
+Який тег потрібно використати, щоб створити впорядкований список у HTML?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md b/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md
index fe640ea826..bcdca41604 100644
--- a/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md
+++ b/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md
@@ -1,28 +1,28 @@
 ---
 id: 63d83ffd39c73468b059cd40
-title: "Build a Graphing Calculator"
+title: "Створіть графічний калькулятор"
 challengeType: 10
 dashedName: build-a-graphing-calculator
 ---
 
 # --description--
 
-You will be <a href="https://colab.research.google.com/drive/1BHKshb67jWVVZQ9VlzQOpdFA-gzJkSUF?usp=sharing" target="_blank" rel="noopener noreferrer nofollow">working on this project with Google Colaboratory</a>.
+Ви будете <a href="https://colab.research.google.com/drive/1BHKshb67jWVVZQ9VlzQOpdFA-gzJkSUF?usp=sharing" target="_blank" rel="noopener noreferrer nofollow">працювати над цим проєктом з Google Colaboratory</a>.
 
-After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link."
+Перейшовши за цим посиланням, створіть копію блокнота у своєму обліковому записі або локально. Як тільки ви завершили проєкт та пройшли тест (доданий до посилання), введіть посилання на свій проєкт. Якщо ви надаєте посилання на Google Colaboratory, переконайтеся, що ви увімкнули режим доступу для «усіх, хто має це посилання».
 
 # --instructions--
 
-For this challenge, you need to create a graphing calculator using Python that can take input and do the following:
+У цьому завданні за допомогою Python потрібно створити графічний калькулятор, який приймає вхідні дані та виконує наступне:
 
-- Graph one or more functions
-- Create a table of (x,y) values
-- Shade above or below the line
-- Solve and graph a system of equations
-- Zoom in or out on a graph
-- Solve quadratic equations
+- будує графік однієї або більше функцій
+- створює таблицю значень (x, y)
+- затінює частину над/під лінією
+- розв’язує системи рівнянь та будує графік
+- збільшує/зменшує масштаб графіку
+- розв’язує квадратні рівняння
 
-If you are struggling, you can follow the <a href="https://www.youtube.com/embed/EM0yNdZBdfQ" target="_blank" rel="noopener noreferrer nofollow">video walkthrough for this project.</a>
+Якщо вам важко, ви можете переглянути <a href="https://www.youtube.com/embed/EM0yNdZBdfQ" target="_blank" rel="noopener noreferrer nofollow">відео проходження для цього проєкту.</a>
 
-Once you're done, submit the URL to the public Colab notebook on your Google drive.
+Як тільки закінчите, введіть посилання на загальнодоступний блокнот Colab на вашому гугл-диску.
 
diff --git a/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md b/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md
index c5ef86d57b..e662d380cb 100644
--- a/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md
+++ b/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md
@@ -1,28 +1,28 @@
 ---
 id: 63d83ff239c73468b059cd3f
-title: "Build a Multi-Function Calculator"
+title: "Створіть багатофункціональний калькулятор"
 challengeType: 10
 dashedName: build-a-multi-function-calculator
 ---
 
 # --description--
 
-You will be <a href="https://colab.research.google.com/drive/1jT7atuRCOnkdPyDmlgKVJqxouDSx7Ioh?usp=sharing" target="_blank" rel="noopener noreferrer nofollow">working on this project with Google Colaboratory</a>.
+Ви будете <a href="https://colab.research.google.com/drive/1jT7atuRCOnkdPyDmlgKVJqxouDSx7Ioh?usp=sharing" target="_blank" rel="noopener noreferrer nofollow">працювати над цим проєктом з Google Colaboratory</a>.
 
-After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link."
+Перейшовши за цим посиланням, створіть копію блокнота у своєму обліковому записі або локально. Як тільки ви завершили проєкт та пройшли тест (доданий до посилання), введіть посилання на свій проєкт. Якщо ви надаєте посилання на Google Colaboratory, переконайтеся, що ви увімкнули режим доступу для «усіх, хто має це посилання».
 
 # --instructions--
 
-For this challenge, you need to create a multi-function calculator using Python that take input and do the following:
+У цьому завданні за допомогою Python потрібно створити багатофункціональний калькулятор, який може приймати вхідні дані та виконати наступне:
 
-- solve proportions
-- solve for x in equations
-- factor square roots
-- convert decimals to fractions and percents
-- convert fractions to decimals and percents
-- convert percents to decimals and fractions
+- розв’язує пропорції
+- знаходить значення х
+- обчислює квадратний корінь
+- перетворює десяткові числа у дроби та відсотки
+- перетворює дроби у десяткові числа та відсотки
+- перетворює відсотки у десяткові числа та дроби
 
-If you are struggling, you can follow the <a href="https://www.youtube.com/embed/PdsvcZNPEEs" target="_blank" rel="noopener noreferrer nofollow">video walkthrough for this project.</a>
+Якщо вам важко, ви можете переглянути <a href="https://www.youtube.com/embed/PdsvcZNPEEs" target="_blank" rel="noopener noreferrer nofollow">відео проходження для цього проєкту.</a>
 
-Once you're done, submit the URL to the public Colab notebook on your Google drive.
+Як тільки закінчите, введіть посилання на загальнодоступний блокнот Colab на вашому гугл-диску.
 
diff --git a/curriculum/challenges/ukrainian/17-college-algebra-with-python/college-algebra-with-python-conclusion/spreadsheets-and-additional-resources.md b/curriculum/challenges/ukrainian/17-college-algebra-with-python/college-algebra-with-python-conclusion/spreadsheets-and-additional-resources.md
index d0f0f39ccf..f10bbea9f9 100644
--- a/curriculum/challenges/ukrainian/17-college-algebra-with-python/college-algebra-with-python-conclusion/spreadsheets-and-additional-resources.md
+++ b/curriculum/challenges/ukrainian/17-college-algebra-with-python/college-algebra-with-python-conclusion/spreadsheets-and-additional-resources.md
@@ -1,6 +1,6 @@
 ---
 id: 6363d2899078df117ce4c407
-title: "Spreadsheets and Additional Resources"
+title: "Електронні таблиці та додаткові ресурси"
 challengeType: 15
 videoId: JH9Uk2mi3Dc
 dashedName: spreadsheets-and-additional-resources
@@ -8,13 +8,13 @@ dashedName: spreadsheets-and-additional-resources
 
 # --description--
 
-Let's look at how you can connect your Math and Python knowledge with external data. This video will show you how to get data from other sources, then transform it so that you can graph it and interpret it.
+Розглянемо, як ви можете поєднати свої знання з математики та Python із зовнішніми даними. Це відео покаже, як можна отримати дані з інших джерел, а потім перетворити ці дані так, щоб побудувати графік та інтерпретувати його.
 
 # --questions--
 
 ## --text--
 
-What library helps you to read data from a .csv and store it as a dataframe where you can select columns?
+Яка бібліотека допомагає читати дані з файлів .csv та зберігати їх як dataframe, де можна вибрати стовпці?
 
 ## --answers--
 
diff --git a/curriculum/challenges/ukrainian/17-college-algebra-with-python/learn-fractions-and-decimals/fractions-and-decimals-extra.md b/curriculum/challenges/ukrainian/17-college-algebra-with-python/learn-fractions-and-decimals/fractions-and-decimals-extra.md
index 5a404abf92..f4e86909f7 100644
--- a/curriculum/challenges/ukrainian/17-college-algebra-with-python/learn-fractions-and-decimals/fractions-and-decimals-extra.md
+++ b/curriculum/challenges/ukrainian/17-college-algebra-with-python/learn-fractions-and-decimals/fractions-and-decimals-extra.md
@@ -1,6 +1,6 @@
 ---
 id: 6331d260b51aeedd1a2bd64a
-title: "Fractions and Decimals: Extra"
+title: "Дроби та десяткові числа: додатково"
 challengeType: 15
 videoId: YHVA6cYIglM
 dashedName: fractions-and-decimals-extra
@@ -8,23 +8,23 @@ dashedName: fractions-and-decimals-extra
 
 # --description--
 
-The following video will show you one way to set up your Google Colaboratory notebook, so that you can continue to build your personalized algebra calculator.
+Наступне відео покаже, як налаштувати блокнот Google Colaboratory, щоб ви могли продовжити будувати свій калькулятор.
 
-Here is <a href="https://colab.research.google.com/drive/1a_RtRtVfeO0m2528T4V-bCXozWf3HpM7?usp=sharing" target="_blank" rel="noopener noreferrer nofollow">the Colab notebook used in this video</a> so you can use it as a model.
+Ось <a href="https://colab.research.google.com/drive/1a_RtRtVfeO0m2528T4V-bCXozWf3HpM7?usp=sharing" target="_blank" rel="noopener noreferrer nofollow">блокнот Colab, використаний у цьому відео</a>, тож ви можете використовувати його як модель.
 
 # --assignment--
 
-Add the code to factor and solve for a variable to your algebra Colab notebook.
+Додайте код для розкладу на множники та розв’язку змінної до свого блокнота Colab.
 
 ---
 
-Run the code in the following notebook to get <a href="https://colab.research.google.com/drive/1qON4GYbMkaZJA7MYd7-RcDROOkuuBJg9?usp=sharing" target="_blank" rel="noopener noreferrer nofollow">practice converting fractions and decimals.</a> As a bonus, look at the code used to generate the practice problems.
+Запустіть код у наступному блокноті, щоб <a href="https://colab.research.google.com/drive/1qON4GYbMkaZJA7MYd7-RcDROOkuuBJg9?usp=sharing" target="_blank" rel="noopener noreferrer nofollow"> попрактикуватись перетворювати дроби та десяткові числа.</a> Як бонус, гляньте на код, який генерує приклади для практики.
 
 # --questions--
 
 ## --text--
 
-Which of the following languages can you not use in Google Colaboratory?
+Яку з перелічених мов не можна використовувати у Google Colaboratory?
 
 ## --answers--
 
@@ -36,11 +36,11 @@ LaTex
 
 ---
 
-English
+Англійську мову
 
 ---
 
-Sanskrit
+Санскрит
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
index de9b5f0bcf..ebe65a3364 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddcd61f516cacdc7a04ca.md
@@ -56,9 +56,29 @@ Rentals are usually stationary services, not something that stops.
 # --scene--
 
 ```json
-{ "setup": { "background": "company2-center.png", "characters": [
-      { "character": "Maria", "position": {"x":50,"y":0,"z":1.5}, "opacity": 0 } ], "audio": { "filename": "1.3-5.mp3", "startTime": 1, "startTimestamp": 37.92, "finishTimestamp": 42.38 } }, "commands": [
-    { "character": "Maria", "opacity": 1, "startTime": 0 },
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {"x":50,"y":0,"z":1.5},
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "1.3-5.mp3",
+      "startTime": 1,
+      "startTimestamp": 37.92,
+      "finishTimestamp": 42.38
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
     {
       "character": "Maria",
       "startTime": 1,
@@ -73,4 +93,6 @@ Rentals are usually stationary services, not something that stops.
       "opacity": 0,
       "startTime": 5.96
     }
-  ] }
+  ]
+}
+```
diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
index 7979e28c56..834aacb823 100644
--- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
+++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4e3b02a2128049c344c8.md
@@ -39,9 +39,29 @@ Refers to the act of being introduced to someone for the first time.
 # --scene--
 
 ```json
-{ "setup": { "background": "company1-boardroom.png", "characters": [
-      { "character": "David", "position": {"x":50,"y":0,"z":1.4}, "opacity": 0 } ], "audio": { "filename": "1.2-5.mp3", "startTime": 1, "startTimestamp": 27.38, "finishTimestamp": 29.06 } }, "commands": [
-    { "character": "David", "opacity": 1, "startTime": 0 },
+{
+  "setup": {
+    "background": "company1-boardroom.png",
+    "characters": [
+      {
+        "character": "David",
+        "position": {"x":50,"y":0,"z":1.4},
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "1.2-5.mp3",
+      "startTime": 1,
+      "startTimestamp": 27.38,
+      "finishTimestamp": 29.06
+    }
+  },
+  "commands": [
+    {
+      "character": "David",
+      "opacity": 1,
+      "startTime": 0
+    },
     {
       "character": "David",
       "startTime": 1,
@@ -56,4 +76,6 @@ Refers to the act of being introduced to someone for the first time.
       "opacity": 0,
       "startTime": 3.18
     }
-  ] }
+  ]
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md b/curriculum/challenges/ukrainian/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
index 332dd3702e..df5635a8da 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
@@ -24,13 +24,13 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 # --hints--
 
-You should define a funtion named `maskEmail`.
+You should define a function named `maskEmail`.
 
 ```js
 assert.isFunction(maskEmail);
 ```
 
-The `maskEmail` funtion should take a string, `email` as an argument.
+The `maskEmail` function should take a string, `email` as an argument.
 
 ```js
 assert.match(maskEmail.toString(), /\s*maskEmail\(\s*\w+\s*\)/);
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md b/curriculum/challenges/ukrainian/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
index cdd2a312c8..80f2cbe300 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
@@ -15,7 +15,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 1. Define a function called `isLeapYear` that takes a number as an argument.
 2. Outside the function, declare a variable `year` that stores the value of the year you want to check.
-3. Inside the funtion, use an `if/ else` statement or a ternary operator to check if the year is a leap year.
+3. Inside the function, use an `if/ else` statement or a ternary operator to check if the year is a leap year.
 4. To check if the year is a leap year, fulfill the following conditions:
 
    - If the year is divisible by `4`, then it is a leap year.
@@ -34,7 +34,7 @@ You should define a function named `isLeapYear`.
 assert(typeof isLeapYear === 'function');
 ```
 
-The `isLeapYear` funtion should take a number as an argument.
+The `isLeapYear` function should take a number as an argument.
 
 ```js
 assert.match(isLeapYear.toString(), /\s*isLeapYear\(\s*\w+\s*\)/);
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md b/curriculum/challenges/ukrainian/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
index 15f0405754..7c389c567e 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
@@ -343,7 +343,7 @@ assert(usesFlex || usesFlexMedia)
                     <div class="desc">
                         <h2>Fast Shipping</h2>
                         <p>
-                            We make sure you recieve your trombone as soon as we have
+                            We make sure you receive your trombone as soon as we have
                             finished making it. We also provide free returns if you are not
                             satisfied.
                         </p>
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md b/curriculum/challenges/ukrainian/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
index a6c0e41c96..c32ed5e326 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
@@ -248,7 +248,7 @@ for (let anchor of anchors) {
         <h1>Discover Italy</h1>
         <p>Art, folklore, food, nature, and more. Choose among our wide selection of guided tours and excursions, and live an unforgettable experience exploring Italy.</p>
         <h2>Packages</h2>
-        <p>We offer an extensive range of holiday solutions to accomodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
+        <p>We offer an extensive range of holiday solutions to accommodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
         <ul>
             <li><a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li>
             <li><a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</a></li>
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md b/curriculum/challenges/ukrainian/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
index c5002111b7..814bab8b9d 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
@@ -278,7 +278,7 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
           </li>
           <li>
             <strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat
-            with a high-yeidling American breed, creating a strain that responds
+            with a high-yielding American breed, creating a strain that responds
             well to fertilizer. It goes on to provide 95% of Mexico's wheat.
           </li>
           <li>
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
new file mode 100644
index 0000000000..6ced83e0fe
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
@@ -0,0 +1,121 @@
+---
+id: 670803abcb3e980233da4768
+title: What Are Divs and Spans, and When Should You Use Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-divs-and-spans
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What type of element is a `div` element?
+
+## --answers--
+
+An inline-level element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+An inline-block element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+A block-inline element.
+
+### --feedback--
+
+Think about how a `div` element occupies space.
+
+---
+
+A block-level element.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What kind of an element is a `span` element?
+
+## --answers--
+
+An inline-level element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+---
+
+An inline element.
+
+---
+
+A block element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+---
+
+A block-level element.
+
+### --feedback--
+
+Focus on how a `span` element behaves within text or other elements.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What should you group using a `div` element?
+
+## --answers--
+
+Block-level content and larger sections.
+
+---
+
+Inline texts and smaller sections.
+
+### --feedback--
+
+Think about related and larger content.
+
+---
+
+The whole HTML content.
+
+### --feedback--
+
+Think about related and larger content.
+
+---
+
+A small chuck of text.
+
+### --feedback--
+
+Think about related and larger content.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
new file mode 100644
index 0000000000..6c660565a2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708143cab2b583ecd3324f5.md
@@ -0,0 +1,121 @@
+---
+id: 6708143cab2b583ecd3324f5
+title: What Are Attributes, and How Do They Work?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-attributes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of these best describes a boolean attribute?
+
+## --answers--
+
+They always require a value.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+---
+
+They add JavaScript functionality to your code.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+---
+
+Their presence implies true.
+
+---
+
+They are not different from regular attributes.
+
+### --feedback--
+
+Think about what their presence in the opening tag means.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What do regular attributes do in HTML?
+
+## --answers--
+
+They provide additional information about an element.
+
+---
+
+They provide the background information about an element.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+---
+
+They are replacements for HTML elements.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+---
+
+They allow developers to toggle a feature on and off.
+
+### --feedback--
+
+Think about what provides extra information about an element.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of these differentiates a boolean attribute from a regular attribute?
+
+## --answers--
+
+A boolean attribute is true and a regular attribute is false.
+
+---
+
+A boolean attribute requires a value but a regular attribute does not.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+---
+
+A boolean attribute provides additional information about an element but a regular attribute does not.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+---
+
+A boolean attribute does not require a value but a regular attribute does.
+
+### --feedback--
+
+Think about the attribute that needs a value and the one that does not.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
new file mode 100644
index 0000000000..4007ac4197
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
@@ -0,0 +1,125 @@
+---
+id: 6708382cf088b216580a9ff1
+title: What Are IDs and Classes, and When Should You Use Them?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-ids-and-classes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+When should you use an `id` versus a `class`?
+
+## --answers--
+
+Use a `class` when you want a unique identifier that should only apply to one element.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Use an `id` when you need a unique identifier for a specific element, and use a `class` when you want to apply styles or behavior to multiple elements.
+
+---
+
+Use an `id` when you want to style multiple elements consistently across different parts of your webpage.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Use an `id` when you want to apply styles that can be easily overridden by other styles in your CSS.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What happens if you try to use duplicate an `id` in your HTML?
+
+## --answers--
+
+It can lead to unwanted results and issues when trying to apply styles or targeting an element in JavaScript.
+
+---
+
+The program will crash.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+Nothing will happen.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+---
+
+There will be a popup alert message in the browser window.
+
+### --feedback--
+
+Remember that an `id` is unique and can only be used once per HTML document.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of the following is NOT a correct value for the `id` attribute?
+
+## --answers--
+
+`id="heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main-heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+---
+
+`id="main heading"`
+
+### --feedback--
+
+Only classes can hold multiple separate values.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
new file mode 100644
index 0000000000..3ea5a03c99
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
@@ -0,0 +1,121 @@
+---
+id: 67083868d5fdcb17bf8c14bd
+title: What Are HTML Entities, and What Are Some Common Examples?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-are-html-entities
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is an HTML entity (character reference)?
+
+## --answers--
+
+A set of Google fonts.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A group of images and captions.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A set of characters used to represent JavaScript code.
+
+### --feedback--
+
+Remember that HTML has reserved characters, so you will need to use another way to write reserved characters like the less than and greater than symbols.
+
+---
+
+A set of characters used to represent a reserved character in HTML.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What are the three types of character references?
+
+## --answers--
+
+Named, Roman and Hexadecimal numeric character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+---
+
+Octal, Named and Binary character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+---
+
+Named, Decimal numeric, and Hexadecimal numeric character references.
+
+---
+
+Asymmetric, Decimal numeric, and Hexadecimal numeric character references.
+
+### --feedback--
+
+Please refer back to the middle of the video where the different types of character references are talked about in detail.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which of the following is the correct syntax for a named character reference?
+
+## --answers--
+
+`&amp;`
+
+---
+
+`;amp;`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+---
+
+`&amp>>`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+---
+
+`&amp&`
+
+### --feedback--
+
+Refer back to the beginning of the video where there are examples for named references.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
new file mode 100644
index 0000000000..7412866fc7
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
@@ -0,0 +1,121 @@
+---
+id: 670838977810401844af6fe0
+title: What Is the Role of the Link Element in HTML, and How Can It Be Used to Link to External Stylesheets?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-link-element-in-html
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the role of the `link` element in HTML?
+
+## --answers--
+
+It specifies the content type of the linked resource.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It determines the visibility of the linked resource on the webpage.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It defines the font size of the linked resource when displayed.
+
+### --feedback--
+
+Pay close attention to the name of this element because it will give you clue as to what it does.
+
+---
+
+It is used to link to external resources like stylesheets and site icons.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is the role of the `rel` attribute inside the `link` element?
+
+## --answers--
+
+It is used to indicate the language of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+---
+
+It is used to specify the relationship between the linked resource and the HTML document.
+
+---
+
+It is used to define the media type of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+---
+
+It is used to determine the size of the linked document.
+
+### --feedback--
+
+The `rel` attribute represents a relationship.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What is a favicon?
+
+## --answers--
+
+A type of JavaScript file used to enhance website functionality.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+---
+
+A type of font used to style text on a website.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+---
+
+A small icon typically displayed in the browser tab next to the site title.
+
+---
+
+A security feature used to prevent cross-site scripting attacks.
+
+### --feedback--
+
+Look closely at the name since it will imply what a favicon is.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
new file mode 100644
index 0000000000..85b77abd45
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
@@ -0,0 +1,121 @@
+---
+id: 670838b10ee87a18e5faff62
+title: What Is the Role of the Script Element in HTML, and How Can It Be Used to Link to External JavaScript Files?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-script-element-in-html
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which attribute is used to link to an external JavaScript file?
+
+## --answers--
+
+The `div` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location/
+
+---
+
+The `defer` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location.
+
+---
+
+The `async` attribute.
+
+### --feedback--
+
+Look out for the attribute that specifies the JavaScript file location.
+
+---
+
+The `src` attribute.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is separation of concerns?
+
+## --answers--
+
+It's about making sure everyone on the team has their own clear responsibilities.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+---
+
+A design principle where you separate your programs into distinct sections and have each section address a separate concern.
+
+---
+
+The act of combining all aspects of a program into a single module for simplicity.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+---
+
+It involves dividing up tasks among team members without considering how they might overlap or affect each other.
+
+### --feedback--
+
+Review the ending of the video where separation of concerns was discussed.
+
+## --video-solution--
+
+2
+
+## --text--
+
+Which of the following is the correct syntax for linking to an external JavaScript file?
+
+## --answers--
+
+`<script div="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+---
+
+`<script alt="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+---
+
+`<script src="path-to-javascript-file.js"></script>`
+
+---
+
+`<script defer="path-to-javascript-file.js"></script>`
+
+### --feedback--
+
+Review the ending of the video where linking to external files was discussed.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
new file mode 100644
index 0000000000..dd0270925c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
@@ -0,0 +1,121 @@
+---
+id: 670838e914096b194b0c51aa
+title: What Is an HTML Boilerplate, and Why Is It Important?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-an-html-boilerplate
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Where would you set the character encoding for your page?
+
+## --answers--
+
+A `meta` element in the `body`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+---
+
+A `head` element in the `body`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+---
+
+A `meta` element in the `head`.
+
+---
+
+In the `DOCTYPE`.
+
+### --feedback--
+
+Character encoding is metadata information.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Where would you set the language for your page?
+
+## --answers--
+
+In the opening `html` tag.
+
+---
+
+A `meta` element in the `body`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+---
+
+A `head` element in the `body`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+---
+
+A `meta` element in the `head`.
+
+### --feedback--
+
+This is an attribute on the outer-most element.
+
+## --video-solution--
+
+1
+
+## --text--
+
+What purpose does a boilerplate serve?
+
+## --answers--
+
+Provides a starting structure for your websites.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+Ensures you are not missing any essential elements.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+Allows you to get started writing the content of your page faster.
+
+### --feedback--
+
+A boilerplate is helpful in many ways.
+
+---
+
+All of the above.
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
new file mode 100644
index 0000000000..57fce3537b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
@@ -0,0 +1,120 @@
+---
+id: 670839051794aa19fcef6dc8
+title: What Is UTF-8 Character Encoding and Why Is It Needed?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-utf-8-character-encoding
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+Which attribute is used to set the UTF-8 character encoding for HTML documents?
+
+## --answers--
+
+`pattern`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+---
+
+`content`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+---
+
+`charset`
+
+---
+
+`lang`
+
+### --feedback--
+
+Refer back to the middle of video where there are examples showing which attribute to use.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is character encoding?
+
+## --answers--
+
+A method computers use to store characters as data.
+
+---
+
+A way to compress text files.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+---
+
+It determines the font used to display text on a screen.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+---
+
+It refers to the process of converting spoken language into written text.
+
+### --feedback--
+
+Think about what computers do with characters.
+
+## --video-solution--
+
+1
+
+## --text--
+
+How many bits are inside of a byte?
+
+## --answers--
+
+1
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+33
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+7
+
+### --feedback--
+
+Refer back to the beginning of the video where it talks about bytes and bits.
+
+---
+
+8
+
+## --video-solution--
+
+4
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
new file mode 100644
index 0000000000..96e393015a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
@@ -0,0 +1,121 @@
+---
+id: 67083952f800051a8a21fcfd
+title: What Is the Role of the Meta Description, and How Does It Affect SEO?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-the-meta-description
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which element is used to set the description for a web page?
+
+## --answers--
+
+`img`
+
+### --feedback--
+
+Look closely to the title of this video
+
+---
+
+`meta`
+
+---
+
+`slot`
+
+### --feedback--
+
+Look closely to the title of this video
+
+---
+
+`figure`
+
+### --feedback--
+
+Look closely to the title of this video
+
+## --video-solution--
+
+2
+
+## --text--
+
+What does SEO stand for?
+
+## --answers--
+
+Slot Engine Optimization
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Site Enhancement Outreach
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Social Engagement Optimization
+
+### --feedback--
+
+Refer back to the beginning of the video where SEO was talked about.
+
+---
+
+Search Engine Optimization
+
+## --video-solution--
+
+4
+
+## --text--
+
+Where does the page's description typically show up?
+
+## --answers--
+
+Inside the `figure` element.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+---
+
+Inside the `footer` element.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+---
+
+In the search engine results page.
+
+---
+
+In a popup alert message.
+
+### --feedback--
+
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
new file mode 100644
index 0000000000..7977b8cc03
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
@@ -0,0 +1,121 @@
+---
+id: 6708396caa00e11b597b3365
+title: What Is the Role of Open Graph Tags, and How Do They Affect SEO?
+challengeType: 11
+videoId: nVAaxZ34khk
+dashedName: what-is-the-role-of-open-graph-tags
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What are open graph properties used for?
+
+## --answers--
+
+For embedding interactive multimedia content directly into web pages.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+---
+
+To set how your website's content will be seen on different social media platforms.
+
+---
+
+For generating dynamic pop-up advertisements on websites.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+---
+
+For encrypting sensitive data transmitted between web servers and users' browsers.
+
+### --feedback--
+
+Refer back to the beginning of the video, where open graph properties were introduced.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What does the `name="og:title"` do in the `meta` element?
+
+## --answers--
+
+It automatically adjusts the font size and style of the webpage title based on user preferences.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It directs the browser to display a specific emoticon or emoji as the title of the webpage.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It causes the webpage to play a specific audio file when the title is displayed in the browser tab.
+
+### --feedback--
+
+Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+
+---
+
+It specifies the title of your web page content when it is shared on social media platforms.
+
+## --video-solution--
+
+4
+
+## --text--
+
+What does the `property="og:type"` do in the `meta` element?
+
+## --answers--
+
+It selects the page's default font style.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+---
+
+It triggers a pop-up advertisement when the webpage is loaded.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+---
+
+It specifies the type of content used for your web page when it is shared on social media platforms.
+
+---
+
+It changes the webpage's background color based on the user's time zone.
+
+### --feedback--
+
+Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md b/curriculum/challenges/ukrainian/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
index 8e1bf47d63..bbd55079df 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/quiz-asynchronous-javascript/66edd630f7666cfa54b404d0.md
@@ -17,439 +17,439 @@ dashedName: quiz-asynchronous-javascript
 
 #### --text--
 
-Placeholder question
+What is asynchronous programming?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to execute code in a sequential order.
 
 ---
 
-Placeholder distractor 2
+A technique to handle errors in synchronous code.
 
 ---
 
-Placeholder distractor 3
+A way to guarantee task order.
 
 #### --answer--
 
-Placeholder answer
+A method to execute code concurrently without blocking the main thread.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `async` attribute do when used in a `<script>` tag?
 
 #### --distractors--
 
-Placeholder distractor 1
+It allows the script to be executed after the HTML document has been completely parsed.
 
 ---
 
-Placeholder distractor 2
+It ensures the script runs in a synchronous manner.
 
 ---
 
-Placeholder distractor 3
+It delays the script execution until the browser is idle.
 
 #### --answer--
 
-Placeholder answer
+The script is downloaded in parallel with parsing the page and executed as soon as it is available.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Fetch API in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manage asynchronous callbacks.
 
 ---
 
-Placeholder distractor 2
+To create and manage cookies.
 
 ---
 
-Placeholder distractor 3
+To render dynamic HTML content.
 
 #### --answer--
 
-Placeholder answer
+To make network requests to servers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which `HTTP` method is used to send data to a server for processing?
 
 #### --distractors--
 
-Placeholder distractor 1
+`GET`
 
 ---
 
-Placeholder distractor 2
+`DELETE`
 
 ---
 
-Placeholder distractor 3
+`HEAD`
 
 #### --answer--
 
-Placeholder answer
+`POST`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `res.json()` method do in Express.js?
 
 #### --distractors--
 
-Placeholder distractor 1
+It retrieves data from a JSON file.
 
 ---
 
-Placeholder distractor 2
+It parses a JSON string into a JavaScript object.
 
 ---
 
-Placeholder distractor 3
+It sends raw JSON as a response without any processing.
 
 #### --answer--
 
-Placeholder answer
+It converts a JavaScript object to a JSON string and sends it as a response.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a promise in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+A way to synchronize multiple operations.
 
 ---
 
-Placeholder distractor 2
+A callback function that runs after an operation.
 
 ---
 
-Placeholder distractor 3
+A technique to handle errors in asynchronous code.
 
 #### --answer--
 
-Placeholder answer
+An object that represents the eventual completion (or failure) of an asynchronous operation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does promise chaining allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Execute multiple asynchronous operations in parallel.
 
 ---
 
-Placeholder distractor 2
+Handle synchronous operations more efficiently.
 
 ---
 
-Placeholder distractor 3
+Retry failed operations automatically.
 
 #### --answer--
 
-Placeholder answer
+Pass the result of one promise to the next.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle successful completion of a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.catch()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.then()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to handle errors in a promise chain?
 
 #### --distractors--
 
-Placeholder distractor 1
+`.finally()`
 
 ---
 
-Placeholder distractor 2
+`.then()`
 
 ---
 
-Placeholder distractor 3
+`.error()`
 
 #### --answer--
 
-Placeholder answer
+`.catch()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the use of the `.finally()` method in a promise?
 
 #### --distractors--
 
-Placeholder distractor 1
+It returns the result of the promise.
 
 ---
 
-Placeholder distractor 2
+It stops the execution of subsequent promise handlers.
 
 ---
 
-Placeholder distractor 3
+It retries the promise if it fails.
 
 #### --answer--
 
-Placeholder answer
+It executes code after a promise is fulfilled or rejected, regardless of the outcome.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the syntax for declaring an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+`function myFunction() {}`
 
 ---
 
-Placeholder distractor 2
+`function async myFunction() {}`
 
 ---
 
-Placeholder distractor 3
+`async {} => ()`
 
 #### --answer--
 
-Placeholder answer
+`async function myFunction() {}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `await` keyword do in an async function?
 
 #### --distractors--
 
-Placeholder distractor 1
+It creates a new promise.
 
 ---
 
-Placeholder distractor 2
+It executes code immediately without waiting.
 
 ---
 
-Placeholder distractor 3
+It returns the result of the promise.
 
 #### --answer--
 
-Placeholder answer
+It pauses the execution of the function until the promise is resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the Geolocation API?
 
 #### --distractors--
 
-Placeholder distractor 1
+To manipulate HTML elements.
 
 ---
 
-Placeholder distractor 2
+To create and manage map elements.
 
 ---
 
-Placeholder distractor 3
+To control the device's camera.
 
 #### --answer--
 
-Placeholder answer
+To retrieve the geographical location of a device.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method of the Geolocation API is used to get the current position of the device?
 
 #### --distractors--
 
-Placeholder distractor 1
+`getLocation()`
 
 ---
 
-Placeholder distractor 2
+`getPosition()`
 
 ---
 
-Placeholder distractor 3
+`getLatLong()`
 
 #### --answer--
 
-Placeholder answer
+`getCurrentPosition()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What parameters can be passed to the `getCurrentPosition()` method?
 
 #### --distractors--
 
-Placeholder distractor 1
+Only the success callback function.
 
 ---
 
-Placeholder distractor 2
+Only options.
 
 ---
 
-Placeholder distractor 3
+One the error callback function.
 
 #### --answer--
 
-Placeholder answer
+Success and error callback functions, along with options.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What will the following code return? `fetch('https://api.example.com/data')`
 
 #### --distractors--
 
-Placeholder distractor 1
+The JSON response directly.
 
 ---
 
-Placeholder distractor 2
+An error if the URL is not reachable.
 
 ---
 
-Placeholder distractor 3
+A synchronous response.
 
 #### --answer--
 
-Placeholder answer
+A `Promise` that resolves to a `Response` object
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default HTTP method for the Fetch API?
 
 #### --distractors--
 
-Placeholder distractor 1
+`POST`
 
 ---
 
-Placeholder distractor 2
+`PUT`
 
 ---
 
-Placeholder distractor 3
+`DELETE`
 
 #### --answer--
 
-Placeholder answer
+`GET`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `Promise.all()` method do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resolves a single promise.
 
 ---
 
-Placeholder distractor 2
+It rejects the first promise that fails.
 
 ---
 
-Placeholder distractor 3
+It runs all promises sequentially.
 
 #### --answer--
 
-Placeholder answer
+It executes multiple promises concurrently and returns the results when all are resolved.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you handle multiple asynchronous operations using async/await?
 
 #### --distractors--
 
-Placeholder distractor 1
+You must always use `.then()` for each operation.
 
 ---
 
-Placeholder distractor 2
+You cannot handle multiple operations with async/await.
 
 ---
 
-Placeholder distractor 3
+You must use callback functions for all operations.
 
 #### --answer--
 
-Placeholder answer
+You can use `await` for each operation in sequence and put them inside an async function.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is true about the `fetch` API?
 
 #### --distractors--
 
-Placeholder distractor 1
+It can only handle `GET` requests.
 
 ---
 
-Placeholder distractor 2
+It requires a callback function for handling responses.
 
 ---
 
-Placeholder distractor 3
+It only works in synchronous code.
 
 #### --answer--
 
-Placeholder answer
+It is used to make HTTP requests to a server.
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md b/curriculum/challenges/ukrainian/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
index fa66f3894d..652b37a9f4 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/quiz-basic-css/66ed8fa2f45ce3ece4053eab.md
@@ -381,7 +381,7 @@ Gives animations to the page.
 
 ---
 
-Improves Search Emgine Optimiztion (SEO).
+Improves Search Emgine Optimization (SEO).
 
 #### --answer--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md b/curriculum/challenges/ukrainian/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
index 4bba22d6e9..be33655f21 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
@@ -17,439 +17,439 @@ dashedName: quiz-css-layout-and-effects
 
 #### --text--
 
-Placeholder question
+What happens when there is too much content to fit in an element box?
 
 #### --distractors--
 
-Placeholder distractor 1
+Underflow
 
 ---
 
-Placeholder distractor 2
+Compression
 
 ---
 
-Placeholder distractor 3
+Padding
 
 #### --answer--
 
-Placeholder answer
+Overflow
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default behavior of CSS when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+Content is hidden
 
 ---
 
-Placeholder distractor 2
+Content is clipped
 
 ---
 
-Placeholder distractor 3
+Content is resized
 
 #### --answer--
 
-Placeholder answer
+Content is visible
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why does CSS typically avoid hiding content when there is overflow?
 
 #### --distractors--
 
-Placeholder distractor 1
+To enhance page design by hiding irrelevant content
 
 ---
 
-Placeholder distractor 2
+To save memory and load pages faster
 
 ---
 
-Placeholder distractor 3
+To automatically fix broken layout issues
 
 #### --answer--
 
-Placeholder answer
+To prevent data loss and make issues noticeable
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you handle overflow in CSS to hide content or add scrollbars?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars
 
 ---
 
-Placeholder distractor 2
+Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars
 
 ---
 
-Placeholder distractor 3
+Use `overflow: none` to hide content and `overflow: show` to display scrollbars
 
 #### --answer--
 
-Placeholder answer
+Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you specify different scrolling behaviors for the x-axis and y-axis in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+By using `scroll-x` and `scroll-y` properties
 
 ---
 
-Placeholder distractor 2
+By using `overflow-x` and `overflow-y` separately in every case
 
 ---
 
-Placeholder distractor 3
+By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x`
 
 #### --answer--
 
-Placeholder answer
+By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform` CSS property allow you to do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Change the color and font style of an element
 
 ---
 
-Placeholder distractor 2
+Adjust the margin and padding of an element
 
 ---
 
-Placeholder distractor 3
+Modify the visibility and display of an element
 
 #### --answer--
 
-Placeholder answer
+Rotate, scale, skew, or translate an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `transform-box: fill-box` property do in an animation that rotates an element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It resizes the element to fit the canvas during the transformation
 
 ---
 
-Placeholder distractor 2
+It changes the background of the element during transformation
 
 ---
 
-Placeholder distractor 3
+It sets the transform origin to the top-left corner of the element
 
 #### --answer--
 
-Placeholder answer
+It sets the transform origin to the center of the element's bounding box, allowing it to spin in place
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `transform-origin` property in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It controls the animation speed of transformed elements
 
 ---
 
-Placeholder distractor 2
+It defines the display type of transformed elements
 
 ---
 
-Placeholder distractor 3
+It sets the background of transformed elements
 
 #### --answer--
 
-Placeholder answer
+It specifies the point around which a transformation is applied to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does margin affect the size of an element in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Margin increases the actual size of the element's box
 
 ---
 
-Placeholder distractor 2
+Margin has no effect on the element's size or position
 
 ---
 
-Placeholder distractor 3
+Margin decreases the total area the element occupies on the page
 
 #### --answer--
 
-Placeholder answer
+Margin affects the total area an element occupies but is not part of the actual size of the box
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the content area of an element in CSS represent?
 
 #### --distractors--
 
-Placeholder distractor 1
+It defines the margins and padding around the element
 
 ---
 
-Placeholder distractor 2
+It specifies the border thickness of the element
 
 ---
 
-Placeholder distractor 3
+It controls the visibility of the element on the page
 
 #### --answer--
 
-Placeholder answer
+It contains the "real" content of the element, such as text, images, or videos
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the difference between `content-box` and `border-box` in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`content-box` includes padding and border, while `border-box` includes only content dimensions
 
 ---
 
-Placeholder distractor 2
+Both `content-box` and `border-box` include only the border dimensions
 
 ---
 
-Placeholder distractor 3
+`content-box` is used for 2D elements, while `border-box` is used for 3D elements
 
 #### --answer--
 
-Placeholder answer
+`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+To apply default styles to all elements for faster loading
 
 ---
 
-Placeholder distractor 2
+To minimize the size of CSS files by removing unused styles
 
 ---
 
-Placeholder distractor 3
+To optimize images and fonts for better performance
 
 #### --answer--
 
-Placeholder answer
+To remove default browser styling and create a consistent baseline for styling across different browsers
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What are the common types of CSS resets?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bootstrap Reset, Tailwind Reset, and Foundation Reset
 
 ---
 
-Placeholder distractor 2
+Simple Reset, Comprehensive Reset, and Adaptive Reset
 
 ---
 
-Placeholder distractor 3
+Minimal Reset, Advanced Reset, and Legacy Reset
 
 #### --answer--
 
-Placeholder answer
+Normalize.css, Eric Meyer's Reset, and HTML5 Reset
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `scale3d()` property value do in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+It rotates an element in 3D space
 
 ---
 
-Placeholder distractor 2
+It skews an element on the x, y, and z axes
 
 ---
 
-Placeholder distractor 3
+It translates an element in 3D space
 
 #### --answer--
 
-Placeholder answer
+It scales an element along the x, y, and z axes
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the total width of an element calculated in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+Total width = width + margin + padding + border
 
 ---
 
-Placeholder distractor 2
+Total width = width + margin + padding
 
 ---
 
-Placeholder distractor 3
+Total width = width + margin + border
 
 #### --answer--
 
-Placeholder answer
+Total width = width + left padding + right padding + left border + right border
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the filter property in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the layout of the element on the page
 
 ---
 
-Placeholder distractor 2
+It changes the background color and texture of an element
 
 ---
 
-Placeholder distractor 3
+It alters the size and position of an element
 
 #### --answer--
 
-Placeholder answer
+It applies visual effects like blur and saturation to an element
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How is the `filter` property specified in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+As only a single function, where percentage values must be used
 
 ---
 
-Placeholder distractor 2
+As `block` or `inline`, with values expressed in pixels
 
 ---
 
-Placeholder distractor 3
+As `none` or multiple functions, but only percentage values are accepted
 
 #### --answer--
 
-Placeholder answer
+As `none` or one or more functions, where percentage values can also be expressed as decimals
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `contrast()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white
 
 ---
 
-Placeholder distractor 2
+Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it
 
 ---
 
-Placeholder distractor 3
+Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque
 
 #### --answer--
 
-Placeholder answer
+Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `hue-rotate()` function in CSS do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It changes the brightness of the input image based on degrees
 
 ---
 
-Placeholder distractor 2
+It rotates an element's size and position in the document
 
 ---
 
-Placeholder distractor 3
+It adjusts the saturation and contrast of the input image
 
 #### --answer--
 
-Placeholder answer
+It applies a hue rotation, where the `<angle>` value defines the degrees around the hue color circle
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens when two animated filters have different function list lengths in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+The shorter list's filters override the longer list's filters
 
 ---
 
-Placeholder distractor 2
+The filters are discarded and no animation is applied
 
 ---
 
-Placeholder distractor 3
+Only the first filter function in each list is animated
 
 #### --answer--
 
-Placeholder answer
+The longer list's missing equivalent filter functions are added to the shorter list using their initial values
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md b/curriculum/challenges/ukrainian/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
index d9546fb57e..4b290d5927 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/quiz-form-validation-with-javascript/66edd3403d7077eece6dc4b6.md
@@ -17,439 +17,439 @@ dashedName: quiz-form-validation-with-javascript
 
 #### --text--
 
-Placeholder question
+Which method is used to check if an `input` element's value satisfies the validation rules?
 
 #### --distractors--
 
-Placeholder distractor 1
+`validateInput()`
 
 ---
 
-Placeholder distractor 2
+`isValid()`
 
 ---
 
-Placeholder distractor 3
+`checkValue()`
 
 #### --answer--
 
-Placeholder answer
+`checkValidity()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if the `checkValidity()` method finds an invalid `input`?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is automatically submitted
 
 ---
 
-Placeholder distractor 2
+Nothing happens
 
 ---
 
-Placeholder distractor 3
+The `input` value is cleared
 
 #### --answer--
 
-Placeholder answer
+The browser displays a validation message
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which method is used to customize the message shown during validation failure?
 
 #### --distractors--
 
-Placeholder distractor 1
+`setErrorMessage()`
 
 ---
 
-Placeholder distractor 2
+`setValidationMessage()`
 
 ---
 
-Placeholder distractor 3
+`customMessage()`
 
 #### --answer--
 
-Placeholder answer
+`setCustomValidity()`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default validation behavior for required fields when the form is submitted?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is submitted even if required fields are empty
 
 ---
 
-Placeholder distractor 2
+The form submits but gives a warning
 
 ---
 
-Placeholder distractor 3
+The form resets the `input` values
 
 #### --answer--
 
-Placeholder answer
+The browser stops the form submission if required fields are empty
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which actions does not cause an HTML form to be checked for errors?
 
 #### --distractors--
 
-Placeholder distractor 1
+Changing the `input` value
 
 ---
 
-Placeholder distractor 2
+Submitting the form
 
 ---
 
-Placeholder distractor 3
+Calling `reportValidity()`
 
 #### --answer--
 
-Placeholder answer
+Clicking a reset button
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does `checkValidity()` return when all form inputs are valid?
 
 #### --distractors--
 
-Placeholder distractor 1
+`false`
 
 ---
 
-Placeholder distractor 2
+`undefined`
 
 ---
 
-Placeholder distractor 3
+`null`
 
 #### --answer--
 
-Placeholder answer
+`true`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When does the `checkValidity()` method stop form submission?
 
 #### --distractors--
 
-Placeholder distractor 1
+When the form has no submit button
 
 ---
 
-Placeholder distractor 2
+When the form `action` is empty
 
 ---
 
-Placeholder distractor 3
+When the form method is POST
 
 #### --answer--
 
-Placeholder answer
+When the form has at least one invalid `input` (and the default behavior of form submission is prevented).
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if `checkValidity()` is called, but a field fails validation?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form submits without error
 
 ---
 
-Placeholder distractor 2
+The `input` values are cleared
 
 ---
 
-Placeholder distractor 3
+The form closes immediately
 
 #### --answer--
 
-Placeholder answer
+The invalid field is highlighted and a message appears
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which action will make `checkValidity()` run?
 
 #### --distractors--
 
-Placeholder distractor 1
+Resetting the form
 
 ---
 
-Placeholder distractor 2
+Changing an `input` value
 
 ---
 
-Placeholder distractor 3
+Clicking an anchor tag
 
 #### --answer--
 
-Placeholder answer
+Submitting the form manually
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of calling `checkValidity()` before submitting a form?
 
 #### --distractors--
 
-Placeholder distractor 1
+To automatically submit the form
 
 ---
 
-Placeholder distractor 2
+To reload the page
 
 ---
 
-Placeholder distractor 3
+To clear all `input` fields
 
 #### --answer--
 
-Placeholder answer
+To check if all `input` elements meet their specified constraints
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the main purpose of `e.preventDefault()`?
 
 #### --distractors--
 
-Placeholder distractor 1
+To reload the form
 
 ---
 
-Placeholder distractor 2
+To clear form data
 
 ---
 
-Placeholder distractor 3
+To reset the form values
 
 #### --answer--
 
-Placeholder answer
+To stop the default action of an event
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When used on a form's submit event, what does `e.preventDefault()` do?
 
 #### --distractors--
 
-Placeholder distractor 1
+It submits the form
 
 ---
 
-Placeholder distractor 2
+It clears all form fields
 
 ---
 
-Placeholder distractor 3
+It disables the form temporarily
 
 #### --answer--
 
-Placeholder answer
+It prevents the form from being submitted
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In which scenario is `e.preventDefault()` most useful?
 
 #### --distractors--
 
-Placeholder distractor 1
+When handling a button click that submits a form
 
 ---
 
-Placeholder distractor 2
+When closing a modal dialog
 
 ---
 
-Placeholder distractor 3
+When opening a new page
 
 #### --answer--
 
-Placeholder answer
+When submitting a form via AJAX and preventing a page reload
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What happens if you forget to call `e.preventDefault()` on a form submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+The form is submitted via AJAX
 
 ---
 
-Placeholder distractor 2
+The form does not submit
 
 ---
 
-Placeholder distractor 3
+The form data is lost
 
 #### --answer--
 
-Placeholder answer
+The form submits and refreshes the page
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which default behavior can be prevented using `e.preventDefault()`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Editing a form
 
 ---
 
-Placeholder distractor 2
+Rendering the form
 
 ---
 
-Placeholder distractor 3
+Reloading the form
 
 #### --answer--
 
-Placeholder answer
+The default behavior caused by submitting a form (e.g., page refresh or POST call).
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What triggers the form's submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+When an input field changes
 
 ---
 
-Placeholder distractor 2
+When the form is reset
 
 ---
 
-Placeholder distractor 3
+When the form's action is cleared
 
 #### --answer--
 
-Placeholder answer
+When a form's submit button is clicked or Enter is pressed
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Where do you usually handle the submit event in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+On a text input element
 
 ---
 
-Placeholder distractor 2
+On any field in the form
 
 ---
 
-Placeholder distractor 3
+On a button element outside the form
 
 #### --answer--
 
-Placeholder answer
+On the form element itself
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the submit event do by default?
 
 #### --distractors--
 
-Placeholder distractor 1
+It validates the form but doesn’t submit it
 
 ---
 
-Placeholder distractor 2
+It clears the form fields
 
 ---
 
-Placeholder distractor 3
+It cancels form submission
 
 #### --answer--
 
-Placeholder answer
+It sends form data to the server specified in the form's action
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which event should you listen for to handle form data when the form is submitted in JavaScript?
 
 #### --distractors--
 
-Placeholder distractor 1
+`"input"`
 
 ---
 
-Placeholder distractor 2
+`"change"`
 
 ---
 
-Placeholder distractor 3
+`"focus"`
 
 #### --answer--
 
-Placeholder answer
+`"submit"`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What must be done to prevent the default form submission behavior in the submit event?
 
 #### --distractors--
 
-Placeholder distractor 1
+Call `submit.preventDefault()`
 
 ---
 
-Placeholder distractor 2
+Stop the form from being displayed
 
 ---
 
-Placeholder distractor 3
+Set the form's `method` to `"GET"`
 
 #### --answer--
 
-Placeholder answer
+Call `e.preventDefault()`
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md b/curriculum/challenges/ukrainian/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
index 77a823da19..93973ca1f6 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/quiz-javascript-problem-solving-and-algorithmic-thinking/66edd4bc0ce399f475ad6f9b.md
@@ -17,439 +17,439 @@ dashedName: quiz-javascript-problem-solving-and-algorithmic-thinking
 
 #### --text--
 
-Placeholder question
+The Fibonacci sequence is a series where each number is the sum of the two preceding ones, starting with `0` and `1`. The sequence goes: `0, 1, 1, 2, 3, 5, 8, 13, 21...` and so on. What is the best approach to calculate `nth` number in the sequence?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use the formula `fib(n) = fib(n-1) * fib(n-2)`.
 
 ---
 
-Placeholder distractor 2
+Use recursion with memoization to avoid recalculating subproblems where `fib(n) = (n-1) + (n-2)`.
 
 ---
 
-Placeholder distractor 3
+Use a for loop to calculate iteratively where `fib(n) = fib(n-1) + (n-2)`.
 
 #### --answer--
 
-Placeholder answer
+Use recursion with memoization to avoid recalculating subproblems where `fib(n) = fib(n-1) + fib(n-2)`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+A binary string, such as `"1011"`, represents a number in base-2, where each digit corresponds to a power of `2`. What process can be used to convert this binary string into its decimal equivalent?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use the `parseInt()` function with base `10`.
 
 ---
 
-Placeholder distractor 2
+Convert the string to an array, then sum the digits using bitwise operations.
 
 ---
 
-Placeholder distractor 3
+Use the `Number()` function directly with a binary string.
 
 #### --answer--
 
-Placeholder answer
+Multiply each character by powers of `2` and sum them up.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following algorithm will move all zeroes in an array to the end while keeping the order of other elements unchanged? For example, given `[0, 1, 0, 3, 12]`, return `[1, 3, 12, 0, 0]`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Sort the array in decreasing order and place zeros at the start.
 
 ---
 
-Placeholder distractor 2
+Sort the array in ascending order.
 
 ---
 
-Placeholder distractor 3
+Use recursion to remove all zeros and add them to the front.
 
 #### --answer--
 
-Placeholder answer
+Use a two-pointer technique to swap non-zero elements with zero elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a sentence, such as `"I am a frontend engineer"`, what approach can be taken to reverse the order of the words, producing the output `"engineer frontend a am I"`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Split the string into words using `split(" ")`, reverse the array, and join it back into a string using `join("_")`.
 
 ---
 
-Placeholder distractor 2
+Sort the words alphabetically and return the result.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to reverse each word.
 
 #### --answer--
 
-Placeholder answer
+Split the string into words using `split(" ")`, reverse the array, and join it back into a string using `join(" ")`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a string, what approach would be used to find the first non-repeating character? For example, in the string `"codecamp"`, it would be `'o'`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Sort the string and check for consecutive duplicates.
 
 ---
 
-Placeholder distractor 2
+Convert the string to an array, then filter for unique elements.
 
 ---
 
-Placeholder distractor 3
+Use a regular expression to find the first non-repeat.
 
 #### --answer--
 
-Placeholder answer
+Iterate over the string twice, once to count number of occurrences and once to find the first unique character.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach can be used to encode a string by counting consecutive repeated characters? For example, given the input`"mississippi"`, the output should be `"m1i1s2i1s2i1p2i1"`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Use regular expressions to match repeated characters.
 
 ---
 
-Placeholder distractor 2
+Use `map()` to map consecutive characters to the output.
 
 ---
 
-Placeholder distractor 3
+Sort the string and count occurrences.
 
 #### --answer--
 
-Placeholder answer
+Iterate through the string, counting consecutive occurrences of each character while building the answer.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach can be used to reverse the digits of an integer? For example, given the input `1234`, the output should be `4321`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Use bitwise operations to reverse the digits.
 
 ---
 
-Placeholder distractor 2
+Convert the integer to a binary number and reverse it.
 
 ---
 
-Placeholder distractor 3
+Use the `reverse()` method directly on the integer.
 
 #### --answer--
 
-Placeholder answer
+Use a loop to extract digits from the integer and reconstruct the reversed integer.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What approach would be used to generate Pascal's Triangle up to `n` rows? For example, for `n = 3`, the result would be `[[1], [1, 1], [1, 2, 1]]`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Generate rows by using a function that outputs prime numbers and maps them to each row.
 
 ---
 
-Placeholder distractor 2
+Use a loop to generate each row by multiplying adjacent elements from the previous row.
 
 ---
 
-Placeholder distractor 3
+Use `Math.random()` to generate the rows.
 
 #### --answer--
 
-Placeholder answer
+Use a loop to generate each row by adding adjacent elements from the previous row.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which algorithm is most efficient for sorting an array of size `n` containing numbers from `1` to `n`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Bubble Sort
 
 ---
 
-Placeholder distractor 2
+Merge Sort
 
 ---
 
-Placeholder distractor 3
+Quick Sort
 
 #### --answer--
 
-Placeholder answer
+Cyclic Sort
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which algorithmic approach is best for solving the problem of finding the minimum number of coins for a given amount when only one type of coin is provided?
 
 #### --distractors--
 
-Placeholder distractor 1
+Dynamic Programming
 
 ---
 
-Placeholder distractor 2
+Divide and Conquer
 
 ---
 
-Placeholder distractor 3
+Backtracking
 
 #### --answer--
 
-Placeholder answer
+Greedy Algorithm
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following problems can be solved efficiently using the two-pointer technique?
 
 #### --distractors--
 
-Placeholder distractor 1
+Sorting an array.
 
 ---
 
-Placeholder distractor 2
+Traversing a tree level by level.
 
 ---
 
-Placeholder distractor 3
+Finding the middle element of a linked list.
 
 #### --answer--
 
-Placeholder answer
+Finding two numbers in a sorted array that sum up to a target value.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a Roman numeral string, convert it to its corresponding integer value. For example, `"IX"` should return `9`.
 
 #### --distractors--
 
-Placeholder distractor 1
+Parse the string from left to right and add the values of individual numerals.
 
 ---
 
-Placeholder distractor 2
+Parse each character and multiply by its index.
 
 ---
 
-Placeholder distractor 3
+Use the `parseInt()` function on the Roman numeral string.
 
 #### --answer--
 
-Placeholder answer
+Parse the string from right to left, adding the values of individual numerals and subtracting when a smaller numeral comes before a larger numeral.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can one check if a given string is a palindrome (the same forwards and backwards), for example `"madam"`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use Slow and Fast Pointer.
 
 ---
 
-Placeholder distractor 2
+Compare it to its reverse after sorting the string.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to remove all non-alphabetic characters and check equality.
 
 #### --answer--
 
-Placeholder answer
+Compare the string to its reverse.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Given a number `n`, write a function that prints numbers from `1` to `n`. For multiples of `3`, print `"Fizz"` for multiples of `5`, print `"Buzz"` and for multiples of both `3` and `5`, print `"FizzBuzz"`. What is the simplest approach to this?
 
 #### --distractors--
 
-Placeholder distractor 1
+Use `Math.random()` to generate numbers between `1` and `n` and check the result.
 
 ---
 
-Placeholder distractor 2
+Use a for loop and check divisibility in-order of `3`, `5` and `15` with if conditions or switch.
 
 ---
 
-Placeholder distractor 3
+Create a recursive function that checks divisibility by `3` and `5`.
 
 #### --answer--
 
-Placeholder answer
+Use a for loop and check divisibility in-order of `15`, `5` and `3` with if conditions or switch.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+The Caesar cipher is a simple encryption technique where each letter in a string is shifted forward by a fixed number of positions in the alphabet. How would you shift all letters in a string by `3` positions?
 
 #### --distractors--
 
-Placeholder distractor 1
+Subtract `3` from the ASCII value of each character.
 
 ---
 
-Placeholder distractor 2
+Replace each vowel with the next consonant.
 
 ---
 
-Placeholder distractor 3
+Add `3` to the ASCII value of each character, but only for uppercase letters.
 
 #### --answer--
 
-Placeholder answer
+Add `3` to the ASCII value of each character, wrapping around for `'z'` and `'Z'`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Anagrams are words formed by rearranging letters of another word. How can one determine if two strings are anagrams?
 
 #### --distractors--
 
-Placeholder distractor 1
+Compare total number of letters in both strings.
 
 ---
 
-Placeholder distractor 2
+Reverse one string and compare with the other.
 
 ---
 
-Placeholder distractor 3
+Use regular expressions to remove duplicate letters and check equality.
 
 #### --answer--
 
-Placeholder answer
+Sort both strings and check if they are equal.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is the correct approach to check if a given number is prime?
 
 #### --distractors--
 
-Placeholder distractor 1
+Check if the number is divisible by `2` and `3`. If not, it's prime.
 
 ---
 
-Placeholder distractor 2
+Check if the number is divisible by any odd number between `3` and the square root of the number.
 
 ---
 
-Placeholder distractor 3
+Convert the number to binary and check if it has exactly two 1s.
 
 #### --answer--
 
-Placeholder answer
+Loop from `2` to up to the square root of the prime candidate, and make sure none of the number divides it evenly.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following describes the correct approach to find the greatest common divisor (GCD) of two numbers?
 
 #### --distractors--
 
-Placeholder distractor 1
+Find the average of the two numbers and round to the nearest integer.
 
 ---
 
-Placeholder distractor 2
+Multiply the two numbers together and then divide by their least common divisor.
 
 ---
 
-Placeholder distractor 3
+Add the two numbers together and divide by `2`.
 
 #### --answer--
 
-Placeholder answer
+Use recursion where `gcd(a, b) = gcd(b, a % b)` where the base case would be to return first parameter when second parameter is zero.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+The factorial of a non-negative integer `n` (denoted `n!`) is the product of all positive integers from `1` to `n`, with `0! = 1`. Which of the following approaches can be used to calculate the factorial of a given number `n`?
 
 #### --distractors--
 
-Placeholder distractor 1
+Add the numbers from `1` to `n`.
 
 ---
 
-Placeholder distractor 2
+Raise `n` to the power of `n-1`.
 
 ---
 
-Placeholder distractor 3
+Find the prime factorization of n and then multiply the prime factors together.
 
 #### --answer--
 
-Placeholder answer
+Multiplying numbers from `1` to `n` in a loop.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is the most efficient approach to search for a given integer within a distinct, sorted array of integers?
 
 #### --distractors--
 
-Placeholder distractor 1
+Linear Search.
 
 ---
 
-Placeholder distractor 2
+Sort the array and search using Linear Search.
 
 ---
 
-Placeholder distractor 3
+Create a hash table with the array elements and check for the given integer.
 
 #### --answer--
 
-Placeholder answer
+Binary Search.
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md b/curriculum/challenges/ukrainian/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
index a1b79f3fee..620fd972c8 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/quiz-nano/66f1b03b922a53cb231e1c0d.md
@@ -83,7 +83,7 @@ Type `nano [FILE]`, then press the **Enter** key
 
 #### --text--
 
-What type of files is nano capable of creating and modifiying?
+What type of files is nano capable of creating and modifying?
 
 #### --distractors--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md b/curriculum/challenges/ukrainian/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
index 36ba58d538..250a7ccad8 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/quiz-react-basics/66f1a2009e65c9a40a26d51e.md
@@ -17,439 +17,440 @@ dashedName: quiz-react-basics
 
 #### --text--
 
-Placeholder question
+How do you handle a click event in a React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<button onClick='handleClick()'>Click me</button>`
 
 ---
 
-Placeholder distractor 2
+`<button onClick={() => handleClick}>Click me</button>`
 
 ---
 
-Placeholder distractor 3
+`<button click={handleClick}>Click me</button>`
 
 #### --answer--
 
-Placeholder answer
+`<button onClick={handleClick}>Click me</button>`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is NOT a method for conditional rendering in React?
 
 #### --distractors--
 
-Placeholder distractor 1
+Ternary operators
 
 ---
 
-Placeholder distractor 2
+Logical `&&` operator
 
 ---
 
-Placeholder distractor 3
+`switch` statements
 
 #### --answer--
 
-Placeholder answer
+`setTimeout`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does `<React.Fragment>` do?
 
 #### --distractors--
 
-Placeholder distractor 1
+Wraps components with adding extra DOM nodes.
 
 ---
 
-Placeholder distractor 2
+Creates a new HTML element.
 
 ---
 
-Placeholder distractor 3
+Deletes an existing element.
 
 #### --answer--
 
-Placeholder answer
+Wraps components without adding extra DOM nodes.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of React Context?
 
 #### --distractors--
 
-Placeholder distractor 1
+Managing component styles.
 
 ---
 
-Placeholder distractor 2
+Passing data through the component.
 
 ---
 
-Placeholder distractor 3
+Controlling component re-renders.
 
 #### --answer--
 
-Placeholder answer
+Passing data through the component tree without props.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is TRUE about JSX?
 
 #### --distractors--
 
-Placeholder distractor 1
+JSX must always be written in separate files from JavaScript.
 
 ---
 
-Placeholder distractor 2
+JSX cannot use JavaScript expressions.
 
 ---
 
-Placeholder distractor 3
+JSX is not recommended for React applications.
 
 #### --answer--
 
-Placeholder answer
+JSX allows writing HTML within JavaScript code.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a con of using Vanilla JS instead of a framework?
 
 #### --distractors--
 
-Placeholder distractor 1
+Automatic state management.
 
 ---
 
-Placeholder distractor 2
+Built-in routing capabilities.
 
 ---
 
-Placeholder distractor 3
+Declarative UI rendering.
 
 #### --answer--
 
-Placeholder answer
+Increased verbosity and manual DOM manipulation.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a single-page application typically update the view?
 
 #### --distractors--
 
-Placeholder distractor 1
+By making a full server reload.
 
 ---
 
-Placeholder distractor 2
+By reloading the entire HTML document.
 
 ---
 
-Placeholder distractor 3
+By using server-side rendering only.
 
 #### --answer--
 
-Placeholder answer
+By updating only the necessary parts of the page.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to create a functional React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+Using classes only.
 
 ---
 
-Placeholder distractor 2
+Using the `React.Component` only.
 
 ---
 
-Placeholder distractor 3
+Using JavaScript constructors.
 
 #### --answer--
 
-Placeholder answer
+Using the `function` keyword or arrow functions.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is not a valid JSX element?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<div className='class'></div>`
 
 ---
 
-Placeholder distractor 2
+`<span>Hello World</span>`
 
 ---
 
-Placeholder distractor 3
+`<button>Click Me</button>`
 
 #### --answer--
 
-Placeholder answer
+`<img class='img'>`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is an example of a meta framework for React?
 
 #### --distractors--
 
-Placeholder distractor 1
+Vue.js
 
 ---
 
-Placeholder distractor 2
+Angular
 
 ---
 
-Placeholder distractor 3
+Svelte
 
 #### --answer--
 
-Placeholder answer
+Next.js
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What tool would you use to bootstrap a new React project?
 
 #### --distractors--
 
-Placeholder distractor 1
+Webpack
 
 ---
 
-Placeholder distractor 2
+npm
 
 ---
 
-Placeholder distractor 3
+Babel
 
 #### --answer--
 
-Placeholder answer
+Vite
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command installs dependencies listed in `package.json`?
 
 #### --distractors--
 
-Placeholder distractor 1
+`npm run`
 
 ---
 
-Placeholder distractor 2
+`npm update`
 
 ---
 
-Placeholder distractor 3
+`npm build`
 
 #### --answer--
 
-Placeholder answer
+`npm install`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How would you pass a `name` prop to a child component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<ChildComponent props="name" />`
 
 ---
 
-Placeholder distractor 2
+`<ChildComponent {props} />`
 
 ---
 
-Placeholder distractor 3
+`<ChildComponent {'John'} />`
 
 #### --answer--
 
-Placeholder answer
+`<ChildComponent name="Vignesh" />`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to conditionally render a component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<Home/>`
 
 ---
 
-Placeholder distractor 2
+`<Home>isLoggedIn</Home>`
 
 ---
 
-Placeholder distractor 3
+`<Home showIf={isLoggedIn} />`
 
 #### --answer--
 
-Placeholder answer
+`{isLoggedIn ? <Home /> : <Login />}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a child component, how do you access the `name` prop passed from a parent component?
 
 #### --distractors--
 
-Placeholder distractor 1
+`this.props.name`
 
 ---
 
-Placeholder distractor 2
+`this.name`
 
 ---
 
-Placeholder distractor 3
+`{props}.name`
 
 #### --answer--
 
-Placeholder answer
+`props.name`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to add an inline style in React?
 
 #### --distractors--
 
-Placeholder distractor 1
+`style={{ color: blue }}`
 
 ---
 
-Placeholder distractor 2
+`style="color: blue"`
 
 ---
 
-Placeholder distractor 3
+`style: { color: 'blue' }`
 
 #### --answer--
 
-Placeholder answer
+`style={{ color: 'blue' }}`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the correct way to conditionally render a React component?
 
 #### --distractors--
 
-Placeholder distractor 1
+Using `if` statements inside JSX.
 
 ---
 
-Placeholder distractor 2
+Declaring a new component inside a `render()` method.
 
 ---
 
-Placeholder distractor 3
+Using `while` loops inside JSX.
 
 #### --answer--
 
-Placeholder answer
+Using ternary operators or logical `&&` operators within JSX.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What causes a React component to re-render?
 
 #### --distractors--
 
-Placeholder distractor 1
+Directly modifying the state variable.
 
 ---
 
-Placeholder distractor 2
+Calling the `render()` method.
 
 ---
 
-Placeholder distractor 3
+Recompiling the project.
 
 #### --answer--
 
-Placeholder answer
+Changing the state using `setState`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How would you specify a required `name` prop using `PropTypes`?
 
 #### --distractors--
 
-Placeholder distractor 1
+`name: PropTypes.bool`
 
 ---
 
-Placeholder distractor 2
+`name: PropTypes.array.isRequired`
 
 ---
 
-Placeholder distractor 3
+`name: PropTypes.string`
 
 #### --answer--
 
-Placeholder answer
+`name: PropTypes.string.isRequired`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What file is used to define project dependencies in a React/Node.js project?
 
 #### --distractors--
 
-Placeholder distractor 1
+`package.lock.json`
 
 ---
 
-Placeholder distractor 2
+`index.html`
 
 ---
 
-Placeholder distractor 3
+`webpack.config.js`
 
 #### --answer--
 
-Placeholder answer
+`package.json`
+
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md b/curriculum/challenges/ukrainian/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
index 1674536fcf..7219b0ef41 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/quiz-relational-database/66f1af82732957c895f0b21a.md
@@ -17,439 +17,439 @@ dashedName: quiz-relational-database
 
 #### --text--
 
-Placeholder question
+What is a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A database structured to recognize non-relation between stored items.
 
 ---
 
-Placeholder distractor 2
+A database that stores unstructured data.
 
 ---
 
-Placeholder distractor 3
+A flat file-based system.
 
 #### --answer--
 
-Placeholder answer
+A database structured to recognize relations between stored items.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does a non-relational database differ from a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Non-relational databases use tables, while relational databases do not.
 
 ---
 
-Placeholder distractor 2
+Relational databases can store unstructured data.
 
 ---
 
-Placeholder distractor 3
+Non-relational databases are slower than relational databases.
 
 #### --answer--
 
-Placeholder answer
+Non-relational databases can store unstructured data.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `\l` command do when executed in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all schemas
 
 ---
 
-Placeholder distractor 2
+Lists all tables
 
 ---
 
-Placeholder distractor 3
+Connects to a database
 
 #### --answer--
 
-Placeholder answer
+Lists all databases
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following commands creates a new table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD TABLE`
 
 ---
 
-Placeholder distractor 2
+`NEW TABLE`
 
 ---
 
-Placeholder distractor 3
+`ALTER TABLE`
 
 #### --answer--
 
-Placeholder answer
+`CREATE TABLE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of a foreign key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To allow duplication of data.
 
 ---
 
-Placeholder distractor 2
+To uniquely identify a row in the table.
 
 ---
 
-Placeholder distractor 3
+To store large amounts of text data.
 
 #### --answer--
 
-Placeholder answer
+To create a relationship between two tables.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command will add a new column to an existing table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`ADD COLUMN column_name TO table_name data_type;`
 
 ---
 
-Placeholder distractor 2
+`INSERT COLUMN column_name INTO table_name data_type;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name ADD COLUMN column_name data_type;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name ADD COLUMN column_name data_type;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What type of relationship exists when one record in Table A corresponds to one or more records in Table B?
 
 #### --distractors--
 
-Placeholder distractor 1
+One-to-One (1-1)
 
 ---
 
-Placeholder distractor 2
+Many-to-Many (m-m)
 
 ---
 
-Placeholder distractor 3
+Many-to-one(m-1)
 
 #### --answer--
 
-Placeholder answer
+One-to-Many (1-m)
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary purpose of normalization in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+To increase the speed of data retrieval.
 
 ---
 
-Placeholder distractor 2
+To enforce security measures.
 
 ---
 
-Placeholder distractor 3
+To simplify the database schema.
 
 #### --answer--
 
-Placeholder answer
+To eliminate data redundancy and ensure data integrity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you delete a column from a table in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 2
+`DELETE COLUMN column_name FROM table_name;`
 
 ---
 
-Placeholder distractor 3
+`MODIFY TABLE table_name DELETE column_name;`
 
 #### --answer--
 
-Placeholder answer
+`ALTER TABLE table_name DROP COLUMN column_name;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the function of the `PRIMARY KEY` constraint in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+To link two tables together.
 
 ---
 
-Placeholder distractor 2
+To define the default value for a column.
 
 ---
 
-Placeholder distractor 3
+To allow null values in the column.
 
 #### --answer--
 
-Placeholder answer
+To ensure that the column contains unique values.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the command `\c` do in the PostgreSQL interactive terminal (`psql`)?
 
 #### --distractors--
 
-Placeholder distractor 1
+Lists all tables in the current database.
 
 ---
 
-Placeholder distractor 2
+Displays the current database connection details.
 
 ---
 
-Placeholder distractor 3
+Exits the `psql` shell.
 
 #### --answer--
 
-Placeholder answer
+Connects to the specified database.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which command inserts data into a table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`PUT VALUES`
 
 ---
 
-Placeholder distractor 2
+`UPDATE INTO`
 
 ---
 
-Placeholder distractor 3
+`ADD DATA`
 
 #### --answer--
 
-Placeholder answer
+`INSERT INTO`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you rename a column in SQL?
 
 #### --distractors--
 
-Placeholder distractor 1
+`MODIFY COLUMN`
 
 ---
 
-Placeholder distractor 2
+`CHANGE COLUMN`
 
 ---
 
-Placeholder distractor 3
+`ALTER COLUMN`
 
 #### --answer--
 
-Placeholder answer
+`RENAME COLUMN`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which query will delete all records from the employees table?
 
 #### --distractors--
 
-Placeholder distractor 1
+`REMOVE ALL`
 
 ---
 
-Placeholder distractor 2
+`TRUNCATE employees`
 
 ---
 
-Placeholder distractor 3
+`DROP RECORDS`
 
 #### --answer--
 
-Placeholder answer
+`DELETE FROM employees`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which SQL constraint specifically ensures that a column can contain only unique values, allowing nulls?
 
 #### --distractors--
 
-Placeholder distractor 1
+`NOT NULL`
 
 ---
 
-Placeholder distractor 2
+`FOREIGN KEY`
 
 ---
 
-Placeholder distractor 3
+`PRIMARY KEY`
 
 #### --answer--
 
-Placeholder answer
+`UNIQUE`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In a relational database, what is an index used for?
 
 #### --distractors--
 
-Placeholder distractor 1
+To store additional metadata about tables.
 
 ---
 
-Placeholder distractor 2
+To ensure unique values in a column.
 
 ---
 
-Placeholder distractor 3
+To enforce data integrity.
 
 #### --answer--
 
-Placeholder answer
+To speed up data retrieval.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does a one-to-one (1-1) relationship represent in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+Each record in Table A corresponds to one or more records in Table B.
 
 ---
 
-Placeholder distractor 2
+Each record in Table A corresponds to no records in Table B.
 
 ---
 
-Placeholder distractor 3
+Each record in Table A corresponds to multiple records in Table B and vice versa.
 
 #### --answer--
 
-Placeholder answer
+Each record in Table A corresponds to exactly one record in Table B.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What command will list all tables in the current PostgreSQL database?
 
 #### --distractors--
 
-Placeholder distractor 1
+`\l`
 
 ---
 
-Placeholder distractor 2
+`SHOW TABLES`
 
 ---
 
-Placeholder distractor 3
+`\t`
 
 #### --answer--
 
-Placeholder answer
+`\d`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a composite key in a relational database?
 
 #### --distractors--
 
-Placeholder distractor 1
+A key that is derived from another key.
 
 ---
 
-Placeholder distractor 2
+A key that changes frequently based on data updates.
 
 ---
 
-Placeholder distractor 3
+A key used exclusively for foreign key relationships.
 
 #### --answer--
 
-Placeholder answer
+A key that is composed of multiple columns to uniquely identify a record.
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md b/curriculum/challenges/ukrainian/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
index c15078f173..a4c9e345e4 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/quiz-responsive-web-design/66ed9034f45ce3ece4053ebd.md
@@ -17,439 +17,439 @@ dashedName: quiz-responsive-web-design
 
 #### --text--
 
-Placeholder question
+What CSS property is commonly used to create a flexible layout in a container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`display: block;`
 
 ---
 
-Placeholder distractor 2
+`display: inline;`
 
 ---
 
-Placeholder distractor 3
+`display: table;`
 
 #### --answer--
 
-Placeholder answer
+`display: flex;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the main purpose of media queries in responsive web design?
 
 #### --distractors--
 
-Placeholder distractor 1
+To change the color scheme of the page.
 
 ---
 
-Placeholder distractor 2
+To create animations.
 
 ---
 
-Placeholder distractor 3
+To adjust margins for print pages.
 
 #### --answer--
 
-Placeholder answer
+To apply different styles based on the screen size or device type.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which media feature in a media query checks the width of the browser window?
 
 #### --distractors--
 
-Placeholder distractor 1
+`min-height`
 
 ---
 
-Placeholder distractor 2
+`max-aspect-ratio`
 
 ---
 
-Placeholder distractor 3
+`resolution`
 
 #### --answer--
 
-Placeholder answer
+`min-width`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which CSS unit is relative to the width of the viewport?
 
 #### --distractors--
 
-Placeholder distractor 1
+`em`
 
 ---
 
-Placeholder distractor 2
+`px`
 
 ---
 
-Placeholder distractor 3
+`rem`
 
 #### --answer--
 
-Placeholder answer
+`vw`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does mobile-first design emphasize?
 
 #### --distractors--
 
-Placeholder distractor 1
+Designing for desktops and scaling down for smaller devices.
 
 ---
 
-Placeholder distractor 2
+Using only desktop breakpoints.
 
 ---
 
-Placeholder distractor 3
+Focusing on the highest resolution devices first.
 
 #### --answer--
 
-Placeholder answer
+Designing for smaller screens first and scaling up for larger devices.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which media query will apply styles when the device's width is between 600px and 1200px?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 1200px)`
 
 ---
 
-Placeholder distractor 2
+`@media screen and (min-width: 600px)`
 
 ---
 
-Placeholder distractor 3
+`@media screen and (width: 800px)`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 600px) and (max-width: 1200px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the default flex-direction value in Flexbox?
 
 #### --distractors--
 
-Placeholder distractor 1
+`column`
 
 ---
 
-Placeholder distractor 2
+`row-reverse`
 
 ---
 
-Placeholder distractor 3
+`column-reverse`
 
 #### --answer--
 
-Placeholder answer
+`row`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In Flexbox, how do you distribute space between items in a container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`align-items`
 
 ---
 
-Placeholder distractor 2
+`flex-grow`
 
 ---
 
-Placeholder distractor 3
+`flex-wrap`
 
 #### --answer--
 
-Placeholder answer
+`justify-content`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you apply a grid layout to a container in CSS?
 
 #### --distractors--
 
-Placeholder distractor 1
+`display: flexbox;`
 
 ---
 
-Placeholder distractor 2
+`display: block;`
 
 ---
 
-Placeholder distractor 3
+`display: table;`
 
 #### --answer--
 
-Placeholder answer
+`display: grid;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What does the `fr` unit represent in CSS Grid?
 
 #### --distractors--
 
-Placeholder distractor 1
+Flexible ratio
 
 ---
 
-Placeholder distractor 2
+Frame ratio
 
 ---
 
-Placeholder distractor 3
+Fixed region
 
 #### --answer--
 
-Placeholder answer
+Fraction of available space
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following is a valid media query for targeting devices with a resolution of 2x or higher?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media (resolution: 2x)`
 
 ---
 
-Placeholder distractor 2
+`@media (max-resolution: 2x)`
 
 ---
 
-Placeholder distractor 3
+`@media screen and (min-width: 1200px)`
 
 #### --answer--
 
-Placeholder answer
+`@media (min-resolution: 2px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which property controls the number of columns in a grid container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`grid-template-rows`
 
 ---
 
-Placeholder distractor 2
+`grid-auto-rows`
 
 ---
 
-Placeholder distractor 3
+`grid-template`
 
 #### --answer--
 
-Placeholder answer
+`grid-template-columns`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you set up a media query for screens larger than 768px?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 768px)`
 
 ---
 
-Placeholder distractor 2
+`@media only screen and (width > 768px)`
 
 ---
 
-Placeholder distractor 3
+`@media (screen-width: 768px)`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 768px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of the `flex-wrap` property in Flexbox?
 
 #### --distractors--
 
-Placeholder distractor 1
+To align items along the cross axis.
 
 ---
 
-Placeholder distractor 2
+To reverse the order of flex items.
 
 ---
 
-Placeholder distractor 3
+To distribute space evenly between items.
 
 #### --answer--
 
-Placeholder answer
+To allow flex items to wrap onto multiple lines.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which of the following breakpoints is commonly used for tablets in responsive web design?
 
 #### --distractors--
 
-Placeholder distractor 1
+`480px`
 
 ---
 
-Placeholder distractor 2
+`1920px`
 
 ---
 
-Placeholder distractor 3
+`2560px`
 
 #### --answer--
 
-Placeholder answer
+`768px`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you center an item horizontally in a flex container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`align-items: center;`
 
 ---
 
-Placeholder distractor 2
+`flex-direction: row;`
 
 ---
 
-Placeholder distractor 3
+`flex-grow: 1;`
 
 #### --answer--
 
-Placeholder answer
+`justify-content: center;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+In mobile-first design, which media query should be used to target larger screens?
 
 #### --distractors--
 
-Placeholder distractor 1
+`@media screen and (max-width: 600px)`
 
 ---
 
-Placeholder distractor 2
+`@media screen and (height: 600px)`
 
 ---
 
-Placeholder distractor 3
+`@media only screen`
 
 #### --answer--
 
-Placeholder answer
+`@media screen and (min-width: 600px)`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which CSS property is used to create a layout that adjusts based on screen size without media queries?
 
 #### --distractors--
 
-Placeholder distractor 1
+`float`
 
 ---
 
-Placeholder distractor 2
+`display: block`
 
 ---
 
-Placeholder distractor 3
+`width: 100%`
 
 #### --answer--
 
-Placeholder answer
+`flex`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you prevent a flex container from shrinking smaller than its content?
 
 #### --distractors--
 
-Placeholder distractor 1
+`flex-shrink: 1;`
 
 ---
 
-Placeholder distractor 2
+`flex-direction: column;`
 
 ---
 
-Placeholder distractor 3
+`align-items: flex-start;`
 
 #### --answer--
 
-Placeholder answer
+`flex-shrink: 0;`
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How do you create a responsive image that scales with the width of its container?
 
 #### --distractors--
 
-Placeholder distractor 1
+`max-height: 100%;`
 
 ---
 
-Placeholder distractor 2
+`object-fit: contain;`
 
 ---
 
-Placeholder distractor 3
+`min-width: 100%;`
 
 #### --answer--
 
-Placeholder answer
+`max-width: 100%;`
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md b/curriculum/challenges/ukrainian/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
index befb7d802c..1664d1f9f7 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/quiz-styling-forms/66ed9043f45ce3ece4053ebf.md
@@ -17,439 +17,439 @@ dashedName: quiz-styling-forms
 
 #### --text--
 
-Placeholder question
+Which of the following is a common issue with the `datetime-local` input type?
 
 #### --distractors--
 
-Placeholder distractor 1
+It cannot be used with CSS variables.
 
 ---
 
-Placeholder distractor 2
+It automatically submits the form upon value selection.
 
 ---
 
-Placeholder distractor 3
+It does not support real-time updates.
 
 #### --answer--
 
-Placeholder answer
+The input format is different across browsers.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why is it important to use `box-sizing: border-box;` when styling text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the text input focusable with a keyboard.
 
 ---
 
-Placeholder distractor 2
+It hides the input’s placeholder text.
 
 ---
 
-Placeholder distractor 3
+It removes the default browser styling for inputs.
 
 #### --answer--
 
-Placeholder answer
+It ensures padding and borders are included in the element’s width and height.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a benefit of setting a max-width for text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It prevents users from entering long text.
 
 ---
 
-Placeholder distractor 2
+It makes the input unresponsive on larger screens.
 
 ---
 
-Placeholder distractor 3
+It automatically adjusts the font size.
 
 #### --answer--
 
-Placeholder answer
+It ensures the input doesn’t stretch too wide on larger screens.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should you add `:focus` styles to text inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It hides the input’s border.
 
 ---
 
-Placeholder distractor 2
+It disables user input.
 
 ---
 
-Placeholder distractor 3
+It forces the browser to ignore default styles.
 
 #### --answer--
 
-Placeholder answer
+It improves accessibility by making the input easier to identify when focused.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can you prevent text inputs from being cut off when resized?
 
 #### --distractors--
 
-Placeholder distractor 1
+By adding `overflow: hidden;`.
 
 ---
 
-Placeholder distractor 2
+By setting a fixed height and width.
 
 ---
 
-Placeholder distractor 3
+By removing padding from the input.
 
 #### --answer--
 
-Placeholder answer
+By using padding and line-height with flexible units like `em` or `rem`.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why is it important to use descriptive placeholder text in form inputs?
 
 #### --distractors--
 
-Placeholder distractor 1
+It helps to pre-fill the form for the user.
 
 ---
 
-Placeholder distractor 2
+It automatically validates the input as the user types.
 
 ---
 
-Placeholder distractor 3
+It hides the input label, reducing visual clutter.
 
 #### --answer--
 
-Placeholder answer
+It provides users with guidance on the expected input format without cluttering the interface.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should you avoid using `outline: none;` without adding a custom focus style?
 
 #### --distractors--
 
-Placeholder distractor 1
+It reduces the size of the text input.
 
 ---
 
-Placeholder distractor 2
+It hides the input from assistive technology users.
 
 ---
 
-Placeholder distractor 3
+It makes the input read-only.
 
 #### --answer--
 
-Placeholder answer
+It removes the focus outline, which may confuse users about which field is selected.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the purpose of using Flexbox or Grid for form layout?
 
 #### --distractors--
 
-Placeholder distractor 1
+To make form controls appear in random positions.
 
 ---
 
-Placeholder distractor 2
+To make the form smaller on mobile devices.
 
 ---
 
-Placeholder distractor 3
+To hide form controls on large screens.
 
 #### --answer--
 
-Placeholder answer
+To create a well-structured and responsive form layout.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Why should input elements be styled with a solid border?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the form look more colorful.
 
 ---
 
-Placeholder distractor 2
+It automatically increases form field size.
 
 ---
 
-Placeholder distractor 3
+It forces users to zoom in on mobile devices.
 
 #### --answer--
 
-Placeholder answer
+To ensure input fields are clearly visible and easily recognizable as form controls.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How does increasing the margin between form elements affect form usability?
 
 #### --distractors--
 
-Placeholder distractor 1
+It decreases accessibility on mobile devices.
 
 ---
 
-Placeholder distractor 2
+It prevents users from submitting the form.
 
 ---
 
-Placeholder distractor 3
+It hides form labels.
 
 #### --answer--
 
-Placeholder answer
+It improves readability by helping users see the grouping of related form elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is the primary reason for using `appearance: none` in form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+To add new default styles to form elements.
 
 ---
 
-Placeholder distractor 2
+To enable form elements to appear larger on mobile devices.
 
 ---
 
-Placeholder distractor 3
+To disable form validation for specific elements.
 
 #### --answer--
 
-Placeholder answer
+To remove the default browser styling from form elements and apply custom styles.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+Which type of form elements is commonly styled using `appearance: none` to remove their default look?
 
 #### --distractors--
 
-Placeholder distractor 1
+`<label>` elements
 
 ---
 
-Placeholder distractor 2
+`<div>` elements
 
 ---
 
-Placeholder distractor 3
+`<span>` elements
 
 #### --answer--
 
-Placeholder answer
+`<input>` and `<select>` elements.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+When should you avoid using `appearance: none` on form controls?
 
 #### --distractors--
 
-Placeholder distractor 1
+When you want to fully customize the form control's style.
 
 ---
 
-Placeholder distractor 2
+When the browser’s default styles are hard to override.
 
 ---
 
-Placeholder distractor 3
+When you are building a mobile-first responsive form.
 
 #### --answer--
 
-Placeholder answer
+When relying on the accessibility and familiarity of native form control appearances.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+How can using `appearance: none` improve the design of radio buttons and checkboxes?
 
 #### --distractors--
 
-Placeholder distractor 1
+It increases the size of radio buttons and checkboxes.
 
 ---
 
-Placeholder distractor 2
+It automatically creates animation effects for radio buttons and checkboxes.
 
 ---
 
-Placeholder distractor 3
+It prevents users from interacting with radio buttons and checkboxes.
 
 #### --answer--
 
-Placeholder answer
+It removes the browser's default appearance, allowing you to fully customize the design.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What is a common issue that arises when using `appearance: none` on a select element?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the `select` element invisible.
 
 ---
 
-Placeholder distractor 2
+It disables the dropdown functionality.
 
 ---
 
-Placeholder distractor 3
+It breaks form validation.
 
 #### --answer--
 
-Placeholder answer
+It removes the dropdown arrow, requiring you to add a custom arrow or indicator.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can occur when using HTML5 validation attributes like `required` without custom messaging?
 
 #### --distractors--
 
-Placeholder distractor 1
+It automatically validates all inputs without user interaction.
 
 ---
 
-Placeholder distractor 2
+It prevents the form from being submitted if all fields are filled.
 
 ---
 
-Placeholder distractor 3
+It allows users to see detailed error messages for each input.
 
 #### --answer--
 
-Placeholder answer
+Users may not understand why their submission fails, leading to frustration if no helpful feedback is provided.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can arise when no margin is added between the header and the content?
 
 #### --distractors--
 
-Placeholder distractor 1
+It makes the content load faster.
 
 ---
 
-Placeholder distractor 2
+It improves the overall readability of the content.
 
 ---
 
-Placeholder distractor 3
+It automatically centers the content under the header.
 
 #### --answer--
 
-Placeholder answer
+The content may appear cramped or overlap with the header, making it difficult to read and reducing visual clarity.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue may arise with custom fonts when used in form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+They may not display correctly on all browsers.
 
 ---
 
-Placeholder distractor 2
+They always load faster than system fonts.
 
 ---
 
-Placeholder distractor 3
+They prevent the use of responsive design.
 
 #### --answer--
 
-Placeholder answer
+Custom fonts may not be accessible to users if they are not properly loaded or fallback fonts are not specified.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What issue can arise when using `overflow: hidden;` on form elements?
 
 #### --distractors--
 
-Placeholder distractor 1
+It improves the form’s overall accessibility.
 
 ---
 
-Placeholder distractor 2
+It automatically adjusts the form to fit within smaller screens.
 
 ---
 
-Placeholder distractor 3
+It ensures that all text content is always visible.
 
 #### --answer--
 
-Placeholder answer
+It can cause content, such as text or labels, to be cut off if the element is resized or if padding is used incorrectly.
 
 ### --question--
 
 #### --text--
 
-Placeholder question
+What common problem arises when submitting form data that includes `color` input?
 
 #### --distractors--
 
-Placeholder distractor 1
+The `color` value gets automatically converted to grayscale.
 
 ---
 
-Placeholder distractor 2
+The browser displays an alert before submitting the form.
 
 ---
 
-Placeholder distractor 3
+It replaces the `color` value with a default value.
 
 #### --answer--
 
-Placeholder answer
+The `color` input value is submitted as a hexadecimal string, which may require formatting on the server.
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
new file mode 100644
index 0000000000..8931930aa3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd5a93fd62bb35968adeab.md
@@ -0,0 +1,61 @@
+---
+id: 61fd5a93fd62bb35968adeab
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Begin your project by giving your `head` element a `link` element for your stylesheet.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert(/<link/.test(code))
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i))
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
new file mode 100644
index 0000000000..ae59503cca
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6343fb42013d99bcd7f3.md
@@ -0,0 +1,48 @@
+---
+id: 61fd6343fb42013d99bcd7f3
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Within your `body` element, nest a `section` element within a `main` element.
+
+# --hints--
+
+The first element inside the `body` element should be your `main` element.
+
+```js
+assert(document.querySelector('body')?.children?.[0]?.localName === 'main');
+```
+
+You should have a `section` element within your `main` element.
+
+```js
+assert(document.querySelector('main')?.children?.[0]?.localName === 'section');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
new file mode 100644
index 0000000000..345621fb1d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd66c687e610436494c6f1.md
@@ -0,0 +1,52 @@
+---
+id: 61fd66c687e610436494c6f1
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `section` element, add an `h1` element with a nested `span` element.
+
+# --hints--
+
+Your `section` element should have an `h1` element.
+
+```js
+assert(document.querySelector('section')?.children?.[0]?.localName === 'h1');
+```
+
+Your `h1` element should have a `span` element.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.localName === 'span');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+--fcc-editable-region--
+      <section>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
new file mode 100644
index 0000000000..0be766dccc
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd67a656743144844941cb.md
@@ -0,0 +1,78 @@
+---
+id: 61fd67a656743144844941cb
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Screen readers announce HTML elements based on the document flow. We will eventually want the balance sheet to have a heading of "Balance Sheet" and a subheading of "AcmeWidgetCorp". However, this order does not make sense if announced by a screen reader.
+
+Give your existing `span` the `class` attribute set to `flex`, and add two `span` elements within it. Give the first the text `AcmeWidgetCorp`. Give the second the text `Balance Sheet`. You will use CSS to reverse the order of the text on the page, but the HTML order will make more sense for a screen reader.
+
+# --hints--
+
+Your existing `span` element should have the `class` attribute set to `flex`.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
+```
+
+Your existing `span` element should have two new `span` elements within it.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
+assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
+```
+
+Your new `span` elements should not have a `class` attribute.
+
+```js
+assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
+assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
+```
+
+Your first new `span` element should have the text `AcmeWidgetCorp`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
+```
+
+Your second new `span` element should have the text `Balance Sheet`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+--fcc-editable-region--
+          <span>
+          </span>
+--fcc-editable-region--
+        </h1>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
new file mode 100644
index 0000000000..2d5052298f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6ab779390f49148773bb.md
@@ -0,0 +1,65 @@
+---
+id: 61fd6ab779390f49148773bb
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Below your `h1` element, create a `div` element. Give it an `id` attribute set to `years`. You want this particular element to be hidden from screen readers, so give it the `aria-hidden` attribute set to `true`.
+
+# --hints--
+
+You should create a new `div` element after your `h1` element.
+
+```js
+assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div');
+```
+
+Your new `div` element should have an `id` attribute set to `years`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('id') === 'years');
+```
+
+Your new `div` element should have the `aria-hidden` attribute set to `true`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
new file mode 100644
index 0000000000..f01ff5c2b6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6b7c83dbf54a08cf0498.md
@@ -0,0 +1,79 @@
+---
+id: 61fd6b7c83dbf54a08cf0498
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within your `div` element, add three `span` elements. Give each of them a `class` attribute set to `year`, and add the following text (in order): `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Your `div` element should have three `span` elements.
+
+```js
+assert(document.querySelector('div')?.children?.length === 3);
+```
+
+Each `span` element should have a `class` attribute set to `year`.
+
+```js
+const spans = [...document.querySelector('div')?.children];
+spans.forEach(span => assert(span?.classList?.contains('year')));
+```
+
+Your first `span` should have the text `2019`.
+
+```js
+assert(document.querySelector('div')?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` should have the text `2020`.
+
+```js
+assert(document.querySelector('div')?.children?.[1]?.textContent === '2020');
+```
+
+Your third `span` should have the text `2021`.
+
+```js
+assert(document.querySelector('div')?.children?.[2]?.textContent === '2021');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+        <div id="years" aria-hidden="true">
+        </div>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
new file mode 100644
index 0000000000..b8ccec8b81
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd6cc9475a784b7776233e.md
@@ -0,0 +1,80 @@
+---
+id: 61fd6cc9475a784b7776233e
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Below your existing `div` element, add a new `div` element with a `class` set to `table-wrap`. This will be the container for your tables.
+
+Within that, add three `table` elements. You will be using CSS to style these into a single table, but using separate tables will help screen readers understand the document flow.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+Your new `div` element should have the `class` set to `table-wrap`.
+
+```js
+assert(document.querySelector('.table-wrap')?.localName === 'div');
+```
+
+Your `.table-wrap` element should come after your existing `div`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap'));
+```
+
+Your `.table-wrap` element should have three `table` elements.
+
+```js
+const children = [...(document.querySelector('.table-wrap')?.children ?? [])];
+assert(children?.length === 3);
+children.forEach(child => assert(child?.localName === 'table'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
new file mode 100644
index 0000000000..630d13d656
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd70336ebb3e4f62ee81ba.md
@@ -0,0 +1,73 @@
+---
+id: 61fd70336ebb3e4f62ee81ba
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+HTML tables use the `caption` element to describe what the table is about. The `caption` element should always be the first child of a `table`, but can be positioned with the `caption-side` CSS property.
+
+Add a `caption` element to your first `table`, and give it the text `Assets`.
+
+# --hints--
+
+Your first `table` element should have a `caption` element.
+
+```js
+assert(document.querySelector('table')?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Assets`.
+
+```js
+assert(document.querySelector('caption')?.textContent === 'Assets');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
new file mode 100644
index 0000000000..2e0c363fd1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd719788899952e67692b9.md
@@ -0,0 +1,86 @@
+---
+id: 61fd719788899952e67692b9
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+The `thead` and `tbody` elements are used to indicate which portion of your table is the header, and which portion contains the primary data or content.
+
+Add a `thead` and `tbody` to your first `table`, below the `caption` element.
+
+# --hints--
+
+Your first `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('thead'));
+```
+
+Your first `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+            <caption>Assets</caption>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
new file mode 100644
index 0000000000..083e60b9e9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd71d596e8f253b9408b39.md
@@ -0,0 +1,86 @@
+---
+id: 61fd71d596e8f253b9408b39
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+The `tr` element is used to indicate a table row. Add a `tr` element within your `thead` element. In your new `tr` element, add a `td` element, followed by three `th` elements.
+
+The `td` element indicates a data cell, while the `th` element indicates a header cell.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
new file mode 100644
index 0000000000..2bb7733877
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd75ea7f663457612dba02.md
@@ -0,0 +1,125 @@
+---
+id: 61fd75ea7f663457612dba02
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Within each of your new `th` elements, nest a `span` element with the `class` set to `sr-only year`. Give them the following text (in order): `2019`, `2020`, and `2021`.
+
+Give your third `th` element the `class` attribute set to `current`.
+
+Leave the `td` element empty. This element exists only to ensure your table has a four-column layout and associate the headers with the correct columns.
+
+# --hints--
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only year`.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+  assert(th?.children?.[0]?.classList?.contains('year'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your third `th` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current'));
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
new file mode 100644
index 0000000000..e45bc92ba6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd7648a7ba2e5882436831.md
@@ -0,0 +1,96 @@
+---
+id: 61fd7648a7ba2e5882436831
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Within your `tbody` element, add four `tr` elements. Give the first three a `class` attribute set to `data`, and the fourth a `class` attribute set to `total`.
+
+# --hints--
+
+Your `tbody` element should have four `tr` elements.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+Your first three `tr` elements should have the `class` attribute set to `data`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+Your fourth `tr` element should have the `class` attribute set to `total`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+--fcc-editable-region--
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
new file mode 100644
index 0000000000..413771781f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd778081276b59d59abad6.md
@@ -0,0 +1,134 @@
+---
+id: 61fd778081276b59d59abad6
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+In your first `tr`, add a `th` element with the text `Cash This is the cash we currently have on hand.`. Wrap all of that text except `Cash` in a `span` element with the `class` set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$25`, `$30`, `$28`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your first `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Cash This is the cash we currently have on hand.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.');
+```
+
+You should wrap the text `This is the cash we currently have on hand.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$25`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$25');
+```
+
+Your second `td` element should have the text `$30`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$30');
+```
+
+Your third `td` element should have the text `$28`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$28');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
new file mode 100644
index 0000000000..65782d0b1e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
@@ -0,0 +1,138 @@
+---
+id: 61fd77f7ad2aeb5ae34d07d6
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In your second `tr` element, add a `th` element with the text `Checking Our primary transactional account.`. Wrap that text, except for `Checking`, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$54`, `$56`, `$53`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your second `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Checking Our primary transactional account.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.');
+```
+
+You should wrap the text `Our primary transactional account.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$54`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$54');
+```
+
+Your second `td` element should have the text `$56`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$56');
+```
+
+Your third `td` element should have the text `$53`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$53');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
new file mode 100644
index 0000000000..e0aef0b407
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd78621573aa5e8b512f5e.md
@@ -0,0 +1,142 @@
+---
+id: 61fd78621573aa5e8b512f5e
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In your third `tr` element, add a `th` element with the text `Savings Funds set aside for emergencies.`. Wrap that text, except for `Savings`, in a `span` element with the `class` attribute set to `description`.
+
+Following that, add three `td` elements with the following text (in order): `$500`, `$650`, `$728`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your third `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Savings Funds set aside for emergencies.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.');
+```
+
+You should wrap the text `Funds set aside for emergencies.` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$500`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+Your second `td` element should have the text `$650`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650');
+```
+
+Your third `td` element should have the text `$728`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
new file mode 100644
index 0000000000..2f7c60f29f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
@@ -0,0 +1,146 @@
+---
+id: 61fd7a160ed17960e971f28b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+In your fourth `tr` element, add a `th` element with the text `Total Assets`. Wrap the text `Assets` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$579`, `$736`, `$809`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your fourth `tr` should have a `th` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Assets`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets');
+```
+
+You should wrap the text `Assets` in a `span` element.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Assets');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$579`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579');
+```
+
+Your second `td` element should have the text `$736`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736');
+```
+
+Your third `td` element should have the text `$809`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
+```
+
+Your third `td` element should have the `class` attribute set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
new file mode 100644
index 0000000000..184f5dee82
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd7b3fcaa5406257abc5d1.md
@@ -0,0 +1,130 @@
+---
+id: 61fd7b3fcaa5406257abc5d1
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Time to move on to your second table. Start by giving it a `caption` element set to `Liabilities`. Then add your `thead` and `tbody`.
+
+# --hints--
+
+Your second `table` element should have a `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities');
+```
+
+Your second `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead'));
+```
+
+Your second `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
new file mode 100644
index 0000000000..40f7da84cd
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd8e491324ce717da97ffe.md
@@ -0,0 +1,119 @@
+---
+id: 61fd8e491324ce717da97ffe
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Within your `thead`, add a `tr`. Inside that, add a `td` and three `th` elements.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
new file mode 100644
index 0000000000..55c85fb133
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd8fd08af43372f02952d0.md
@@ -0,0 +1,149 @@
+---
+id: 61fd8fd08af43372f02952d0
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Give each `th` element a `span` element with the class set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
new file mode 100644
index 0000000000..abec451e89
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9126aa72a474301fc49f.md
@@ -0,0 +1,131 @@
+---
+id: 61fd9126aa72a474301fc49f
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Within the `tbody` element, add four `tr` elements. Give the first three the `class` attribute set to `data`, and the fourth the `class` attribute set to `total`.
+
+# --hints--
+
+Your `tbody` element should have four `tr` elements.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+Your first three `tr` elements should have the `class` attribute set to `data`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+Your fourth `tr` element should have the `class` attribute set to `total`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
new file mode 100644
index 0000000000..58a2b1e9bc
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd933ba685de776a94997e.md
@@ -0,0 +1,169 @@
+---
+id: 61fd933ba685de776a94997e
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Within the first `tr`, add a `th` element with the text `Loans The outstanding balance on our startup loan.`. Wrap that text, except for `Loans`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$500`, `$250`, and `$0`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your first `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Loans The outstanding balance on our startup loan.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.');
+```
+
+You should wrap the text `The outstanding balance on our startup loan.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$500`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+Your second `td` element should have the text `$250`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$250');
+```
+
+Your third `td` element should have the text `$0`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$0');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
new file mode 100644
index 0000000000..1f8839c68a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd94056e0355785fbba4d3.md
@@ -0,0 +1,173 @@
+---
+id: 61fd94056e0355785fbba4d3
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Within the second `tr`, add a `th` element with the text `Expenses Annual anticipated expenses, such as payroll.`. Wrap that text, except for `Expenses`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$200`, `$300`, and `$400`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your second `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Expenses Annual anticipated expenses, such as payroll.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.');
+```
+
+You should wrap the text `Annual anticipated expenses, such as payroll.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$200`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$200');
+```
+
+Your second `td` element should have the text `$300`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$300');
+```
+
+Your third `td` element should have the text `$400`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$400');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
new file mode 100644
index 0000000000..a7289e5738
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
@@ -0,0 +1,177 @@
+---
+id: 61fd986ddbcbd47ba8fbc5ec
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Within the third `tr`, add a `th` element with the text `Credit The outstanding balance on our credit card.`. Wrap that text, except for `Credit`, within a `span` element with the `class` set to `description`.
+
+Add three `td` elements below that, and give them the following text, in order: `$50`, `$50`, and `$75`. Give the third `td` element a `class` set to `current`.
+
+# --hints--
+
+Your third `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Credit The outstanding balance on our credit card.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.');
+```
+
+You should wrap the text `The outstanding balance on our credit card.` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.');
+```
+
+Your `span` element should have the `class` attribute set to `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$50');
+```
+
+Your second `td` element should have the text `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$50');
+```
+
+Your third `td` element should have the text `$75`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$75');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
new file mode 100644
index 0000000000..630afca73e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -0,0 +1,181 @@
+---
+id: 61fd990577d8227dd93fbeeb
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In your fourth `tr` element, add a `th` element with the text `Total Liabilities`. Wrap the text `Liabilities` in a `span` element with the `class` attribute set to `sr-only`.
+
+Following that, add three `td` elements with the following text (in order): `$750`, `$600`, `$475`. Give the third `td` element a `class` attribute set to `current`.
+
+# --hints--
+
+Your fourth `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities');
+```
+
+You should wrap the text `Liabilities` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$750`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750');
+```
+
+Your second `td` element should have the text `$600`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600');
+```
+
+Your third `td` element should have the text `$475`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
new file mode 100644
index 0000000000..e2d2e4f80e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
@@ -0,0 +1,165 @@
+---
+id: 61fd9a4ff2fc4481b9157bd7
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+For your third table, add a `caption` with the text `Net Worth`, and set up a table header and table body.
+
+# --hints--
+
+Your third `table` element should have a `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption');
+```
+
+Your `caption` element should have the text `Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth');
+```
+
+Your third `table` element should have a `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead'));
+```
+
+Your third `table` element should have a `tbody` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody'));
+```
+
+Your `thead` element should be immediately below your `caption` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+Your `tbody` element should be immediately below your `thead` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
new file mode 100644
index 0000000000..a6d495c907
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9ad665a4a282c8106be3.md
@@ -0,0 +1,198 @@
+---
+id: 61fd9ad665a4a282c8106be3
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Within your `thead`, create a `tr` element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+
+# --hints--
+
+Your `thead` element should have a `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+Your `tr` element should have a `td` element as the first child.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+Your `tr` element should have three `th` elements, after the `td` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+Each of your `th` elements should have a `span` element.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+Each of your new `span` elements should have the `class` attribute set to `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+Your first `span` element should have the text `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+Your second `span` element should have the text `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+Your third `span` element should have the text `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+Your `td` element should be empty.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
new file mode 100644
index 0000000000..d0c5452488
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9b7285bde783ad5b8aac.md
@@ -0,0 +1,208 @@
+---
+id: 61fd9b7285bde783ad5b8aac
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Within the `tbody`, add a `tr` with the `class` set to `total`. In that, add a `th` with the text `Total Net Worth`, and wrap `Net Worth` in a `span` with the `class` set to `sr-only`.
+
+Then add three `td` elements, giving the third a `class` set to `current`, and giving each the following text: `$-171`, `$136`, `$334`.
+
+# --hints--
+
+Your `tbody` element should have one `tr` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
+```
+
+Your `tr` element should have the `class` set to `total`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total'));
+```
+
+Your `tr` should have a `th` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+Your `th` element should have the text `Total Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth');
+```
+
+You should wrap the text `Net Worth` in a `span` element.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth');
+```
+
+Your `span` element should have the `class` attribute set to `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+You should have three `td` elements.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+Your first `td` element should have the text `$-171`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171');
+```
+
+Your second `td` element should have the text `$136`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136');
+```
+
+Your third `td` element should have the text `$334`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334');
+```
+
+Your third `td` element should have the `class` set to `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
new file mode 100644
index 0000000000..a48fc24190
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fd9d9fbdfe078800317055.md
@@ -0,0 +1,158 @@
+---
+id: 61fd9d9fbdfe078800317055
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Time to style your table. Start by resetting the box model. Create an `html` selector and give it a `box-sizing` property set to `border-box`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have a `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
new file mode 100644
index 0000000000..2830b424ad
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fda307bde0b091cf7d884a.md
@@ -0,0 +1,168 @@
+---
+id: 61fda307bde0b091cf7d884a
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Create a `body` selector and give it a `font-family` property set to `sans-serif` and a `color` set to `#0a0a23`.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `font-family` property set to `sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family') === 'sans-serif');
+```
+
+Your `body` selector should have a `color` property set to `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
new file mode 100644
index 0000000000..fb2d7e6f93
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fda339eadcfd92a6812bed.md
@@ -0,0 +1,171 @@
+---
+id: 61fda339eadcfd92a6812bed
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Before you get too far into your styling, you should make use of the `sr-only` class. You can use CSS to make elements with this class completely hidden from the visual page, but still be announced by screen readers.
+
+The CSS you are about to write is a common set of properties used to ensure elements are completely hidden visually.
+
+The `span[class~="sr-only"]` selector will select any `span` element whose `class` *includes* `sr-only`. Create that selector, and give it a `border` property set to `0`.
+
+# --hints--
+
+You should have an `span[class~="sr-only"]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]'));
+```
+
+Your `span[class~="sr-only"]` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
new file mode 100644
index 0000000000..546bcc8998
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdac1e31692f9a9ad97295.md
@@ -0,0 +1,172 @@
+---
+id: 61fdac1e31692f9a9ad97295
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The CSS `clip` property is used to define the visible portions of an element. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
+
+The `clip-path` property determines the shape the `clip` property should take. Set the `clip-path` property to the value of `inset(50%)`, forming the clip-path into a rectangle within the element.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `clip` property set to `rect(1px, 1px, 1px, 1px)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)');
+```
+
+Your `span[class~="sr-only"]` selector should have a `clip-path` property set to `inset(50%)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
new file mode 100644
index 0000000000..e964962f3f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdaea3999cb19d76ce717b.md
@@ -0,0 +1,172 @@
+---
+id: 61fdaea3999cb19d76ce717b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Now you need to size these elements down. Give your `span[class~="sr-only"]` selector a `width` and `height` property set to `1px`.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `width` property set to `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px');
+```
+
+Your `span[class~="sr-only"]` selector should have a `height` property set to `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
new file mode 100644
index 0000000000..2865fbb968
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
@@ -0,0 +1,174 @@
+---
+id: 61fdaf9ff894b6a084ecdc1b
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+To prevent the text content from overflowing, give your `span[class~="sr-only"]` selector an `overflow` property set to `hidden` and a `white-space` property set to `nowrap`.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have an `overflow` property set to `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden');
+```
+
+Your `span[class~="sr-only"]` selector should have a `white-space` property set to `nowrap`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
new file mode 100644
index 0000000000..5a05cb1e81
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
@@ -0,0 +1,182 @@
+---
+id: 61fdafe6f07fd7a1c6785bc2
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Finally, you need to take these hidden elements out of the document flow. Give the `span[class~="sr-only"]` selector a `position` property set to `absolute`, a `padding` property set to `0`, and a `margin` property set to `-1px`. This will ensure that not only are they no longer visible, but they are not even within the page view.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute');
+```
+
+Your `span[class~="sr-only"]` selector should have a `padding` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px');
+```
+
+Your `span[class~="sr-only"]` selector should have a `margin` property set to `-1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
new file mode 100644
index 0000000000..f23a9e5e35
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/61fdb04d9939f0a26ca51c2b.md
@@ -0,0 +1,192 @@
+---
+id: 61fdb04d9939f0a26ca51c2b
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Time to style your table heading. Create an `h1` selector. Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`.
+
+# --hints--
+
+You should have an `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+Your `h1` selector should have a `max-width` property set to `37.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width') === '37.25rem');
+```
+
+Your `h1` selector should have a `margin` property set to `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin') === '0px auto');
+```
+
+Your `h1` selector should have a `padding` property set to `1.5rem 1.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding') === '1.5rem 1.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
new file mode 100644
index 0000000000..04dd430379
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620159cd5431aa34bc6a4c9c.md
@@ -0,0 +1,198 @@
+---
+id: 620159cd5431aa34bc6a4c9c
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Target your flex container with an `h1 .flex` selector. Give it a `display` property set to `flex` to enable the flexbox layout. Then set the `flex-direction` property to `column-reverse` - this will display the nested elements from bottom to top. Finally, set the `gap` property to `1rem` to create some space between the elements.
+
+# --hints--
+
+You should have an `h1 .flex` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex'));
+```
+
+Your `h1 .flex` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('display') === 'flex');
+```
+
+Your `h1 .flex` selector should have a `flex-direction` property set to `column-reverse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('flex-direction') === 'column-reverse');
+```
+
+Your `h1 .flex` selector should have a `gap` property set to `1rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
new file mode 100644
index 0000000000..c376c6a27a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62015a5da1c95c358f079ebb.md
@@ -0,0 +1,194 @@
+---
+id: 62015a5da1c95c358f079ebb
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+The `:first-of-type` pseudo-selector is used to target the first element that matches the selector. Create an `h1 .flex span:first-of-type` selector to target the first `span` element in your `.flex` container. Remember that your `span` elements are reversed, visually, so this will appear to be the second element on the page.
+
+Give your new selector a `font-size` property of `0.7em` to make it look like a sub-heading.
+
+# --hints--
+
+You should have an `h1 .flex span:first-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type'));
+```
+
+Your `h1 .flex span:first-of-type` selector should have a `font-size` property set to `0.7em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.getPropertyValue('font-size') === '0.7em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
new file mode 100644
index 0000000000..988875664f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62015cd2654a1139321a89d2.md
@@ -0,0 +1,196 @@
+---
+id: 62015cd2654a1139321a89d2
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+The `:last-of-type` pseudo-selector does the exact opposite - it targets the last element that matches the selector. Create an `h1 .flex span:last-of-type` selector to target the last `span` in your flex container, and give it a `font-size` property set to `1.2em` to make it look like a header.
+
+# --hints--
+
+You should have an `h1 .flex span:last-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type'));
+```
+
+Your `h1 .flex span:last-of-type` selector should have a `font-size` property set to `1.2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.getPropertyValue('font-size') === '1.2em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
new file mode 100644
index 0000000000..bea49bb7f9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62015d8942384c3aed48329e.md
@@ -0,0 +1,212 @@
+---
+id: 62015d8942384c3aed48329e
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+You wrapped your table in a section element - now you can style that to give your table a border. Create a `section` selector, and give it a `max-width` property set to `40rem` for responsive design. Set the `margin` property to `0 auto` to center it, and set the `border` property to `2px solid #d0d0d5`.
+
+# --hints--
+
+You should have a `section` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section'));
+```
+
+Your `section` selector should have a `max-width` property set to `40rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('max-width') === '40rem');
+```
+
+Your `section` selector should have a `margin` property set to `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('margin') === '0px auto');
+```
+
+Your `section` selector should have a `border` property set to `2px solid #d0d0d5`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('border') === '2px solid rgb(208, 208, 213)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
new file mode 100644
index 0000000000..ec97094732
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620167374bb8b4455cd11125.md
@@ -0,0 +1,224 @@
+---
+id: 620167374bb8b4455cd11125
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+The last part of your table heading is your years. Create a `#years` selector, and enable flexbox. Justify the content to the end of the flex direction, and make the element sticky. Fix it to the top of its container with `top: 0`.
+
+# --hints--
+
+You should have a `#years` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years'));
+```
+
+Your `#years` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex');
+```
+
+Your `#years` selector should have a `justify-content` property set to `flex-end`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('justify-content') === 'flex-end');
+```
+
+Your `#years` selector should have a `position` property set to `sticky`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('position') === 'sticky');
+```
+
+Your `#years` selector should have a `top` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
new file mode 100644
index 0000000000..be6eec61b2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620174ed519dd7506c1a4b61.md
@@ -0,0 +1,212 @@
+---
+id: 620174ed519dd7506c1a4b61
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Now apply some color to your `#years`. Make the text `#fff` and the background `#0a0a23`.
+
+# --hints--
+
+Your `#years` should have a `color` property set to `#fff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)');
+```
+
+Your `#years` should have a `background-color` property set to `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
new file mode 100644
index 0000000000..9067889bef
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620175b3710a0951cfa86edf.md
@@ -0,0 +1,223 @@
+---
+id: 620175b3710a0951cfa86edf
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+The `calc()` function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:
+
+```css
+.example {
+  margin: 10px;
+  width: calc(100% - 20px);
+}
+```
+
+Give `#years` a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+# --hints--
+
+Your `#years` selector should have a `margin` property set to `0 -2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
+```
+
+Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+```js
+const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding');
+assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5rem 0px'].includes(padding));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
new file mode 100644
index 0000000000..bf3e0d8e19
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201782cc420715562f36271.md
@@ -0,0 +1,232 @@
+---
+id: 6201782cc420715562f36271
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Style the text within your `#years` element by creating a `#years span[class]` selector. The `span[class]` syntax will target any `span` element that has a `class` attribute set, regardless of the attribute's value.
+
+Give your new selector a `bold` font, a width of `4.5rem`, and text aligned to the right.
+
+# --hints--
+
+You should have a `#years span[class]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]'));
+```
+
+Your `#years span[class]` selector should have a `font-weight` property set to `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+Your `#years span[class]` selector should have a `width` property set to `4.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('width') === '4.5rem');
+```
+
+Your `#years span[class]` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('text-align') === 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
new file mode 100644
index 0000000000..4c0ab4ab20
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620179bc0a6a2358c72b90ad.md
@@ -0,0 +1,224 @@
+---
+id: 620179bc0a6a2358c72b90ad
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+You wrapped your tables in a container with the `table-wrap` class. Create a selector for that class, and give it a `padding` set to `0 0.75rem 1.5rem 0.75rem`.
+
+# --hints--
+
+You should have a `.table-wrap` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap'));
+```
+
+Your `.table-wrap` selector should have a `padding` property set to `0 0.75rem 1.5rem 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
new file mode 100644
index 0000000000..df7a3d561d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62017b6f47454059bf2d3bd1.md
@@ -0,0 +1,230 @@
+---
+id: 62017b6f47454059bf2d3bd1
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Before you start diving in to the table itself, your `span` elements are currently bolded. Create a `span:not(.sr-only)` selector and give it a `font-weight` property set to `normal`.
+
+The `:not()` pseudo-selector is used to target all elements that do not match the selector - in this case, any of your `span` elements that do not have the `sr-only` class. This ensures that your earlier rules for the `span[class~="sr-only"]` selector are not overwritten.
+
+# --hints--
+
+You should have a `span:not(.sr-only)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
+```
+
+Your `span:not(.sr-only)` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
new file mode 100644
index 0000000000..6563d6a1d2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62017f47c87be96457c49f46.md
@@ -0,0 +1,291 @@
+---
+id: 62017f47c87be96457c49f46
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Rather than having to constantly double-check you are not overwriting your earlier properties, you can use the `!important` keyword to ensure these properties are always applied, regardless of order or specificity.
+
+Give each property in your `span[class~="sr-only"]` selector an `!important` keyword. Do not change any of the values.
+
+# --hints--
+
+Your `span[class~="sr-only"]` selector should have the `border` property set to `0 !important`.
+
+```js
+// log it
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `clip` property set to `rect(1px, 1px, 1px, 1px) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `clip-path` property set to `inset(50%) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip-path: inset(50%) !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `height` property set to `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('height: 1px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `width` property set to `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('width: 1px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `position` property set to `absolute !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('position: absolute !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `overflow` property set to `hidden !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('overflow: hidden !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `white-space` property set to `nowrap !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('white-space: nowrap !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `padding` property set to `0 !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('padding: 0px !important;'));
+```
+
+Your `span[class~="sr-only"]` selector should have the `margin` property set to `-1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('margin: -1px !important;'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span:not(.sr-only) {
+  font-weight: normal;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
new file mode 100644
index 0000000000..131df23ce9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62017fa5bbef406580ceb44f.md
@@ -0,0 +1,236 @@
+---
+id: 62017fa5bbef406580ceb44f
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Now that you have added the `!important` keyword, you can remove the `:not(.sr-only)` from your `span` selector.
+
+# --hints--
+
+You should not have a `span:not(.sr-only)` selector.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')));
+```
+
+You should have a `span` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span'));
+```
+
+You should not change the `font-weight`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span:not(.sr-only) {
+  font-weight: normal;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
new file mode 100644
index 0000000000..68b9ddf74a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018243f046a368fab8ffb6.md
@@ -0,0 +1,238 @@
+---
+id: 62018243f046a368fab8ffb6
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Create a `table` selector to target your tables. Set the `border-collapse` property to `collapse`, which will allow cell borders to collapse into a single border, instead of a border around each cell. Also set the `border` property to `0` to hide the borders themselves.
+
+# --hints--
+
+You should have a `table` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table'));
+```
+
+Your `table` selector should have a `border-collapse` property set to `collapse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-collapse') === 'collapse');
+```
+
+Your `table` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
new file mode 100644
index 0000000000..37746c9d7e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201830cb0c74b69f1b41635.md
@@ -0,0 +1,242 @@
+---
+id: 6201830cb0c74b69f1b41635
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Ensure your table fills its container with a `width` property set to `100%`, then position it relatively and give it a top margin of `3rem`.
+
+# --hints--
+
+Your `table` selector should have a `width` property set to `100%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%');
+```
+
+Your `table` selector should have a `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('position') === 'relative');
+```
+
+Your `table` selector should have a `margin-top` property set to `3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('margin-top') === '3rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+table {
+  border-collapse: collapse;
+  border: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
new file mode 100644
index 0000000000..a59b2617ab
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620186f4b6b8356d2def576b.md
@@ -0,0 +1,252 @@
+---
+id: 620186f4b6b8356d2def576b
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Next you need to style your `caption` elements to look more like headers. Create a `table caption` selector. Set the text to have a color of `#356eaf`, a size of `1.3em`, and a normal weight.
+
+# --hints--
+
+You should have a `table caption` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption'));
+```
+
+Your `table caption` selector should have a `color` property set to `#356eaf`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('color') === 'rgb(53, 110, 175)');
+```
+
+Your `table caption` selector should have a `font-size` property set to `1.3em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-size') === '1.3em');
+```
+
+Your `table caption` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
new file mode 100644
index 0000000000..c3938b04ac
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018ba1aa263770c953be66.md
@@ -0,0 +1,251 @@
+---
+id: 62018ba1aa263770c953be66
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Now give the captions an absolute position, and shift them `-2.25rem` from the top and `0.5rem` from the left.
+
+# --hints--
+
+Your `table caption` selector should have the `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute');
+```
+
+Your `table caption` selector should have the `top` property set to `-2.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('top') === '-2.25rem');
+```
+
+Your `table caption` selector should have the `left` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
new file mode 100644
index 0000000000..5d92ebdef9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018c3e94434a71af1d5eaa.md
@@ -0,0 +1,261 @@
+---
+id: 62018c3e94434a71af1d5eaa
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Create a selector to target your `td` elements within your table body. Give them a width to fill the viewport, with a minimum and maximum of `4rem`. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container.
+
+# --hints--
+
+You should have a `tbody td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td'));
+```
+
+Your `tbody td` selector should have a `width` property set to `100vw`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('width') === '100vw');
+```
+
+Your `tbody td` selector should have a `min-width` property set to `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('min-width') === '4rem');
+```
+
+Your `tbody td` selector should have a `max-width` property set to `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('max-width') === '4rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
new file mode 100644
index 0000000000..842e7f51b6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62018ec29b3ae674f40bef31.md
@@ -0,0 +1,255 @@
+---
+id: 62018ec29b3ae674f40bef31
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Now target the `th` elements within your table body, and give them a width of the entire container, less `12rem`.
+
+# --hints--
+
+You should have a `tbody th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th'));
+```
+
+Your `tbody th` selector should have a `width` property set to `calc(100% - 12rem)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('width') === 'calc(100% - 12rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
new file mode 100644
index 0000000000..f20111ca92
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/62019093fe30e278e797d2f6.md
@@ -0,0 +1,265 @@
+---
+id: 62019093fe30e278e797d2f6
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+The `[attribute="value"]` selector targets any element that has an attribute with a specific value. Create a `tr[class="total"]` selector to target specifically your `tr` elements with the `total` class. Give it a bottom border of `4px double #0a0a23` and make the font bold.
+
+# --hints--
+
+You should have a `tr[class="total"]` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]'));
+```
+
+Your `tr[class="total"]` selector should have a `border-bottom` property set to `4px double #0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('border-bottom') === '4px double rgb(10, 10, 35)');
+```
+
+Your `tr[class="total"]` selector should have a `font-weight` property set to `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
new file mode 100644
index 0000000000..da1b2b6db3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620191707bc65579ddd3ce15.md
@@ -0,0 +1,270 @@
+---
+id: 620191707bc65579ddd3ce15
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Using the same selector syntax, target the `th` elements within your table rows where the `class` is `total`. Align the text to the left, and give them a padding of `0.5rem 0 0.25rem 0.5rem`.
+
+# --hints--
+
+You should have a `tr[class="total"] th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th'));
+```
+
+Your `tr[class="total"] th` selector should have a `text-align` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left');
+```
+
+Your `tr[class="total"] th` selector should have a `padding` property set to `0.5rem 0 0.25rem 0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
new file mode 100644
index 0000000000..7b947bb3ee
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620192a767533a7ad19d96d7.md
@@ -0,0 +1,277 @@
+---
+id: 620192a767533a7ad19d96d7
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+The key difference between `tr[class="total"]` and `tr.total` is that the first will select `tr` elements where the *only* class is `total`. The second will select `tr` elements where the class *includes* `total`.
+
+In your case, `tr.total` will work. You can use this selector to target all `td` elements within your `.total` rows. Align the text to the right, and give them a padding of `0 0.25rem`.
+
+# --hints--
+
+You should have a `tr.total td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td'));
+```
+
+Your `tr.total td` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('text-align') === 'right');
+```
+
+Your `tr.total td` selector should have a `padding` property set to `0 0.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('padding') === '0px 0.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
new file mode 100644
index 0000000000..40864c9312
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201995d9ab88e80f1989dce.md
@@ -0,0 +1,274 @@
+---
+id: 6201995d9ab88e80f1989dce
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+The `:nth-of-type()` pseudo-selector is used to target specific elements based on their order among siblings of the same type. Use this pseudo-selector to target the third `td` element within your `total` table rows. Give it a right padding of `0.5rem`.
+
+# --hints--
+
+You should have a `tr.total td:nth-of-type(3)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)'));
+```
+
+Your `tr.total td:nth-of-type(3)` selector should have a `padding-right` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
new file mode 100644
index 0000000000..d0ec48a16c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/620199c7a7a32c81d4db3410.md
@@ -0,0 +1,278 @@
+---
+id: 620199c7a7a32c81d4db3410
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Give your `tr.total` elements a hover effect that changes the background to `#99c9ff`.
+
+# --hints--
+
+You should have a `tr.total:hover` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover'));
+```
+
+Your `tr.total:hover` selector should have the `background-color` property set to `#99c9ff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyValue('background-color') === 'rgb(153, 201, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
new file mode 100644
index 0000000000..8446e4d528
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a1a7af32c287bd6b8183.md
@@ -0,0 +1,284 @@
+---
+id: 6201a1a7af32c287bd6b8183
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Select your `td` elements with the `class` value of `current`, and make the font italic.
+
+# --hints--
+
+You should have a `td.current` selector.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('td.current') || def('td[class="current"]'));
+```
+
+Your `td.current` selector should have the `font-style` property set to `italic`.
+
+```js
+const font = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style');
+assert((font('td.current') || font('td[class="current"]')) === 'italic');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
new file mode 100644
index 0000000000..a1ea3f0dcd
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a1cc668a34888f5b2f52.md
@@ -0,0 +1,288 @@
+---
+id: 6201a1cc668a34888f5b2f52
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Select the `tr` elements with the `class` set to `data`. Give them a background image of `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+# --hints--
+
+You should have a `tr.data` selector.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('tr.data') || def('tr[class="data"]'));
+```
+
+Your `tr.data` selector should have the `background-image` property set to `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+```js
+const bg = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('background-image');
+assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
new file mode 100644
index 0000000000..0853021d6c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a20d742f5c89736c8cfb.md
@@ -0,0 +1,302 @@
+---
+id: 6201a20d742f5c89736c8cfb
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Select the `th` elements within your `tr.data` elements. Align the text to the left, and give them a top padding of `0.3rem` and a left padding of `0.5rem`.
+
+# --hints--
+
+You should have a `tr.data th` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th'));
+```
+
+Your `tr.data th` selector should have a `text-align` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('text-align') === 'left');
+```
+
+Your `tr.data th` selector should have a `padding-top` property set to `0.3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-top') === '0.3rem');
+```
+
+Your `tr.data th` selector should have a `padding-left` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
new file mode 100644
index 0000000000..66cc4c45f6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a42e39bf3b95b6a33bf3.md
@@ -0,0 +1,320 @@
+---
+id: 6201a42e39bf3b95b6a33bf3
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Create a `tr.data th .description` selector to target the elements with the `class` set to `description` that are within your `th` elements in your `.data` table rows. Give them a block display, make the text italic with a normal weight, and position them with a `padding` set to `1rem 0 0.75rem` and a right margin of `-13.5rem`.
+
+# --hints--
+
+You should have a `tr.data th .description` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description'));
+```
+
+Your `tr.data th .description` selector should have a `display` property set to `block`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('display') === 'block');
+```
+
+Your `tr.data th .description` selector should have a `font-style` property set to `italic`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-style') === 'italic');
+```
+
+Your `tr.data th .description` selector should have a `font-weight` property set to `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-weight') === 'normal');
+```
+
+Your `tr.data th .description` selector should have a `padding` property set to `1rem 0 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('padding') === '1rem 0px 0.75rem');
+```
+
+Your `tr.data th .description` selector should have a `margin-right` property set to `-13.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('margin-right') === '-13.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
new file mode 100644
index 0000000000..55d65268a3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a4adcc6414968b391592.md
@@ -0,0 +1,296 @@
+---
+id: 6201a4adcc6414968b391592
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Your `span` elements now all have more specific styling, which means you can remove your `span` rule.
+
+# --hints--
+
+You should not have a `span` selector.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span {
+  font-weight: normal;
+}
+--fcc-editable-region--
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
new file mode 100644
index 0000000000..74ca4c192b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a5258af7b398b030bfaf.md
@@ -0,0 +1,312 @@
+---
+id: 6201a5258af7b398b030bfaf
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Your dollar amounts are currently misaligned. Create a selector to target the `td` elements within your `tr.data` elements. Vertically align the text to the top, horizontally align the text to the right, and set the padding to `0.3rem 0.25rem 0`.
+
+# --hints--
+
+You should have a `tr.data td` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td'));
+```
+
+Your `tr.data td` selector should have a `vertical-align` property set to `top`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('vertical-align') === 'top');
+```
+
+Your `tr.data td` selector should have a `text-align` property set to `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('text-align') === 'right');
+```
+
+Your `tr.data td` selector should have a `padding` property set to `0.3rem 0.25rem 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('padding') === '0.3rem 0.25rem 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
new file mode 100644
index 0000000000..672e43ac9c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/6201a59be346d399c21d10b1.md
@@ -0,0 +1,589 @@
+---
+id: 6201a59be346d399c21d10b1
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Create another selector for the `td` elements within your `tr.data` element, but specifically select the last one. Give this a right padding of `0.5rem`.
+
+With this, your balance sheet is complete!
+
+# --hints--
+
+You should have a `tr.data td:last-of-type` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type'));
+```
+
+Your `tr.data td:last-of-type` selector should have a `padding-right` property set to `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+tr.data td:last-of-type {
+  padding-right: 0.5rem;
+}
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
new file mode 100644
index 0000000000..71388718e0
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-balance-sheet/64076bbeba941114b0027b6a.md
@@ -0,0 +1,209 @@
+---
+id: 64076bbeba941114b0027b6a
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Adding position `sticky` moved the element into its own stack. To ensure your `#years` element does not get hidden by different stacks, add a `z-index` property set to `999` in the `#years` rule.
+
+# --hints--
+
+Your `#years` selector should have a `z-index` property set to `999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index'), '999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
new file mode 100644
index 0000000000..6295eb77a1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md
@@ -0,0 +1,76 @@
+---
+id: 5d822fd413a79914d39e98cc
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Welcome to the CSS Variables Skyline project! Start by adding a `link` element that links your `styles.css` file within the `head` element.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.isNotNull(document.querySelector('link'));
+```
+
+You should not change your existing `head` tags. Make sure you did not delete the closing tag.
+
+```js
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
+```
+
+You should have one void `link` element.
+
+```js
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>    
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
new file mode 100644
index 0000000000..866b58f80c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md
@@ -0,0 +1,56 @@
+---
+id: 5d822fd413a79914d39e98cd
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick that helps visualize where elements are and their size. You will remove this later.
+
+# --hints--
+
+You should use the `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+You should use the `border` property to style all the elements.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('border'));
+```
+
+All elements should have a `1px solid black` border.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles?.border, '1px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
new file mode 100644
index 0000000000..1ea4cc4156
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md
@@ -0,0 +1,61 @@
+---
+id: 5d822fd413a79914d39e98ce
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements.
+
+# --hints--
+
+You should use the `box-sizing` property.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing'));
+```
+
+You should make use of the existing `*` selector.
+
+```js
+// Two selectors create two CSSStyleRule objects
+assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1);
+```
+
+All elements should have a `box-sizing` of `border-box`.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles.boxSizing, 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+}
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
new file mode 100644
index 0000000000..90efe5f935
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md
@@ -0,0 +1,69 @@
+---
+id: 5d822fd413a79914d39e98cf
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport.
+
+# --hints--
+
+You should use the `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` should have a `height` of `100vh`.
+
+```js
+const bodyStyles = new __helpers.CSSHelp(document).getStyle('body');
+assert.equal(bodyStyles?.height, '100vh');
+```
+
+Your `body` should have a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+Your `body` should have the `overflow` property set to `hidden`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
new file mode 100644
index 0000000000..a49b3f5dff
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md
@@ -0,0 +1,65 @@
+---
+id: 5d822fd413a79914d39e98d0
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+Your `div` element should be within the `body`.
+
+```js
+assert(document.querySelector('div')?.parentElement?.localName === 'body');
+```
+
+Your `div` element should have a class of `background-buildings`
+
+```js
+assert([...document.querySelector('div')?.classList]?.includes('background-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
new file mode 100644
index 0000000000..56eebc0924
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md
@@ -0,0 +1,68 @@
+---
+id: 5d822fd413a79914d39e98d1
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Give your `.background-buildings` element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`.
+
+# --hints--
+
+You should use the `background-buildings` class to select the correct element.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings'));
+```
+
+Your `.background-buildings` element should have a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%');
+```
+
+Your `.background-buildings` element should have a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
new file mode 100644
index 0000000000..fe650ce0a4
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md
@@ -0,0 +1,83 @@
+---
+id: 5d822fd413a79914d39e98d2
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Nest a `div` with a class of `bb1` in the background buildings container. Open your `styles.css` file, and give `.bb1` a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div').length, 2);
+```
+
+You should give the new `div` a class of `bb1`.
+
+```js
+assert.exists(document.querySelector('div.bb1'));
+```
+
+You should use a `.bb1` class selector to style the element.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1'));
+```
+
+You should give the `.bb1` element a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%');
+```
+
+You should give the `.bb1` element a `height` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
new file mode 100644
index 0000000000..34ef10accb
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md
@@ -0,0 +1,105 @@
+---
+id: 5d822fd413a79914d39e98d3
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections.
+
+# --hints--
+
+You should create four new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 6);
+```
+
+You should give one of the new `div` elements a class of `bb1a`.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+You should give one of the new `div` elements a class of `bb1b`.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+You should give one of the new `div` elements a class of `bb1c`.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+You should give one of the new `div` elements a class of `bb1d`.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+```
+
+You should place the new `div` elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d'));
+```
+
+You should place the new `div` elements within the `.bb1` element.
+
+```js
+assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+--fcc-editable-region--
+      <div class="bb1"></div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
new file mode 100644
index 0000000000..cae117f39b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md
@@ -0,0 +1,138 @@
+---
+id: 5d822fd413a79914d39e98d4
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container.
+
+# --hints--
+
+You should use a class selector to style `.bb1a`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a'));
+```
+
+You should give `.bb1a` a `width` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%');
+```
+
+You should give `.bb1a` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1b`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b'));
+```
+
+You should give `.bb1b` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%');
+```
+
+You should give `.bb1b` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1c`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c'));
+```
+
+You should give `.bb1c` a `width` of `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%');
+```
+
+You should give `.bb1c` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%');
+```
+
+You should use a class selector to style `.bb1d`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d'));
+```
+
+You should give `.bb1d` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%');
+```
+
+You should give `.bb1d` a `height` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
new file mode 100644
index 0000000000..8f84d629f0
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md
@@ -0,0 +1,112 @@
+---
+id: 5d822fd413a79914d39e98d5
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Center the parts of your building by turning the `.bb1` element into a flexbox parent. Use the `flex-direction` and `align-items` properties to center the children.
+
+# --hints--
+
+You should not change the `.bb1` `width` or `height` properties.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.width, '10%');
+assert.equal(bb1Style?.height, '70%');
+```
+
+You should give the `.bb1` element a `display` of `flex`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.display, 'flex');
+```
+
+You should give the `.bb1` element a `flex-direction` of `column`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.flexDirection, 'column');
+```
+
+You should give the `.bb1` element a `align-items` of `center`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.alignItems, 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
new file mode 100644
index 0000000000..f08fd7a1d9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md
@@ -0,0 +1,103 @@
+---
+id: 5d822fd413a79914d39e98d6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Now you have something that is resembling a building. You are ready to create your first variable. In the previous lecture videos you learned that variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the rule for the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`.
+
+# --hints--
+
+You should create a new variable named `--building-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1'));
+```
+
+You should define the `--building-color1` variable within `.bb1`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+```
+
+You should give `--building-color1` a value of `#999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
new file mode 100644
index 0000000000..7f714196cb
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md
@@ -0,0 +1,100 @@
+---
+id: 5d822fd413a79914d39e98d7
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Whatever value you gave the variable will be applied to whatever property you use it on.
+
+Add the variable `--building-color1` you created in the previous step as the value of the `background-color` property of the `.bb1a` class.
+
+# --hints--
+
+The `background-color` of the `.bb1a` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
new file mode 100644
index 0000000000..01335d8d2d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98d8
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building.
+
+# --hints--
+
+The `background-color` of the `.bb1b` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+The `background-color` of the `.bb1c` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+The `background-color` of the `.bb1d` element should be set.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)
+```
+
+You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
new file mode 100644
index 0000000000..3690866c53
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md
@@ -0,0 +1,99 @@
+---
+id: 5d822fd413a79914d39e98d9
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable.
+
+# --hints--
+
+You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+--fcc-editable-region--
+  --building-color1: #999;
+--fcc-editable-region--
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
new file mode 100644
index 0000000000..a614918d18
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98da
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Your first building looks pretty good now. Nest three new `div` elements in the `.background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background.
+
+# --hints--
+
+You should create a `div` with a class of `bb2`.
+
+```js
+assert.exists(document.querySelector('div.bb2'));
+```
+
+You should create a `div` with a class of `bb3`.
+
+```js
+assert.exists(document.querySelector('div.bb3'));
+```
+
+You should create a `div` with a class of `bb4`.
+
+```js
+assert.exists(document.querySelector('div.bb4'));
+```
+
+You should create 3 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 9);
+```
+
+You should place these `div` elements within the `.background-buildings` element.
+
+```js
+assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4);
+```
+
+You should place the elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
new file mode 100644
index 0000000000..b90a51c1f5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98db
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive.
+
+# --hints--
+
+You should give `.bb2` a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%');
+```
+
+You should give `.bb2` a `height` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%');
+```
+
+You should give `.bb3` a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%');
+```
+
+You should give `.bb3` a `height` of `55%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%');
+```
+
+You should give `.bb4` a `width` of `11%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%');
+```
+
+You should give `.bb4` a `height` of `58%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
new file mode 100644
index 0000000000..43c97e479e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md
@@ -0,0 +1,127 @@
+---
+id: 5d822fd413a79914d39e98dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+The buildings are currently stacked on top of each other. Align the buildings by turning the `.background-buildings` element into a flexbox parent. Use the `align-items` and `justify-content` properties to evenly space the buildings across the bottom of the element.
+
+# --hints--
+
+You should add a `display` of `flex` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex');
+```
+
+You should add an `align-items` of `flex-end` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end');
+```
+
+You should add a `justify-content` of `space-evenly` to the `background-buildings` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
new file mode 100644
index 0000000000..45cde3a259
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98dd
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+The buildings are too spaced out. Squeeze them together by adding two empty `div` elements to the top of the `.background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center.
+
+# --hints--
+
+You should add two new `div` elements before the `.bb1` element.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('bb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('bb1'));
+```
+
+You should add one new `div` element between the `.bb3` and `.bb4` element.
+
+```js
+assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling);
+```
+
+You should add two new `div` elements after the `.bb4` element.
+
+```js
+const bb4 = document.querySelector('.bb4');
+assert.exists(bb4?.nextElementSibling);
+assert.exists(bb4?.nextElementSibling?.nextElementSibling);
+```
+
+You should add 5 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 14);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
new file mode 100644
index 0000000000..a7617deb09
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md
@@ -0,0 +1,140 @@
+---
+id: 5d822fd413a79914d39e98de
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Create a new variable below your `--building-color1` variable. Name your new variable `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`.
+
+# --hints--
+
+You should define a new property variable called `--building-color2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2'));
+```
+
+You should give `--building-color2` a value of `#66cc99` within the `.bb1` class.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99');
+```
+
+You should set the `background-color` of `.bb2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor);
+```
+
+You should set the `background-color` using the `--building-color2` variable.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
new file mode 100644
index 0000000000..aa97fc4df8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98df
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+That didn't work. You should add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`.
+
+# --hints--
+
+You should add a fallback value of `green` to the `background-color` property.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2,green)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
new file mode 100644
index 0000000000..cc38315c42
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98e0
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Create a new variable below the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`.
+
+# --hints--
+
+You should define a new property variable called `--building-color3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3'));
+```
+
+You should give `--building-color3` a value of `#cc6699`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+You should set the `background-color` of `.bb3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor);
+```
+
+You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3,pink)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
new file mode 100644
index 0000000000..b146a3017d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md
@@ -0,0 +1,155 @@
+---
+id: 5d822fd413a79914d39e98e1
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+That didn't work, because the variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there.
+
+# --hints--
+
+You should declare a `:root` selector at the top of the stylesheet.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root'));
+```
+
+You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff');
+```
+
+You should define `--building-color2` with a value of `#66cc99` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99');
+```
+
+You should define `--building-color3` with a value of `#cc6699` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+You should remove the custom property variables from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
new file mode 100644
index 0000000000..0d71f94d0c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md
@@ -0,0 +1,135 @@
+---
+id: 5d822fd413a79914d39e98e2
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now.
+
+# --hints--
+
+You should remove the fallback in the `background-color` from `.bb2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+You should remove the fallback in the `background-color` from `.bb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
new file mode 100644
index 0000000000..9434a0ce33
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md
@@ -0,0 +1,144 @@
+---
+id: 5d822fd413a79914d39e98e3
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building.
+
+# --hints--
+
+You should define a new property variable called `--building-color4`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4'));
+```
+
+You should give `--building-color4` a value of `#538cc6` in the `:root` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6');
+```
+
+You should add `background-color: var(--building-color4)` in the `.bb4` selector.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.getPropVal('background-color', true), 'var(--building-color4)')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
new file mode 100644
index 0000000000..7aeec907b2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md
@@ -0,0 +1,147 @@
+---
+id: 5d822fd413a79914d39e98e4
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+The background buildings are starting to look pretty good. Create a new `div` below the `.background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 15);
+```
+
+The new `div` should come after the `div.background-buildings` element.
+
+```js
+assert.exists(document.querySelector('div.background-buildings + div'));
+```
+
+Your new `div` should have a class of `foreground-buildings`.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
new file mode 100644
index 0000000000..d1b7b83393
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md
@@ -0,0 +1,161 @@
+---
+id: 5d822fd413a79914d39e98e5
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+You want the `.foreground-buildings` container to sit directly on top of the `.background-buildings` element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner.
+
+# --hints--
+
+You should use a `.foreground-buildings` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+You should give the `.foreground-buildings` element a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%');
+```
+
+You should give the `.foreground-buildings` element a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%');
+```
+
+You should give the `.foreground-buildings` element a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute');
+```
+
+You should give the `.foreground-buildings` element a `top` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
new file mode 100644
index 0000000000..dc1a0644b0
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md
@@ -0,0 +1,192 @@
+---
+id: 5d822fd413a79914d39e98e6
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground.
+
+# --hints--
+
+You should create a new `div` with a class of `fb1`.
+
+```js
+assert.exists(document.querySelector('div.fb1'));
+```
+
+You should create a new `div` with a class of `fb2`.
+
+```js
+assert.exists(document.querySelector('div.fb2'));
+```
+
+You should create a new `div` with a class of `fb3`.
+
+```js
+assert.exists(document.querySelector('div.fb3'));
+```
+
+You should create a new `div` with a class of `fb4`.
+
+```js
+assert.exists(document.querySelector('div.fb4'));
+```
+
+You should create a new `div` with a class of `fb5`.
+
+```js
+assert.exists(document.querySelector('div.fb5'));
+```
+
+You should create a new `div` with a class of `fb6`.
+
+```js
+assert.exists(document.querySelector('div.fb6'));
+```
+
+You should place these new `div` elements within the `.foreground-buildings` element.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings > div.fb1'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb2'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb3'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb4'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb5'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb6'));
+```
+
+You should place the new `div` elements in the correct order.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
new file mode 100644
index 0000000000..215b44f2f3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e98e7
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`.
+
+# --hints--
+
+You should create a `.fb1` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1'));
+```
+
+You should give the `.fb1` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%');
+```
+
+You should give the `.fb1` selector a `height` of `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%');
+```
+
+You should create a `.fb2` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2'));
+```
+
+You should give the `.fb2` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%');
+```
+
+You should give the `.fb2` selector a `height` of `40%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%');
+```
+
+You should create a `.fb3` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3'));
+```
+
+You should give the `.fb3` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%');
+```
+
+You should give the `.fb3` selector a `height` of `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%');
+```
+
+You should create a `.fb4` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4'));
+```
+
+You should give the `.fb4` selector a `width` of `8%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%');
+```
+
+You should give the `.fb4` selector a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%');
+```
+
+You should create a `.fb5` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5'));
+```
+
+You should give the `.fb5` selector a `width` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%');
+```
+
+You should give the `.fb5` selector a `height` of `33%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%');
+```
+
+You should create a `.fb6` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6'));
+```
+
+You should give the `.fb6` selector a `width` of `9%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%');
+```
+
+You should give the `.fb6` selector a `height` of `38%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
new file mode 100644
index 0000000000..dcfbd1726e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md
@@ -0,0 +1,190 @@
+---
+id: 5d822fd413a79914d39e98e8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Add the same `display`, `align-items`, and `justify-content` properties and values to `.foreground-buildings` that you used on `.background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container.
+
+# --hints--
+
+You should give `.foreground-buildings` a `display` property of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex');
+```
+
+You should give `.foreground-buildings` an `align-items` property of `flex-end`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end');
+```
+
+You should give `.foreground-buildings` a `justify-content` property of `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
new file mode 100644
index 0000000000..2e1047c628
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98e9
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+You should optimize your code. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`.
+
+# --hints--
+
+You should not remove the `.foreground-buildings` declaration.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+You should remove the `position` property from `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position);
+```
+
+You should remove the `top` property from `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
+```
+
+You should add the `position` property of `absolute` to `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.position, 'absolute');
+```
+
+You should add the `top` property of `0` to `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.top, '0px');
+```
+
+You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.exists(eitherOr());
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
new file mode 100644
index 0000000000..1147503597
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md
@@ -0,0 +1,181 @@
+---
+id: 5d822fd413a79914d39e98ea
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore.
+
+# --hints--
+
+You should delete the whole `.foreground-buildings` style declaration.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
new file mode 100644
index 0000000000..79fd7a2246
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98eb
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`.
+
+# --hints--
+
+You should give `.fb1` a `background-color` using `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.getPropVal('background-color', true), 'var(--building-color4)');
+```
+
+You should give `.fb2` a `background-color` using `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+You should give `.fb3` a `background-color` using `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+You should give `.fb4` a `background-color` using `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+You should give `.fb5` a `background-color` using `--building-color2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+You should give `.fb6` a `background-color` using `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
new file mode 100644
index 0000000000..bb4a29f503
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98ec
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`.
+
+# --hints--
+
+You should add two `div` elements as the first children of `.foreground-buildings`.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('fb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('fb1'));
+```
+
+You should add one `div` element between `.fb2` and `.fb3`.
+
+```js
+assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling);
+```
+
+
+You should add two `div` elements as the last children of `.foreground-buildings`.
+
+```js
+const fb6 = document.querySelector('.fb6');
+assert.exists(fb6?.nextElementSibling);
+assert.exists(fb6?.nextElementSibling?.nextElementSibling);
+```
+
+You should have added 5 new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 26);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
new file mode 100644
index 0000000000..288de384a8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md
@@ -0,0 +1,202 @@
+---
+id: 5d822fd413a79914d39e98ed
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings.
+
+# --hints--
+
+You should give `.fb4` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative');
+```
+
+You should give `.fb4` a `left` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%');
+```
+
+You should give `.fb5` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative');
+```
+
+You should give `.fb5` a `right` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
new file mode 100644
index 0000000000..1b950d244f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md
@@ -0,0 +1,196 @@
+---
+id: 5d822fd413a79914d39e98ee
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`.
+
+# --hints--
+
+You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector.
+
+```js
+assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code));
+```
+
+You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector.
+
+```js
+assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
new file mode 100644
index 0000000000..022722b6a3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md
@@ -0,0 +1,197 @@
+---
+id: 5d822fd413a79914d39e98ef
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings.
+
+# --hints--
+
+You should create a new variable in `:root` called `--window-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1'));
+```
+
+You should give the property variable `--window-color1` a value of `black`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
new file mode 100644
index 0000000000..d4e4ca6565
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md
@@ -0,0 +1,218 @@
+---
+id: 5d822fd413a79914d39e98f0
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+In a previous module you learned that gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this:
+
+```css
+gradient-type(
+  color1,
+  color2
+);
+```
+
+In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a `background` property below the `background-color` property. Set it as a gradient of type `linear-gradient` that uses `--building-color1` as the first color and `--window-color1` as the second.
+
+# --hints--
+
+You should apply a `background` to `.bb1a` right after the `background-color`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+```
+
+You should give the `background` a `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
+```
+
+You should give the `background` a `linear-gradient` starting from `var(--building-color1)`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
+```
+
+You should give the `background` a `linear-gradient` ending at `var(--window-color1)`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
new file mode 100644
index 0000000000..13c9235203
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98f1
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+You want to add the same gradient to the next two sections. Instead of doing that, create a new class selector called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class selector.
+
+# --hints--
+
+You should create a new class selector called `bb1-window`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window'));
+```
+
+You should move the `height` property and value from `.bb1a` to `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%');
+```
+
+You should move the `background` property and value from `.bb1a` to `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+You should not move the `background-color` property from `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+You should not move the `width` property from `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
new file mode 100644
index 0000000000..d2c82337a1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md
@@ -0,0 +1,237 @@
+---
+id: 5d822fd413a79914d39e98f2
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them.
+
+# --hints--
+
+You should not remove the `bb1a` class.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+You should add the `bb1-window` class to the `.bb1a` element.
+
+```js
+assert.exists(document.querySelector('div.bb1a.bb1-window'));
+```
+
+You should not remove the `bb1b` class.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+You should add the `bb1-window` class to the `.bb1b` element.
+
+```js
+assert.exists(document.querySelector('div.bb1b.bb1-window'));
+```
+
+You should not remove the `bb1c` class.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+You should add the `bb1-window` class to the `.bb1c` element.
+
+```js
+assert.exists(document.querySelector('div.bb1c.bb1-window'));
+```
+
+You should not change the `.bb1d` element.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+assert.notExists(document.querySelector('div.bb1d.bb1-window'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
new file mode 100644
index 0000000000..5f4c0d8e10
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md
@@ -0,0 +1,222 @@
+---
+id: 5d822fd413a79914d39e98f3
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them.
+
+# --hints--
+
+You should remove the `background-color` from `.bb1a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+You should remove the `height` property from `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height);
+```
+
+You should remove the `background-color` property from `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor);
+```
+
+You should remove the `height` property from `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height);
+```
+
+You should remove the `background-color` property from `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
new file mode 100644
index 0000000000..523c35e8e6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e98f4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Gradients can use as many colors as you want like this:
+
+```css
+gradient-type(
+  color1,
+  color2,
+  color3
+);
+```
+
+Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property.
+
+# --hints--
+
+You should use the `background` on `.bb1d`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background);
+```
+
+You should give the `background` property a `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient');
+```
+
+You should use `orange` as the first color in the `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange');
+```
+
+You should use `--building-color1` as the second color in the `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)');
+```
+
+You should use `--window-color1` as the third color in the `linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
new file mode 100644
index 0000000000..457fe4acaf
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md
@@ -0,0 +1,198 @@
+---
+id: 5d822fd413a79914d39e98f5
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`.
+
+# --hints--
+
+You should remove the `background-color` property and value from `.bb1d`
+
+```js
+assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
new file mode 100644
index 0000000000..d1f3fdc799
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f6
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+You can specify where you want a gradient transition to complete by adding it to the color like this:
+
+```css
+gradient-type(
+  color1,
+  color2 20%,
+  color3
+);
+```
+
+Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action.
+
+# --hints--
+
+You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
new file mode 100644
index 0000000000..0533f06214
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98f7
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half.
+
+# --hints--
+
+You should remove `orange` from the `linear-gradient`.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange');
+```
+
+You should change the now first `linear-gradient` color to transition at `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1) 80%,
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
new file mode 100644
index 0000000000..6bf8b3fe84
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md
@@ -0,0 +1,210 @@
+---
+id: 5d822fd413a79914d39e98f8
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building.
+
+# --hints--
+
+You should add two `div` elements to `.bb2`.
+
+```js
+assert.equal(document.querySelector('div.bb2')?.children?.length, 2);
+```
+
+You should give the first `div` a class of `bb2a`.
+
+```js
+assert.exists(document.querySelector('div.bb2a'));
+```
+
+You should give the second `div` a class of `bb2b`.
+
+```js
+assert.exists(document.querySelector('div.bb2b'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+--fcc-editable-region--
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
new file mode 100644
index 0000000000..6fb4f46152
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f9
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later.
+
+# --hints--
+
+You should give `.bb2b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%');
+```
+
+You should give `.bb2b` a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
new file mode 100644
index 0000000000..3a67baddad
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fa
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building.
+
+# --hints--
+
+You should create a new property variable called `window-color2` within `:root`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2'));
+```
+
+You should give `window-color2` a value of `#8cd9b3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
new file mode 100644
index 0000000000..d1924b7bd4
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md
@@ -0,0 +1,240 @@
+---
+id: 5d822fd413a79914d39e98fb
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Gradient transitions often gradually change from one color to another. When a more abrupt change is required, the transition can be made with a hard stop like this:
+
+```css
+linear-gradient(
+  var(--first-color) 0%,
+  var(--first-color) 40%,
+  var(--second-color) 40%,
+  var(--second-color) 80%
+);
+```
+
+Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`.
+
+# --hints--
+
+You should give `.bb2b` a `background` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background);
+```
+
+You should use a `linear-gradient` on the `background`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient");
+```
+
+You should use `--building-color2` from `0%` to `6%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/);
+```
+
+You should use `--window-color2` from `6%` to `9%`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%");
+```
+
+`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
new file mode 100644
index 0000000000..d11cd08f03
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fc
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them.
+
+# --hints--
+
+You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
new file mode 100644
index 0000000000..ff29e839ca
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md
@@ -0,0 +1,209 @@
+---
+id: 5d822fd413a79914d39e98fd
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore.
+
+# --hints--
+
+You should remove the `background-color` from `.bb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
new file mode 100644
index 0000000000..b11ad202cd
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md
@@ -0,0 +1,260 @@
+---
+id: 5d822fd413a79914d39e98fe
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Create and add the following properties to `.bb2a`:
+
+```css
+margin: auto;
+width: 5vw;
+height: 5vw;
+border-top: 1vw solid #000;
+border-bottom: 1vw solid #000;
+border-left: 1vw solid #999;
+border-right: 1vw solid #999;
+```
+
+After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building.
+
+# --hints--
+
+You should give `.bb2a` a `margin` of `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto");
+```
+
+You should give `.bb2a` a `width` of `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw");
+```
+
+You should give `.bb2a` a `height` of `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw");
+```
+
+You should give `.bb2a` a `border-top` of `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)");
+```
+
+You should give `.bb2a` a `border-bottom` of `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)");
+```
+
+You should give `.bb2a` a `border-left` of `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)");
+```
+
+You should give `.bb2a` a `border-right` of `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
new file mode 100644
index 0000000000..162a47660b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md
@@ -0,0 +1,238 @@
+---
+id: 5d822fd413a79914d39e98ff
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle.
+
+# --hints--
+
+You should remove the `width` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width);
+```
+
+You should remove the `height` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height);
+```
+
+You should change the `border-left` to use `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)");
+```
+
+You should change the `border-right` to use `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  width: 5vw;
+  height: 5vw;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 1vw solid #999;
+  border-right: 1vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
new file mode 100644
index 0000000000..c5fec5174a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9900
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible.
+
+# --hints--
+
+You should change the `border-left` to use `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent");
+```
+
+You should change the `border-right` to use `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid #999;
+  border-right: 5vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
new file mode 100644
index 0000000000..6bbdfc4dd9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9901
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building.
+
+# --hints--
+
+You should remove the `margin` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin);
+```
+
+You should remove the `border-top` from `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
new file mode 100644
index 0000000000..b4ade49d2f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e9902
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end.
+
+# --hints--
+
+You should change `border-bottom` to use `5vh`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh");
+```
+
+You should change `border-bottom` to use `--building-color2`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)");
+```
+
+`border-bottom` should be `5vh solid var(--building-color2)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
new file mode 100644
index 0000000000..860d5af5d1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9903
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings.
+
+# --hints--
+
+You should define a new property variable `--window-color3`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3"));
+```
+
+You should give `--window-color3` a value of `#d98cb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
new file mode 100644
index 0000000000..7898c0a157
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9904
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this:
+
+```css
+gradient-type(
+  direction,
+  color1,
+  color2
+);
+```
+
+Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`.
+
+# --hints--
+
+You should give `.bb3` a `background` using `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
+```
+
+You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should use `--building-color3` for the first two colors.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)");
+```
+
+You should use `--window-color3` at `15%` for the third color.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
new file mode 100644
index 0000000000..e54093892a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9905
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now.
+
+# --hints--
+
+You should remove the `background-color` from `.bb3`.
+
+```js
+assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
new file mode 100644
index 0000000000..ecd54aa637
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md
@@ -0,0 +1,249 @@
+---
+id: 5d822fd413a79914d39e9906
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order.
+
+# --hints--
+
+You should add three `div` elements within `.bb4`.
+
+```js
+assert.equal(document.querySelector("div.bb4")?.children?.length, 3);
+```
+
+You should give the first new `div` a class of `bb4a`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should give the second new `div` a class of `bb4b`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should give the third new `div` a class of `bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4a + div.bb4b"));
+assert.exists(document.querySelector("div.bb4b + div.bb4c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb4"></div>
+--fcc-editable-region--
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
new file mode 100644
index 0000000000..230af5f23f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9907
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`.
+
+# --hints--
+
+You should give `.bb4a` a `width` of `3%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%");
+```
+
+You should give `.bb4a` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%");
+```
+
+You should give `.bb4b` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%");
+```
+
+You should give `.bb4b` a `height` of `5%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%");
+```
+
+You should give `.bb4c` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%");
+```
+
+You should give `.bb4c` a `height` of `85%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
new file mode 100644
index 0000000000..b4bce92acb
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9908
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled.
+
+# --hints--
+
+You should remove the `background-color` from `.bb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor);
+```
+
+You should give `.bb4a` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+You should give `.bb4b` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+You should give `.bb4c` a `background-color` of `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+}
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
new file mode 100644
index 0000000000..80590e7dcf
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9909
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding.
+
+# --hints--
+
+You should create a new class declaration called `building-wrap`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
new file mode 100644
index 0000000000..9649bd40b5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md
@@ -0,0 +1,277 @@
+---
+id: 5d822fd413a79914d39e990a
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class.
+
+# --hints--
+
+You should remove `display` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display);
+```
+
+You should move `display` with a value of `flex` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex");
+```
+
+You should remove `flex-direction` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection);
+```
+
+You should move `flex-direction` with a value of `column` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column");
+```
+
+You should remove `align-items` from `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems);
+```
+
+You should move `align-items` with a value of `center` to `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.building-wrap {
+
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
new file mode 100644
index 0000000000..6df3d6c40c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md
@@ -0,0 +1,254 @@
+---
+id: 5d822fd413a79914d39e990b
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it.
+
+# --hints--
+
+You should add `building-wrap` to the `.bb1` element.
+
+```js
+assert.exists(document.querySelector("div.bb1.building-wrap"));
+```
+
+You should add `building-wrap` to the `.bb4` element.
+
+```js
+assert.exists(document.querySelector("div.bb4.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+--fcc-editable-region--
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
new file mode 100644
index 0000000000..ccaa99d42b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e990c
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building.
+
+# --hints--
+
+You should define a new property variable `--window-color4`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4"));
+```
+
+You should give `--window-color4` a value of `#8cb3d9`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
new file mode 100644
index 0000000000..a4de0a094a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md
@@ -0,0 +1,255 @@
+---
+id: 5d822fd413a79914d39e990d
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building.
+
+# --hints--
+
+You should add four `div` elements to `.bb4c`.
+
+```js
+assert.equal(document.querySelector(".bb4c")?.children?.length, 4);
+```
+
+You should give each new `div` a class of `bb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
new file mode 100644
index 0000000000..f9c206b5ae
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md
@@ -0,0 +1,265 @@
+---
+id: 5d822fd413a79914d39e990e
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`.
+
+# --hints--
+
+You should give `.bb4-window` a `width` of `18%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%");
+```
+
+You should give `.bb4-window` a `height` of `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%");
+```
+
+You should give `.bb4-window` a `background-color` of `--window-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
new file mode 100644
index 0000000000..26d3ed042d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md
@@ -0,0 +1,279 @@
+---
+id: 5d822fd413a79914d39e990f
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+
+The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `window-wrap`. Make `.window-wrap` a flexbox container, and use the `align-items` and `justify-content` properties to center its child elements vertically and evenly space them in their parent, respectively.
+
+# --hints--
+
+You should create a `.window-wrap` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap"));
+```
+
+You should give `.window-wrap` a `display` of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex");
+```
+
+You should give `.window-wrap` an `align-items` of `center`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center");
+```
+
+You should give `.window-wrap` a `justify-content` of `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
new file mode 100644
index 0000000000..07de740896
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md
@@ -0,0 +1,266 @@
+---
+id: 5d822fd413a79914d39e9910
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Add the new `window-wrap` class to the `.bb4c` element.
+
+# --hints--
+
+You should add a class of `window-wrap` to `.bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4c.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
new file mode 100644
index 0000000000..f229fafb01
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md
@@ -0,0 +1,291 @@
+---
+id: 5d822fd413a79914d39e9911
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order.
+
+# --hints--
+
+You should add three `div` elements within `.fb1`.
+
+```js
+assert.equal(document.querySelector("div.fb1")?.children?.length, 3);
+```
+
+You should give the first new `div` a class of `fb1a`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1a"));
+```
+
+You should give the second new `div` a class of `fb1b`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1b"));
+```
+
+You should give the third new `div` a class of `fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1c"));
+```
+
+You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1a + div.fb1b"));
+assert.exists(document.querySelector("div.fb1b + div.fb1c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1"></div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
new file mode 100644
index 0000000000..6ad5fc43f3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md
@@ -0,0 +1,287 @@
+---
+id: 5d822fd413a79914d39e9912
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`.
+
+# --hints--
+
+You should give `.fb1b` a `width` of `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%");
+```
+
+You should give `.fb1b` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%");
+```
+
+You should give `.fb1c` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%");
+```
+
+You should give `.fb1c` a `height` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
new file mode 100644
index 0000000000..ea0469fd67
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md
@@ -0,0 +1,280 @@
+---
+id: 5d822fd413a79914d39e9913
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Add the `building-wrap` class to the `.fb1` element to center the sections.
+
+# --hints--
+
+You should add the class `building-wrap` to `.fb1`.
+
+```js
+assert.exists(document.querySelector("div.fb1.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
new file mode 100644
index 0000000000..5b271b0f99
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md
@@ -0,0 +1,284 @@
+---
+id: 5d822fd413a79914d39e9914
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Move the `background-color` property and value from `.fb1` to `.fb1b`.
+
+# --hints--
+
+You should remove `background-color` from `.fb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor);
+```
+
+You should add a `background-color` of `--building-color4` to `.fb1b`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
new file mode 100644
index 0000000000..e914af1b32
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md
@@ -0,0 +1,391 @@
+---
+id: 5d822fd413a79914d39e9915
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+You don't need the `background-color` for this building anymore so you can remove that property.
+
+# --hints--
+
+You should remove the `background-color` of `.fb5`.
+
+```js
+assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
new file mode 100644
index 0000000000..4f6ab3e002
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md
@@ -0,0 +1,297 @@
+---
+id: 5d822fd413a79914d39e9916
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building.
+
+Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`.
+
+# --hints--
+
+You should give `.fb1c` a `background` with a `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient");
+```
+
+You should use a direction of `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should use a first color of `--building-color4` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+You should use a second color of `transparent` from `10%` to `15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(transparent10%,transparent15%\)|transparent10%15%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
new file mode 100644
index 0000000000..aea76037d0
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md
@@ -0,0 +1,307 @@
+---
+id: 5d822fd413a79914d39e9917
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+You can add multiple gradients to an element by separating them with a comma (`,`) like this:
+
+```css
+gradient1(
+  colors
+),
+gradient2(
+  colors
+);
+```
+
+Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last.
+
+# --hints--
+
+You should not alter the first `repeating-linear-gradient`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/);
+```
+
+You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+You should use a second color of `--window-color4` from `10%` to `90%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(var\(--window-color4\)10%,var\(--window-color4\)90%\)|var\(--window-color4\)10%90%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    )
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
new file mode 100644
index 0000000000..849d448b9a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md
@@ -0,0 +1,298 @@
+---
+id: 5d822fd413a79914d39e9918
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements.
+
+# --hints--
+
+You should give `.fb1a` a `border-bottom`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom);
+```
+
+You should use a `border-bottom` of `7vh solid var(--building-color4)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
new file mode 100644
index 0000000000..089b59b3cf
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md
@@ -0,0 +1,301 @@
+---
+id: 5d822fd413a79914d39e9919
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide.
+
+# --hints--
+
+You should give `.fb1a` a `border-left` of `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent");
+```
+
+You should give `.fb1a` a `border-right` of `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+}
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
new file mode 100644
index 0000000000..99fb0d6368
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md
@@ -0,0 +1,312 @@
+---
+id: 5d822fd413a79914d39e991a
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order.
+
+# --hints--
+
+You should add two `div` elements within `.fb2`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2);
+```
+
+You should give the first new `div` a class of `fb2a`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2a"));
+assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild);
+```
+
+You should give the second new `div` a class of `fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+--fcc-editable-region--
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
new file mode 100644
index 0000000000..a021e0bafe
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md
@@ -0,0 +1,314 @@
+---
+id: 5d822fd413a79914d39e991b
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`.
+
+# --hints--
+
+You should give `.fb2a` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%");
+```
+
+You should give `.fb2b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%");
+```
+
+You should give `.fb2b` a `height` of `75%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b"></div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
new file mode 100644
index 0000000000..f050e5dec8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md
@@ -0,0 +1,317 @@
+---
+id: 5d822fd413a79914d39e991c
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building.
+
+# --hints--
+
+You should add three `div` elements within `.fb2b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3);
+```
+
+You should give the three new `div` elements each a class of `fb2-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
new file mode 100644
index 0000000000..fdeac5d1d1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md
@@ -0,0 +1,315 @@
+---
+id: 5d822fd413a79914d39e991d
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Add your `window-wrap` class to `.fb2b` to position the new window elements.
+
+# --hints--
+
+You should add the class `window-wrap` to `.fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2b.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
new file mode 100644
index 0000000000..32508c44ee
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md
@@ -0,0 +1,326 @@
+---
+id: 5d822fd413a79914d39e991e
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable.
+
+# --hints--
+
+You should give the `.fb2-window` elements a `width` of `22%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%");
+```
+
+You should give the `.fb2-window` elements a `height` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%");
+```
+
+You should give the `.fb2-window` elements a `background-color` of `--window-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
new file mode 100644
index 0000000000..51ec85b766
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md
@@ -0,0 +1,324 @@
+---
+id: 5d822fd413a79914d39e991f
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container.
+
+# --hints--
+
+You should remove the `background-color` property from `.fb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor);
+```
+
+You should give `.fb2b` a `background-color` of `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
new file mode 100644
index 0000000000..309d57ea7c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md
@@ -0,0 +1,330 @@
+---
+id: 5d822fd413a79914d39e9920
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape.
+
+# --hints--
+
+You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)");
+```
+
+You should give `.fb2a` a `border-left` of `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent");
+```
+
+You should give `.fb2a` a `border-right` of `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+--fcc-editable-region--
+.fb2a {
+  width: 100%;
+}
+--fcc-editable-region--
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
new file mode 100644
index 0000000000..0347b2e840
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9921
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two.
+
+# --hints--
+
+You should add four `div` elements within `.fb3`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4);
+```
+
+You should give the first new `div` a class of `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a"));
+```
+
+You should give the second new `div` a class of `fb3b`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b"));
+```
+
+You should give the third new `div` a class of `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a"));
+```
+
+You should give the fourth new `div` a class of `fb3b`.
+
+```js
+assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3"></div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
new file mode 100644
index 0000000000..6d78586a55
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md
@@ -0,0 +1,347 @@
+---
+id: 5d822fd413a79914d39e9922
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`.
+
+# --hints--
+
+You should give `.fb3a` a `width` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%");
+```
+
+You should give `.fb3a` a `height` of `15%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%");
+```
+
+You should give `.fb3b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%");
+```
+
+You should give `.fb3b` a `height` of `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--  
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
new file mode 100644
index 0000000000..9d484855c3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9923
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`.
+
+# --hints--
+
+You should remove the `background-color` from `.fb3`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor);
+```
+
+You should give `.fb3a` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+You should give `.fb3b` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
new file mode 100644
index 0000000000..9849c03bbc
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md
@@ -0,0 +1,340 @@
+---
+id: 5d822fd413a79914d39e9924
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Add your `building-wrap` class to the `.fb3` element to center the sections.
+
+# --hints--
+
+You should add the class `building-wrap` to `.fb3`.
+
+```js
+assert.exists(document.querySelector("div.fb3.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
new file mode 100644
index 0000000000..777990a363
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md
@@ -0,0 +1,346 @@
+---
+id: 5d822fd413a79914d39e9925
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section.
+
+# --hints--
+
+You should add three `div` elements within the first `.fb3a` element.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3);
+```
+
+You should give each new `div` a class of `fb3-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a"></div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
new file mode 100644
index 0000000000..2bdf0e99db
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md
@@ -0,0 +1,355 @@
+---
+id: 5d822fd413a79914d39e9926
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value.
+
+# --hints--
+
+You should give `.fb3-window` a `width` of `25%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%");
+```
+
+You should give `.fb3-window` a `height` of `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%");
+```
+
+You should give `.fb3-window` a `background-color` of `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
new file mode 100644
index 0000000000..98bb84bfe6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md
@@ -0,0 +1,350 @@
+---
+id: 5d822fd413a79914d39e9927
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+Add your `window-wrap` class to the `.fb3a` element to center and space the windows.
+
+# --hints--
+
+You should give `.fb3a` a class of `window-wrap`.
+
+```js
+assert.exists(document.querySelector("div.fb3a.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
new file mode 100644
index 0000000000..ed19c0331b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md
@@ -0,0 +1,349 @@
+---
+id: 5d822fd413a79914d39e9928
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+With CSS variables you can change values without searching everywhere in the stylesheet. Change the `--window-color1` value to `#bb99ff`.
+
+# --hints--
+
+You should change the value of `--window-color1` to `#bb99ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
new file mode 100644
index 0000000000..cc5626304a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md
@@ -0,0 +1,362 @@
+---
+id: 5d822fd413a79914d39e9929
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Only three more buildings to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now.
+
+# --hints--
+
+You should add two `div` elements within `.fb4`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2);
+```
+
+You should give the first new `div` a class of `fb4a`.
+
+```js
+assert.exists(document.querySelector("div.fb4a"));
+```
+
+You should give the second new `div` a class of `fb4b`.
+
+```js
+assert.exists(document.querySelector("div.fb4b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+--fcc-editable-region--
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
new file mode 100644
index 0000000000..e5fef28c8c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md
@@ -0,0 +1,359 @@
+---
+id: 5d822fd413a79914d39e992a
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Give `.fb4b` a `width` of `100%` and `height` of `89%`.
+
+# --hints--
+
+You should give `.fb4b` a `width` of `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%");
+```
+
+You should give `.fb4b` a `height` of `89%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
new file mode 100644
index 0000000000..544a93886a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md
@@ -0,0 +1,361 @@
+---
+id: 5d822fd413a79914d39e992b
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`.
+
+# --hints--
+
+You should remove the `background-color` from `.fb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor);
+```
+
+You should give `.fb4b` a `background-color` of `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
new file mode 100644
index 0000000000..ce604acaff
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md
@@ -0,0 +1,364 @@
+---
+id: 5d822fd413a79914d39e992c
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`.
+
+# --hints--
+
+You should add six `div` elements within `.fb4b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6);
+```
+
+You should give each new `div` a class of `fb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+--fcc-editable-region--
+        <div class="fb4b"></div>
+--fcc-editable-region--
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
new file mode 100644
index 0000000000..3f062a2400
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992d
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building.
+
+# --hints--
+
+You should give `.fb4-window` a `width` of `30%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%");
+```
+
+You should give `.fb4-window` a `height` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%");
+```
+
+You should give `.fb4-window` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
new file mode 100644
index 0000000000..d39b2877ef
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md
@@ -0,0 +1,374 @@
+---
+id: 5d822fd413a79914d39e992e
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space.
+
+# --hints--
+
+You should give `.fb4-window` a `background-color` of `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+You should give `.fb4-window` a `margin` of `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
new file mode 100644
index 0000000000..c006f27898
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992f
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+The windows are stacked on top of each other on the rightmost purple building. Turn the building into a flexbox parent, and use the `flex-wrap` property to put the windows side by side, and push them down to a new row when they don't fit.
+
+# --hints--
+
+You should give `.fb4b` a `display` of `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex");
+```
+
+You should give `.fb4b` a `flex-wrap` of `wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
new file mode 100644
index 0000000000..6a95d78f33
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md
@@ -0,0 +1,381 @@
+---
+id: 5d822fd413a79914d39e9930
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color.
+
+# --hints--
+
+You should give `.fb4a` a `border-top` of `5vh solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent")
+```
+
+You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
new file mode 100644
index 0000000000..cf534fc4d5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md
@@ -0,0 +1,404 @@
+---
+id: 5d822fd413a79914d39e9931
+title: Step 106
+challengeType: 0
+dashedName: step-106
+---
+
+# --description--
+
+You can remove the `background-color` for this building now, since it isn't needed.
+
+# --hints--
+
+You should remove the `background-color` of `.fb6`.
+
+```js
+assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
new file mode 100644
index 0000000000..659058a647
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md
@@ -0,0 +1,396 @@
+---
+id: 5d822fd413a79914d39e9932
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`.
+
+# --hints--
+
+You should give `.fb5` a `background` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background);
+```
+
+You should give the `background` a `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient");
+```
+
+You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/);
+```
+
+You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
new file mode 100644
index 0000000000..25ba879145
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9933
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows.
+
+# --hints--
+
+You should give `.fb5` a second `repeating-linear-gradient` in the `background` property.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/);
+```
+
+You should give the second `repeating-linear-gradient` a direction of `90deg`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/);
+```
+
+You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/);
+```
+
+You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    )
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
new file mode 100644
index 0000000000..9d6a5a5b02
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9934
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`.
+
+# --hints--
+
+You should add a `repeating-linear-gradient` to `.fb6` in the `background` property.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient");
+```
+
+You should give the `repeating-linear-gradient` a direction of `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
new file mode 100644
index 0000000000..4f27e41fc9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9935
+title: Step 105
+challengeType: 0
+dashedName: step-105
+---
+
+# --description--
+
+Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors.
+
+# --hints--
+
+You should give `.fb6` a second `repeating-linear-gradient` in the `background` property.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/);
+```
+
+You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+    90deg,
+    var(--building-color3),
+    var(--building-color3) 10%,
+    transparent 10%,
+    transparent 30%
+  )
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
new file mode 100644
index 0000000000..7bd61afd38
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9936
+title: Step 107
+challengeType: 0
+dashedName: step-107
+---
+
+# --description--
+
+Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together.
+
+# --hints--
+
+You should remove the `border` from the `*` selector.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
new file mode 100644
index 0000000000..029d1e069c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md
@@ -0,0 +1,403 @@
+---
+id: 5d822fd413a79914d39e9937
+title: Step 108
+challengeType: 0
+dashedName: step-108
+---
+
+# --description--
+
+Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline.
+
+# --hints--
+
+You should add a class of `sky` to `.background-buildings`.
+
+```js
+assert.exists(document.querySelector("div.background-buildings.sky"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
new file mode 100644
index 0000000000..56759e1359
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md
@@ -0,0 +1,421 @@
+---
+id: 5d822fd413a79914d39e9938
+title: Step 109
+challengeType: 0
+dashedName: step-109
+---
+
+# --description--
+
+Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun.
+
+# --hints--
+
+You should give `.sky` a `radial-gradient` in the `background` property.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient");
+```
+
+You should give the `radial-gradient` a first color of `#ffcf33`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/);
+```
+
+You should give the `radial-gradient` a second color of `#ffff66` at `21%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/);
+```
+
+You should give the `radial-gradient` a third color of `#bbeeff` at `100%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
new file mode 100644
index 0000000000..80e000e8b6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md
@@ -0,0 +1,410 @@
+---
+id: 5d822fd413a79914d39e9939
+title: Step 110
+challengeType: 0
+dashedName: step-110
+---
+
+# --description--
+
+At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves.
+
+# --hints--
+
+You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.sky {
+  background: radial-gradient(
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
new file mode 100644
index 0000000000..d2ce95a6e6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md
@@ -0,0 +1,422 @@
+---
+id: 5d822fd413a79914d39e993a
+title: Step 111
+challengeType: 0
+dashedName: step-111
+---
+
+# --description--
+
+In the previous module you learned that media queries can be used to change styles based on certain conditions, and they look like this:
+
+```css
+@media (condition) {
+
+}  
+```
+
+Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less.
+
+# --hints--
+
+You should add an empty media query with `max-width: 1000px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
new file mode 100644
index 0000000000..3d0bf68b6e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md
@@ -0,0 +1,424 @@
+---
+id: 5d822fd413a79914d39e993b
+title: Step 112
+challengeType: 0
+dashedName: step-112
+---
+
+# --description--
+
+Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night.
+
+Note: You are going to need to scroll past the editable region to copy the class.
+
+# --hints--
+
+You should not delete the existing `.sky` declaration.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/);
+```
+
+You should copy the existing `.sky` declaration into the media query.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+@media (max-width: 1000px) {
+
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
new file mode 100644
index 0000000000..ce748ba40e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md
@@ -0,0 +1,437 @@
+---
+id: 5d822fd413a79914d39e993c
+title: Step 113
+challengeType: 0
+dashedName: step-113
+---
+
+# --description--
+
+In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors.
+
+# --hints--
+
+You should change the first color values from `#ffcf33` to `#ccc`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/);
+```
+
+You should change the second color value from `#ffff66` to `#445`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/);
+```
+
+You should change the third color value from `#bbeeff` to `#223`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+closest-corner circle at 15% 15%,
+#ffcf33,
+#ffcf33 20%,
+#ffff66 21%,
+#bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3),
+var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color4),
+var(--building-color4) 10%,
+transparent 10%,
+transparent 15%
+    ),
+    repeating-linear-gradient(
+var(--building-color4),
+var(--building-color4) 10%,
+var(--window-color4) 10%,
+var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 5%,
+transparent 5%,
+transparent 10%
+    ),
+    repeating-linear-gradient(
+90deg,
+var(--building-color2),
+var(--building-color2) 12%,
+var(--window-color2) 12%,
+var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3) 10%,
+transparent 10%,
+transparent 30%
+    ),
+    repeating-linear-gradient(
+var(--building-color3),
+var(--building-color3) 10%,
+var(--window-color3) 10%,
+var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+  closest-corner circle at 15% 15%,
+  #ffcf33,
+  #ffcf33 20%,
+  #ffff66 21%,
+  #bbeeff 100%
+);
+  }
+--fcc-editable-region--
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
new file mode 100644
index 0000000000..57b5bb2de1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md
@@ -0,0 +1,450 @@
+---
+id: 5d822fd413a79914d39e993d
+title: Step 114
+challengeType: 0
+dashedName: step-114
+---
+
+# --description--
+
+Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there.
+
+# --hints--
+
+You should add a `:root` selector to the media query.
+
+```js
+assert.notDeepEqual(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root"), undefined);
+```
+
+You should add `--building-color1` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000");
+```
+
+You should add `--building-color2` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000");
+```
+
+You should add `--building-color3` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000");
+```
+
+You should add `--building-color4` with a value of `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
new file mode 100644
index 0000000000..2b670dee03
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md
@@ -0,0 +1,862 @@
+---
+id: 5d822fd413a79914d39e993e
+title: Step 115
+challengeType: 0
+dashedName: step-115
+---
+
+# --description--
+
+Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night.
+
+Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great!
+
+# --hints--
+
+You should add `--window-color1` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777");
+```
+
+You should add `--window-color2` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777");
+```
+
+You should add `--window-color3` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777");
+```
+
+You should add `--window-color4` with a value of `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+  }
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+    --window-color1: #777;
+    --window-color2: #777;
+    --window-color3: #777;
+    --window-color4: #777;
+  }
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
new file mode 100644
index 0000000000..6a1bfc5b2b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md
@@ -0,0 +1,65 @@
+---
+id: 619665c9abd72906f3ad30f9
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You will be building a happy Flappy Penguin, and further practicing CSS transforms and animations in the process.
+
+Begin with linking your stylesheet to the page.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.exists(document.querySelector('link'));
+```
+
+Your `link` element should be within your `head` element.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
new file mode 100644
index 0000000000..2572b413a4
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md
@@ -0,0 +1,56 @@
+---
+id: 61967e74a8e3690ab6292daa
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`.
+
+# --hints--
+
+You should use the `body` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+You should use the `background` property in the `body` selector.
+
+```js
+assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background'));
+```
+
+You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
new file mode 100644
index 0000000000..67e0a51de0
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md
@@ -0,0 +1,53 @@
+---
+id: 61968df2acd5550bf1616c34
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Normalize your page's sizing, by removing the `body` element's `margin` and `padding`.
+
+# --hints--
+
+You should give `body` a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+You should give `body` a `padding` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
new file mode 100644
index 0000000000..ec42f16803
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md
@@ -0,0 +1,51 @@
+---
+id: 61968e9243a4090cc805531c
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Remove both the horizontal and vertical scrollbars, using only one property.
+
+# --hints--
+
+You should give `body` an `overflow` of `--fcc-expected--`. But found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
new file mode 100644
index 0000000000..75b3097c34
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md
@@ -0,0 +1,64 @@
+---
+id: 61968f8877c6720d6d61aaf5
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within the `body`, add a `div` with a `class` of `ground`.
+
+# --hints--
+
+You should add a new `div`.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+You should give the `div` a `class` of `ground`.
+
+```js
+assert.include(document.querySelector('div')?.className, 'ground');
+```
+
+You should place the `div` within the `body`.
+
+```js
+assert.exists(document.querySelector('body > div.ground'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
new file mode 100644
index 0000000000..2e20bd3589
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md
@@ -0,0 +1,66 @@
+---
+id: 619691693bc14b0e528f5a20
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`.
+
+# --hints--
+
+You should use the `.ground` selector.
+
+```js
+assert.match(code, /\.ground\s*\{/);
+```
+
+You should give the `.ground` element a `width` of `100vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw');
+```
+
+You should give the `.ground` element a `height` of `400px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
new file mode 100644
index 0000000000..afa5d6f94b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md
@@ -0,0 +1,58 @@
+---
+id: 6196928658b6010f28c39484
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`.
+
+# --hints--
+
+You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
new file mode 100644
index 0000000000..606e749c43
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md
@@ -0,0 +1,73 @@
+---
+id: 619692ff79f5770fc6d8c0b4
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin.
+
+# --hints--
+
+You should add a new `div` within the `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 2);
+```
+
+You should give the `div` a `class` of `penguin`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin');
+```
+
+You should place `div.penguin` before `div.ground`.
+
+```js
+assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
new file mode 100644
index 0000000000..46ebd08c10
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md
@@ -0,0 +1,75 @@
+---
+id: 6196990f966e8f10a40094f6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Target the `.penguin` element, and set its `width` and `height` to `300px`.
+
+# --hints--
+
+You should use the `.penguin` selector.
+
+```js
+assert.match(code, /\.penguin\s*\{/);
+```
+
+You should give `.penguin` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
+```
+
+You should give `.penguin` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
new file mode 100644
index 0000000000..860cde3323
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md
@@ -0,0 +1,74 @@
+---
+id: 619699c10a0f6e11591d73c4
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`.
+
+# --hints--
+
+You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto');
+```
+
+You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
new file mode 100644
index 0000000000..3fa5992f53
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md
@@ -0,0 +1,83 @@
+---
+id: 61969aa6acef5b12200f672e
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To create some scenery in the background, you will add two mountains.
+
+Above the `.penguin` element, add a `div` with a `class` of `left-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `left-mountain`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain');
+```
+
+You should place `.left-mountain` before `.penguin`.
+
+```js
+assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
new file mode 100644
index 0000000000..3568d09eeb
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md
@@ -0,0 +1,89 @@
+---
+id: 61969c487ced6f12db8fef94
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`.
+
+# --hints--
+
+You should use the `.left-mountain` selector.
+
+```js
+assert.match(code, /\.left-mountain\s*\{/);
+```
+
+You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
+```
+
+You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
+```
+
+You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
new file mode 100644
index 0000000000..e8eba6e4ec
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md
@@ -0,0 +1,76 @@
+---
+id: 61969d66cfcdba137d021558
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
new file mode 100644
index 0000000000..a182060c6c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md
@@ -0,0 +1,91 @@
+---
+id: 61969e7451455614217e901b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by.
+
+Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis.
+
+# --hints--
+
+You should give `.left-mountain` a `transform` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
+```
+
+You should use the `skew` function on `transform`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
+```
+
+You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
new file mode 100644
index 0000000000..dc15f9983e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md
@@ -0,0 +1,90 @@
+---
+id: 6196adc17f77a714d51485f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Set the stack level of the mountain element such that it remains directly behind the `.ground` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+You should not change the `z-index` of the `.ground` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
new file mode 100644
index 0000000000..870ce25dc1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md
@@ -0,0 +1,86 @@
+---
+id: 6196aead7ac7bf1584b17a7f
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`.
+
+# --hints--
+
+You should give `.left-mountain` a `margin-top` of `100px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px');
+```
+
+You should give `.ground` a `margin-top` of `-58px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
new file mode 100644
index 0000000000..b6ddd5cad7
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md
@@ -0,0 +1,92 @@
+---
+id: 6196ce0415498d2463989e84
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 4);
+```
+
+You should give the `div` a `class` of `back-mountain`.
+
+```js
+assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain');
+```
+
+You should place `.back-mountain` after `.left-mountain`.
+
+```js
+assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
new file mode 100644
index 0000000000..bcbe4d3e9d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md
@@ -0,0 +1,100 @@
+---
+id: 6196cee94c6da1253809dff9
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`.
+
+# --hints--
+
+You should use the `.back-mountain` selector.
+
+```js
+assert.match(code, /\.back-mountain\s*\{/);
+```
+
+You should give `.back-mountain` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px');
+```
+
+You should give `.back-mountain` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px');
+```
+
+You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
new file mode 100644
index 0000000000..4bb9ea8634
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md
@@ -0,0 +1,87 @@
+---
+id: 6196d00a5d7292262bc02f4c
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.back-mountain` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
new file mode 100644
index 0000000000..d3fd004502
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md
@@ -0,0 +1,100 @@
+---
+id: 6196d0cda039d026f7f78d1e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1');
+```
+
+You should not change the `z-index` of the `.left-mountain` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
new file mode 100644
index 0000000000..cdd348db03
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md
@@ -0,0 +1,131 @@
+---
+id: 6196d1ac33c68d27dcda5796
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`.
+
+# --hints--
+
+You should use the `transform` property to rotate the element.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.notEmpty(backMountain?.transform);
+} else {
+  assert.notEmpty(backMountain?.rotate);
+}
+```
+
+You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain');
+
+if (backMountain?.transform) {
+  assert.equal(backMountain?.transform, 'rotate(45deg)');
+} else {
+  assert.equal(backMountain?.rotate, '45deg');
+}
+```
+
+You should give `.back-mountain` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
+```
+
+You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
+```
+
+You should give `.back-mountain` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
+```
+
+You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
new file mode 100644
index 0000000000..151831dbd7
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md
@@ -0,0 +1,104 @@
+---
+id: 6196d213d99f16287bff22ae
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`.
+
+# --hints--
+
+You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 5);
+```
+
+You should give the new `div` element a `class` of `sun`.
+
+```js
+assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun');
+```
+
+You should place the new `div` element immediately after the `.back-mountain` element.
+
+```js
+assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
new file mode 100644
index 0000000000..61cf99cfee
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md
@@ -0,0 +1,112 @@
+---
+id: 6196d2c0f22ca0293107c048
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`.
+
+# --hints--
+
+You should use the `.sun` selector.
+
+```js
+assert.match(code, /\.sun\s*\{/);
+```
+
+You should give `.sun` a `width` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px');
+```
+
+You should give `.sun` a `height` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px');
+```
+
+You should give `.sun` a `background-color` of `yellow`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
new file mode 100644
index 0000000000..f924e1d525
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md
@@ -0,0 +1,105 @@
+---
+id: 6196d32d1340d829f0f6f57d
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle.
+
+# --hints--
+
+You should give `.sun` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute');
+```
+
+You should give `.sun` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
new file mode 100644
index 0000000000..969618185d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md
@@ -0,0 +1,107 @@
+---
+id: 6196d41d40bf9b2aaea5d520
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen.
+
+# --hints--
+
+You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px');
+```
+
+You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
new file mode 100644
index 0000000000..1253455f06
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md
@@ -0,0 +1,118 @@
+---
+id: 6197cff995d03905b0cca8ad
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Your penguin will consist of two main sections: the head, and the body.
+
+Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`.
+
+# --hints--
+
+You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `penguin-head`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head');
+```
+
+You should give the second `div` a `class` of `penguin-body`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+--fcc-editable-region--
+    <div class="penguin">
+
+    </div>
+--fcc-editable-region--
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
new file mode 100644
index 0000000000..5256d40e7d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md
@@ -0,0 +1,125 @@
+---
+id: 6197f40a16afea068c7e60c8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex);
+```
+
+You should give the `.penguin` element a `z-index` of `4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4');
+```
+
+You should give `.penguin` a `position` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position);
+```
+
+You should give `.penguin` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
new file mode 100644
index 0000000000..c34e5dc0b5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md
@@ -0,0 +1,65 @@
+---
+id: 6197f667297bb30a552ce017
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`.
+
+# --hints--
+
+You should give `.ground` a `z-index` of `3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+You should give `.ground` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
new file mode 100644
index 0000000000..4f42960c10
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md
@@ -0,0 +1,128 @@
+---
+id: 61993b72e874e709b8dfd666
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`.
+
+# --hints--
+
+You should use the `.penguin-head` selector.
+
+```js
+assert.match(code, /\.penguin-head\s*\{/);
+```
+
+You should give `.penguin-head` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%');
+```
+
+You should give `.penguin-head` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`.
+
+```js
+assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
new file mode 100644
index 0000000000..837b66e7b8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md
@@ -0,0 +1,122 @@
+---
+id: 61993cf26a8e0f0a553db223
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+_Most_ penguins do not have a square head.
+
+Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`.
+
+# --hints--
+
+You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`.
+
+```js
+// Maybe check for individual border-radius properties?
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
new file mode 100644
index 0000000000..42992c942d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md
@@ -0,0 +1,139 @@
+---
+id: 61993dbb35adf30b10d49e38
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.
+
+# --hints--
+
+You should use the `.penguin-body` selector.
+
+```js
+assert.match(code, /\.penguin-body\s*\{/);
+```
+
+You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
+```
+
+You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
+```
+
+You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
new file mode 100644
index 0000000000..1304f820e2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md
@@ -0,0 +1,133 @@
+---
+id: 61993e9adc9e9a0bb4d28fff
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Another interesting fact about penguins is that they do not have square bodies.
+
+Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body.
+
+# --hints--
+
+You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
new file mode 100644
index 0000000000..177fa37ed7
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md
@@ -0,0 +1,139 @@
+---
+id: 6199409834ccaf0d10736596
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`.
+
+# --hints--
+
+You should use the `.penguin *` selector.
+
+```js
+assert.match(code, /\.penguin\s*\*\s*\{/);
+```
+
+You should give `.penguin *` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
new file mode 100644
index 0000000000..39d2becaa7
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md
@@ -0,0 +1,154 @@
+---
+id: 6199429802b7c10dc79ff871
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-head` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
+```
+
+You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
+```
+
+You should give `.penguin-head` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
+```
+
+You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
new file mode 100644
index 0000000000..06adbcbaed
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md
@@ -0,0 +1,156 @@
+---
+id: 619943285a41720e6370d985
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top);
+```
+
+You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%');
+```
+
+You should give `.penguin-body` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left);
+```
+
+You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
new file mode 100644
index 0000000000..841e0fac70
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md
@@ -0,0 +1,146 @@
+---
+id: 619943876b706d0f35c01dbc
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex);
+```
+
+You should give the `.penguin-head` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
new file mode 100644
index 0000000000..71620d485d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md
@@ -0,0 +1,148 @@
+---
+id: 6199442866286d0ff421a4fc
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string.
+
+# --hints--
+
+You should use the `.penguin-body::before` selector.
+
+```js
+assert.match(code, /\.penguin-body::before\s*\{/);
+```
+
+You should give `.penguin-body::before` a `content` of `""`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
new file mode 100644
index 0000000000..95939a0a79
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md
@@ -0,0 +1,145 @@
+---
+id: 619bcf239fc15905ecd66fce
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Position the pseudo-element relative to its closest positioned ancestor.
+
+# --hints--
+
+You should give `.penguin-body::before` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
new file mode 100644
index 0000000000..144a263043
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md
@@ -0,0 +1,158 @@
+---
+id: 619be73b3c806006ccc00bb0
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`.
+
+# --hints--
+
+You should give `.penguin-body::before` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
+```
+
+You should give `.penguin-body::before` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%');
+```
+
+You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
new file mode 100644
index 0000000000..32e8d7967e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Position the pseudo-element `10%` from the top and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
new file mode 100644
index 0000000000..f22f0e3944
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md
@@ -0,0 +1,160 @@
+---
+id: 619be80062551a080e32c821
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`.
+
+# --hints--
+
+You should use the `border-radius` property to round off the crest.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
+```
+
+You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
new file mode 100644
index 0000000000..1c9a12db86
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md
@@ -0,0 +1,152 @@
+---
+id: 619be8ce4ea49008c5bfbc30
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Increase the pseudo-element's transparency by `30%`.
+
+# --hints--
+
+You should give `.penguin-body::before` an `opacity` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
new file mode 100644
index 0000000000..088e47ba55
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md
@@ -0,0 +1,166 @@
+---
+id: 619be946958c6009844f1dee
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`.
+
+# --hints--
+
+You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
+```
+
+You should give the second `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
new file mode 100644
index 0000000000..e25cfd80ce
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md
@@ -0,0 +1,193 @@
+---
+id: 619c155df0063a0a3fec0e32
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`.
+
+# --hints--
+
+You should use the `.face` selector.
+
+```js
+assert.match(code, /\.face\s*\{/);
+```
+
+You should give `.face` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
+```
+
+You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
+```
+
+You should give `.face` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
+```
+
+You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
+```
+
+You should give `.face` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
+```
+
+You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
new file mode 100644
index 0000000000..999faf2cd7
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md
@@ -0,0 +1,165 @@
+---
+id: 619c16debd0c270b01c5ce38
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`.
+
+# --hints--
+
+You should give `.face` a `border-radius` of `70% 70% 60% 60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
new file mode 100644
index 0000000000..1204286781
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md
@@ -0,0 +1,169 @@
+---
+id: 619cfdf2e63ddf05feab86ad
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Position the `.face` elements so that they are `15%` from the top.
+
+# --hints--
+
+You should give `.face` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top);
+```
+
+You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
new file mode 100644
index 0000000000..3529e08289
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md
@@ -0,0 +1,171 @@
+---
+id: 619d019488f98c06acbbb71a
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Currently, the two `.face` elements are on top of each other.
+
+Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element.
+
+# --hints--
+
+You should give a `class` of `left` to the first `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left');
+```
+
+You should give a `class` of `right` to the second `.face` element.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
new file mode 100644
index 0000000000..cdb0268e02
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md
@@ -0,0 +1,177 @@
+---
+id: 619d022dc8400c0763829a17
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+Target the `.face` element with the `left` class, and position it `5%` left of its parent.
+
+# --hints--
+
+You should use the `.face.left` selector.
+
+```js
+assert.match(code, /\.face\.left\s*\{/);
+```
+
+You should give `.face.left` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left);
+```
+
+You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
new file mode 100644
index 0000000000..c81e359b35
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md
@@ -0,0 +1,181 @@
+---
+id: 619d02c7bc95bf0827a5d296
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+Target the `.face` element with the `right` class, and position it `5%` right of its parent.
+
+# --hints--
+
+You should use the `.face.right` selector.
+
+```js
+assert.match(code, /\.face\.right\s*\{/);
+```
+
+You should give `.face.right` a `right` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
+```
+
+You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+.face.left {
+  left: 5%;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
new file mode 100644
index 0000000000..7101cc6218
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md
@@ -0,0 +1,184 @@
+---
+id: 619d033915012509031f309a
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Below the `.face.right` element, add a `div` element with a `class` of `chin`.
+
+# --hints--
+
+You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `chin`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.chin'));
+```
+
+You should place the `div` element below the `.face.right` element.
+
+```js
+assert.exists(document.querySelector('.face.right + .chin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
new file mode 100644
index 0000000000..8ff7447615
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md
@@ -0,0 +1,210 @@
+---
+id: 619d03dadadb6509a16f4f5f
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`.
+
+# --hints--
+
+You should use the `.chin` selector.
+
+```js
+assert.match(code, /\.chin\s*\{/);
+```
+
+You should give `.chin` a `width` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width);
+```
+
+You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%');
+```
+
+You should give `.chin` a `height` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height);
+```
+
+You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%');
+```
+
+You should give `.chin` a `background-color` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor);
+```
+
+You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
new file mode 100644
index 0000000000..9177d13254
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md
@@ -0,0 +1,206 @@
+---
+id: 619d0503e03a790a4179d463
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`.
+
+# --hints--
+
+You should give `.chin` a `top` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top);
+```
+
+You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%');
+```
+
+You should give `.chin` a `left` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left);
+```
+
+You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%');
+```
+
+You should give `.chin` a `border-radius` of `70% 70% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
new file mode 100644
index 0000000000..ca096090f1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md
@@ -0,0 +1,197 @@
+---
+id: 619d05c54dabca0b10058235
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+So far, the `.face` and `.chin` elements have the same `background-color`.
+
+Create a custom CSS property called `--penguin-face`, and set it to `white`.
+
+# --hints--
+
+You should use the `:root` selector.
+
+```js
+assert.match(code, /:root\s*\{/);
+```
+
+You should give `:root` a `--penguin-face` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face'));
+```
+
+You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
new file mode 100644
index 0000000000..207c0664d1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md
@@ -0,0 +1,197 @@
+---
+id: 619d0882f54bf40bdc4671ed
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Where relevant, replace property values with your `--penguin-face` variable.
+
+# --hints--
+
+You should give `.face` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should give `.chin` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+You should not use `var(--penguin-face)` in the `.penguin-body` selector.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
new file mode 100644
index 0000000000..a7caac10b5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md
@@ -0,0 +1,222 @@
+---
+id: 619d090cd8d6db0c93dc5087
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5);
+```
+
+You should give the first new `div` a `class` of `eye`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye'));
+```
+
+You should give the second new `div` a `class` of `eye`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.right'));
+```
+
+You should place `div.eye.left` after `div.chin`.
+
+```js
+assert.exists(document.querySelector('.chin + .eye.left'));
+```
+
+You should place `div.eye.right` after `div.eye.left`.
+
+```js
+assert.exists(document.querySelector('.eye.left + .eye.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
new file mode 100644
index 0000000000..e2f3ce9e93
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md
@@ -0,0 +1,207 @@
+---
+id: 619d0b51ca42ed0d74582186
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`.
+
+# --hints--
+
+You should use the `.eye` selector.
+
+```js
+assert.match(code, /\.eye\s*\{/);
+```
+
+You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%');
+```
+
+You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%');
+```
+
+You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
new file mode 100644
index 0000000000..a4e7d18c12
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md
@@ -0,0 +1,200 @@
+---
+id: 619d0bc9cb05360e1bf549c3
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%');
+```
+
+You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
new file mode 100644
index 0000000000..b567a24805
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md
@@ -0,0 +1,215 @@
+---
+id: 619d0c1594c38c0ebae75878
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent.
+
+# --hints--
+
+You should use the `.eye.left` selector.
+
+```js
+assert.match(code, /\.eye\.left\s*\{/);
+```
+
+You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%');
+```
+
+You should use the `.eye.right` selector.
+
+```js
+assert.match(code, /\.eye\.right\s*\{/);
+```
+
+You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
new file mode 100644
index 0000000000..2d324e7251
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md
@@ -0,0 +1,225 @@
+---
+id: 619d0d18ca99870f884a7bff
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Within each `.eye` element, add a `div` with a `class` of `eye-lid`.
+
+# --hints--
+
+You should add one `div` element within `.eye.left`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
+```
+
+You should add one `div` element within `.eye.right`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
+```
+
+You should give the first new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.left > div.eye-lid'));
+```
+
+You should give the second new `div` a `class` of `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.right > div.eye-lid'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+
+        </div>
+        <div class="eye right">
+
+        </div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
new file mode 100644
index 0000000000..224cfce88b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md
@@ -0,0 +1,227 @@
+---
+id: 619d0daf214542102739b0da
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`.
+
+# --hints--
+
+You should use the `.eye-lid` selector.
+
+```js
+assert.match(code, /\.eye-lid\s*\{/);
+```
+
+You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%');
+```
+
+You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%');
+```
+
+You should give `.eye-lid` a `background-color` of `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
new file mode 100644
index 0000000000..e779df5c2d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md
@@ -0,0 +1,226 @@
+---
+id: 619d0e56f9ca9710fcb974e3
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%');
+```
+
+You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%');
+```
+
+You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
new file mode 100644
index 0000000000..ed405abe92
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md
@@ -0,0 +1,247 @@
+---
+id: 619d0eec0ac40611b41e2ccc
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7);
+```
+
+You should give the first new `div` a `class` of `blush`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush'));
+```
+
+You should give the second new `div` a `class` of `blush`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.left'));
+```
+
+You should give the second new `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.right'));
+```
+
+You should place `.blush.right` after `.blush.left`.
+
+```js
+assert.exists(document.querySelector('.blush.left + .blush.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
new file mode 100644
index 0000000000..a346767374
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md
@@ -0,0 +1,238 @@
+---
+id: 619d0fc9825c271253df28d4
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`.
+
+# --hints--
+
+You should use the `.blush` selector.
+
+```js
+assert.match(code, /\.blush\s*\{/);
+```
+
+You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%');
+```
+
+You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%');
+```
+
+You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
new file mode 100644
index 0000000000..78310b8e23
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md
@@ -0,0 +1,231 @@
+---
+id: 619d102d786c3d13124c37c6
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%');
+```
+
+You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
new file mode 100644
index 0000000000..9431c4764e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md
@@ -0,0 +1,246 @@
+---
+id: 619d107edf7ddf13cc77106a
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent.
+
+# --hints--
+
+You should use the `.blush.left` selector.
+
+```js
+assert.match(code, /\.blush\.left\s*\{/);
+```
+
+You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%');
+```
+
+You should use the `.blush.right` selector.
+
+```js
+assert.match(code, /\.blush\.right\s*\{/);
+```
+
+You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
new file mode 100644
index 0000000000..39348186b5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md
@@ -0,0 +1,271 @@
+---
+id: 619d10cc98145f14820399c5
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9);
+```
+
+You should give the first new `div` a `class` of `beak`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak'));
+```
+
+You should give the second new `div` a `class` of `beak`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `top`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.top'));
+```
+
+You should give the second new `div` a `class` of `bottom`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.bottom'));
+```
+
+You should place `div.beak.top` after `div.blush.right`.
+
+```js
+assert.exists(document.querySelector('.blush.right + .beak.top'));
+```
+
+You should place `div.beak.bottom` after `div.beak.top`.
+
+```js
+assert.exists(document.querySelector('.beak.top + .beak.bottom'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
new file mode 100644
index 0000000000..ea381856af
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md
@@ -0,0 +1,256 @@
+---
+id: 619d115e2adcd71538e82ebb
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should use the `.beak` selector.
+
+```js
+assert.match(code, /\.beak\s*\{/);
+```
+
+You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%');
+```
+
+You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange');
+```
+
+You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
new file mode 100644
index 0000000000..d1617d8dce
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md
@@ -0,0 +1,262 @@
+---
+id: 619d11e6d5ef9515d2a16033
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent.
+
+# --hints--
+
+You should use the `.beak.top` selector.
+
+```js
+assert.match(code, /\.beak\.top\s*\{/);
+```
+
+You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%');
+```
+
+You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%');
+```
+
+You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
new file mode 100644
index 0000000000..e580633578
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md
@@ -0,0 +1,267 @@
+---
+id: 619d129a417d0716a94de913
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`.
+
+# --hints--
+
+You should use the `.beak.bottom` selector.
+
+```js
+assert.match(code, /\.beak\.bottom\s*\{/);
+```
+
+You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%');
+```
+
+You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%');
+```
+
+You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
new file mode 100644
index 0000000000..4773a10cef
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md
@@ -0,0 +1,267 @@
+---
+id: 619d1340361095175f4b5115
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element.
+
+# --hints--
+
+You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
+```
+
+You should give the new `div` a `class` of `shirt`.
+
+```js
+assert.exists(document.querySelector('.penguin > div.shirt'));
+```
+
+You should place the new `div` before `.penguin-body`.
+
+```js
+assert.exists(document.querySelector('.shirt + .penguin-body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
new file mode 100644
index 0000000000..ff117fcdd8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md
@@ -0,0 +1,263 @@
+---
+id: 619d15797b580c1828b05426
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Within the `.shirt` element, add a `div` with the following emoji as content: 💜
+
+# --hints--
+
+You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
+```
+
+You should give the new `div` a content of `💜`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > div')?.textContent, '💜');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
new file mode 100644
index 0000000000..b0330c317b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md
@@ -0,0 +1,264 @@
+---
+id: 619d15d955d9d418c4487bbc
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS`
+
+# --hints--
+
+You should add one `p` element within `.shirt`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > p')?.length, 1);
+```
+
+You should give the `p` element the content `I CSS`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+        <div>💜</div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
new file mode 100644
index 0000000000..2ca7d6a5d8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md
@@ -0,0 +1,278 @@
+---
+id: 619d1629a8adc61960ca8b40
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`.
+
+# --hints--
+
+You should use the `.shirt` selector.
+
+```js
+assert.match(code, /\.shirt\s*\{/);
+```
+
+You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px');
+```
+
+You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif');
+```
+
+You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
new file mode 100644
index 0000000000..c21bb0f24d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md
@@ -0,0 +1,272 @@
+---
+id: 619d1c5fc9f8941a400955da
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+In some browsers, the _heart_ emoji may look slightly different from the previous step. This is because some of the character's properties were overridden by the `font-weight` style of `bold`.
+
+Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value.
+
+# --hints--
+
+You should use the `.shirt div` selector to target the `div` with the heart emoji.
+
+```js
+assert.match(code, /\.shirt div\s*\{/);
+```
+
+You should give the `.shirt div` a `font-weight` of `initial` or `normal`.
+
+```js
+assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
new file mode 100644
index 0000000000..79b1e394fb
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md
@@ -0,0 +1,273 @@
+---
+id: 619d1dab9ff3421ae1976991
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent.
+
+# --hints--
+
+You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px');
+```
+
+You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+.shirt div {
+  font-weight: initial;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
new file mode 100644
index 0000000000..0c23ce14f1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md
@@ -0,0 +1,281 @@
+---
+id: 619d1deb8b04811b8839ffe4
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element.
+
+# --hints--
+
+You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px');
+```
+
+You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px');
+```
+
+You should give the `.shirt` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
new file mode 100644
index 0000000000..e650139f7e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md
@@ -0,0 +1,272 @@
+---
+id: 619d1e7a8e81a61c5a819dc4
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+For the shirt's final touch, set the `color` to `#6a6969`.
+
+# --hints--
+
+You should give `.shirt` a `color` of `#6a6969`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
new file mode 100644
index 0000000000..a3dc1fdbf5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md
@@ -0,0 +1,306 @@
+---
+id: 619d1ed33c9a071cf657a0d6
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Fun fact: Penguins cannot stand without at least two feet.
+
+Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
+```
+
+You should give the first new `div` a `class` of `foot`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot'));
+```
+
+You should give the second new `div` a `class` of `foot`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.right'));
+```
+
+You should place `.foot.right` after `.foot.left`.
+
+```js
+assert.exists(document.querySelector('.foot.left + .foot.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
new file mode 100644
index 0000000000..f685b84cb6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md
@@ -0,0 +1,295 @@
+---
+id: 619d1fb5d244c31db8a7fdb7
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`.
+
+# --hints--
+
+You should use the `.foot` selector.
+
+```js
+assert.match(code, /\.foot\s*\{/);
+```
+
+You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%');
+```
+
+You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%');
+```
+
+You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
new file mode 100644
index 0000000000..e26cf4e13a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md
@@ -0,0 +1,288 @@
+---
+id: 619d204bd73ae51e743b8e94
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`.
+
+# --hints--
+
+You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%');
+```
+
+You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
new file mode 100644
index 0000000000..b4d5cd859d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md
@@ -0,0 +1,304 @@
+---
+id: 619d20b12996101f430920fb
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+The penguin's beak and feet share the same `color`.
+
+Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-picorna` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna'));
+```
+
+You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange');
+```
+
+You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+  top: 85%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
new file mode 100644
index 0000000000..d2083801b8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md
@@ -0,0 +1,304 @@
+---
+id: 619d21fe6a3f9b2016be9d9d
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent.
+
+# --hints--
+
+You should use the `.foot.left` selector.
+
+```js
+assert.match(code, /\.foot\.left\s*\{/);
+```
+
+You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%');
+```
+
+You should use the `.foot.right` selector.
+
+```js
+assert.match(code, /\.foot\.right\s*\{/);
+```
+
+You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
new file mode 100644
index 0000000000..003b9709c0
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md
@@ -0,0 +1,312 @@
+---
+id: 619d229b0e542520cd91c685
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`.
+
+# --hints--
+
+You should give `.foot.left` a `transform` of `rotate(80deg)`.
+
+```js
+const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left');
+
+if (leftFoot?.transform) {
+  assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)');
+} else {
+  assert.equal(leftFoot.getPropVal('rotate', true), '80deg');
+}
+```
+
+You should give `.foot.right` a `transform` of `rotate(-80deg)`.
+
+```js
+const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right');
+
+if (rightFoot?.transform) {
+  assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)');
+} else {
+  assert.equal(rightFoot.getPropVal('rotate', true), '-80deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.foot.left {
+  left: 25%;
+
+}
+
+.foot.right {
+  right: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
new file mode 100644
index 0000000000..ef45038dbc
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md
@@ -0,0 +1,295 @@
+---
+id: 619d23089e787e216a7043d6
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element.
+
+# --hints--
+
+You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
new file mode 100644
index 0000000000..906076ce8b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md
@@ -0,0 +1,328 @@
+---
+id: 619d237a107c10221ed743fa
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Fun fact: Penguins cannot fly without wings.
+
+Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`.
+
+# --hints--
+
+You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4);
+```
+
+You should give the first new `div` a `class` of `arm`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm'));
+```
+
+You should give the second new `div` a `class` of `arm`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2);
+```
+
+You should give one `div` a `class` of `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.left'));
+```
+
+You should give the other `div` a `class` of `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.right'));
+```
+
+You should place `.arm.right` after `.arm.left`.
+
+```js
+assert.exists(document.querySelector('.arm.left + .arm.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
new file mode 100644
index 0000000000..94dcb78521
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md
@@ -0,0 +1,317 @@
+---
+id: 619d26b12e651022d80cd017
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`.
+
+# --hints--
+
+You should use the `.arm` selector.
+
+```js
+assert.match(code, /\.arm\s*\{/);
+```
+
+You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%');
+```
+
+You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
+
+```js
+assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
new file mode 100644
index 0000000000..a3333bcfba
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md
@@ -0,0 +1,332 @@
+---
+id: 619d2712853306238f41828e
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it.
+
+# --hints--
+
+You should give `:root` a `--penguin-skin` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin'));
+```
+
+You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))');
+```
+
+You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)');
+```
+
+You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    gray,
+    rgb(209, 210, 199)
+  );
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
new file mode 100644
index 0000000000..b897e4cc61
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md
@@ -0,0 +1,340 @@
+---
+id: 619d2b7a84e78b246f2d17a2
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent.
+
+# --hints--
+
+You should use the `.arm.left` selector.
+
+```js
+assert.match(code, /\.arm\.left\s*\{/);
+```
+
+You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%');
+```
+
+You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%');
+```
+
+You should use the `.arm.right` selector.
+
+```js
+assert.match(code, /\.arm\.right\s*\{/);
+```
+
+You should give `.arm.right` a `top` of `0%`.
+
+```js
+assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top);
+```
+
+You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
new file mode 100644
index 0000000000..a677c9a443
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md
@@ -0,0 +1,325 @@
+---
+id: 619d2bd9c1d43c2526e96f1f
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent.
+
+# --hints--
+
+You should use the `transform-origin` property to do this.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`.
+
+```js
+assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
new file mode 100644
index 0000000000..ce148c7f62
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md
@@ -0,0 +1,326 @@
+---
+id: 619d2d4e80400325ff89664a
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis.
+
+# --hints--
+
+You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left');
+
+if (leftArm?.rotate && leftArm?.transform) {
+  assert.equal(leftArm.getPropVal('rotate', true), '130deg');
+  assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)');
+} else {
+  assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
new file mode 100644
index 0000000000..7b8d308ed3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md
@@ -0,0 +1,326 @@
+---
+id: 619d2ebc81ba81271460850d
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+Rotate the right arm by `45deg` counterclockwise.
+
+# --hints--
+
+You should give `.arm.right` a `transform` of `rotate(-45deg)`.
+
+```js
+const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right');
+
+if (rightArm?.transform) {
+  assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)');
+} else {
+  assert.equal(rightArm?.getPropVal('rotate', true), '-45deg');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+--fcc-editable-region--
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
new file mode 100644
index 0000000000..cb6dc37d62
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md
@@ -0,0 +1,327 @@
+---
+id: 619d2f0e9440bc27caee1cec
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+Fun fact: Most, if not all, flippers are not naturally rectangles.
+
+Give the `.arm` elements' top-left, top-right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`.
+
+# --hints--
+
+You should give `.arm` a `border-radius` of `30% 30% 30% 120%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
new file mode 100644
index 0000000000..81854db2b7
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md
@@ -0,0 +1,323 @@
+---
+id: 619d2fd3ff4f772882e3d998
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element.
+
+# --hints--
+
+You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
new file mode 100644
index 0000000000..f11d2a97f4
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md
@@ -0,0 +1,333 @@
+---
+id: 619d30350883802921bfcccc
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Now, you are going to use CSS animations to make the penguin wave.
+
+Define a new `@keyframes` named `wave`.
+
+# --hints--
+
+You should define a new `@keyframes` rule.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes'));
+```
+
+You should give the `@keyframes` rule a name of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
new file mode 100644
index 0000000000..3294c31569
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md
@@ -0,0 +1,351 @@
+---
+id: 619d324f5915c929f36ae91d
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Give `wave` four waypoints starting at `10%`, and incrementing by `10%`.
+
+# --hints--
+
+You should add a `10%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
+```
+
+You should add a `20%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
+```
+
+You should add a `30%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
+```
+
+You should add a `40%` waypoint for `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
+```
+
+You should have 4 waypoints in your keyframe.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
new file mode 100644
index 0000000000..74235426b5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md
@@ -0,0 +1,347 @@
+---
+id: 619d32c7fa21f32aaa91d499
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%');
+const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, '');
+const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
new file mode 100644
index 0000000000..ac97b33ea2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md
@@ -0,0 +1,347 @@
+---
+id: 619d333b738e3c2b5d58b095
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm.
+
+# --hints--
+
+You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%');
+const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
new file mode 100644
index 0000000000..fd1c9193d0
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md
@@ -0,0 +1,362 @@
+---
+id: 619d337765b9f02c10e93722
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+For the third and fourth waypoints, repeat the `transform` pattern once more.
+
+# --hints--
+
+You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`.
+
+```js
+const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%');
+const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '110deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(110deg)scaleX(-1)');
+}
+```
+
+You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`.
+
+```js
+const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%');
+const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, '');
+const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, '');
+
+if (rotateProp && transformProp) {
+  assert(rotateProp === '130deg');
+  assert(transformProp === 'scaleX(-1)');
+} else {
+  assert(transformProp === 'rotate(130deg)scaleX(-1)');
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
new file mode 100644
index 0000000000..caa7a1fe0a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md
@@ -0,0 +1,357 @@
+---
+id: 619d33c51140292cc5a21742
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function.
+
+# --hints--
+
+You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave');
+```
+
+You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s');
+```
+
+You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite');
+```
+
+You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
new file mode 100644
index 0000000000..e8ab0952d4
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md
@@ -0,0 +1,347 @@
+---
+id: 619d3482f505452d861d0f62
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions.
+
+# --hints--
+
+You should use the `.penguin:active` selector.
+
+```js
+assert.match(code, /\.penguin:active\s*\{/);
+```
+
+You should give `.penguin:active` a `transform` of `scale(1.5)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
new file mode 100644
index 0000000000..3530454295
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md
@@ -0,0 +1,346 @@
+---
+id: 619d3561a951bf2e41a24f10
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+When you activate the `.penguin` element, it might look as though you can drag it around. This is not true.
+
+Indicate this to users, by giving the active element a `cursor` property of `not-allowed`.
+
+# --hints--
+
+You should give `.penguin:active` a `cursor` property of `not-allowed`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin:active {
+  transform: scale(1.5);
+
+}
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
new file mode 100644
index 0000000000..b2fd620c1f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md
@@ -0,0 +1,357 @@
+---
+id: 619d36103839c82efa95dd34
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`.
+
+# --hints--
+
+You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s');
+```
+
+You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out');
+```
+
+You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+
+}
+--fcc-editable-region--
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
new file mode 100644
index 0000000000..18d3c26b52
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md
@@ -0,0 +1,670 @@
+---
+id: 619d3711d04d623000013e9e
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element.
+
+Congratulations! You have completed the Flappy Penguin Workshop.
+
+# --hints--
+
+You should give `.ground` a `height` of `calc(100vh - 300px)`.
+
+```js
+assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: calc(100vh - 300px);
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
new file mode 100644
index 0000000000..9d306c557a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Normalize your page, by setting the `width` to `100%`, and `height` to `100vh`.
+
+# --hints--
+
+You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
new file mode 100644
index 0000000000..2de5a239c2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537bb9b1a29430ac15ad38.md
@@ -0,0 +1,43 @@
+---
+id: 61537bb9b1a29430ac15ad38
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Start this project by linking your `styles.css` file to the page.
+
+# --hints--
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
new file mode 100644
index 0000000000..ae7572fa05
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md
@@ -0,0 +1,62 @@
+---
+id: 61537c5f81f0cf325b4a854c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Add a `header` element within the `body` element and assign a class of `header` to it.
+
+Inside the `header`, create an `h1` with `css flexbox photo gallery` as the text.
+
+# --hints--
+
+You should have a `header` element within your `body` element.
+
+```js
+assert.exists(document.querySelector('body')?.querySelector('header'));
+```
+
+Your `header` element should have a `class` with `header` as the value.
+
+```js
+assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
+```
+
+Your `header` element should have an `h1` element inside it.
+
+```js
+assert.exists(document.querySelector('.header')?.querySelector('h1'));
+```
+
+Your `h1` element should have the text `css flexbox photo gallery` inside it.
+
+```js
+assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html>
+  <head lang="en">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
new file mode 100644
index 0000000000..7461f43485
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md
@@ -0,0 +1,65 @@
+---
+id: 61537c9eecea6a335db6da79
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Below your `.header` element, create a new `div` element and assign it a `class` of `gallery`. This `div` will act as a container for the gallery images.
+
+Inside that `.gallery` element, create nine `img` elements.
+
+# --hints--
+
+You should create a `div` element in your `body` element.
+
+```js
+assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1);
+```
+
+Your new `div` element should have a `class` with `gallery` set as the value.
+
+```js
+assert(document.querySelector('body')?.querySelector('.gallery'));
+```
+
+Your new `div` element should come after your `.header` element.
+
+```js
+assert(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery'));
+```
+
+Your `.gallery` element should have nine `img` elements.
+
+```js
+assert(document.querySelector('.gallery')?.querySelectorAll('img')?.length === 9);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
new file mode 100644
index 0000000000..6766539792
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md
@@ -0,0 +1,111 @@
+---
+id: 61537d86bdc3dd343688fceb
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Next, give each `img` a `src` attribute according to its order in the document. The first `img` should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. The rest should be the same, except replace the `1` with the number the `img` is in the document.
+
+# --hints--
+
+All nine of your `img` elements should have a `src` attribute.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('src')));
+```
+
+Your first `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
+```
+
+Your second `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
+```
+
+Your third `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
+```
+
+Your fourth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
+```
+
+Your fifth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
+```
+
+Your sixth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
+```
+
+Your seventh `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
+```
+
+Your eighth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
+```
+
+Your ninth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` set as the `src` attribute value.
+
+```js
+assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+--fcc-editable-region--
+    <div class="gallery">
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
new file mode 100644
index 0000000000..c3de674b58
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md
@@ -0,0 +1,83 @@
+---
+id: 615380dff67172357fcf0425
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Now your images are too big.
+
+Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`.
+
+Also set the `height` property to `300px` to keep your images a uniform size.
+
+# --hints--
+
+You should have a `.gallery img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
+```
+
+Your `.gallery img` selector should have a `width` property set to `100%` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
+```
+
+Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth, '350px');
+```
+
+Your `.gallery img` selector should have a `height` property set to `300px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height, '300px');
+```
+
+# --seed--
+
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
new file mode 100644
index 0000000000..e3bb0d435b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153893900438b4643590367.md
@@ -0,0 +1,112 @@
+---
+id: 6153893900438b4643590367
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
+
+Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values.
+
+Add a `border-bottom` with `4px solid #fdb347` as the value.
+
+# --hints--
+
+You should have a `.header` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
+```
+
+Your `.header` selector should have a `text-align` property set to `center` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center');
+```
+
+Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase');
+```
+
+Your `.header` selector should have a `padding` property set to `32px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.padding, '32px');
+```
+
+Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor, 'rgb(10, 10, 35)');
+```
+
+Your `.header` selector should have a `color` property set to `#fff` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.color, 'rgb(255, 255, 255)');
+```
+
+Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom, '4px solid rgb(253, 179, 71)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+body  {
+  margin: 0;
+  font-family: sans-serif;
+  background-color: #f5f6f7;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
new file mode 100644
index 0000000000..3b04a4b69a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153897c27f6334716ee5abe.md
@@ -0,0 +1,93 @@
+---
+id: 6153897c27f6334716ee5abe
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
+
+To use it, give an element a `display` property of `flex`. This will make the element a <em>flex container</em>. Any direct children of a flex container are called <em>flex items</em>.
+
+Create a `.gallery` selector and make it a flex container.
+
+
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `display` property set to `flex` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
new file mode 100644
index 0000000000..7f754c701b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md
@@ -0,0 +1,94 @@
+---
+id: 6153908a366afb4d57185c8d
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Flexbox has a main and cross axis. The main axis is defined by the `flex-direction` property, which has four possible values:
+
+- `row` (default): horizontal axis with flex items from left to right
+- `row-reverse`: horizontal axis with flex items from right to left
+- `column`: vertical axis with flex items from top to bottom
+- `column-reverse`: vertical axis with flex items from bottom to top
+
+**Note**: The axes and directions will be different depending on the text direction. The values shown are for a left-to-right text direction.
+
+Try the different values to see how they affect the layout.
+
+When you are done, set an explicit `flex-direction` of `row` on the `.gallery` element.
+
+# --hints--
+
+Your `.gallery` selector should have a `flex-direction` property set to `row` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
new file mode 100644
index 0000000000..60f0140aab
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md
@@ -0,0 +1,88 @@
+---
+id: 615392916d83fa4f02f7e2cf
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+
+The `flex-wrap` property determines how your flex items behave when the flex container is too small. Setting it to `wrap` will allow the items to wrap to the next row or column. `nowrap` (default) will prevent your items from wrapping and shrink them if needed.
+
+
+Make it so your flex items wrap to the next row when they run out of space.
+
+# --hints--
+
+Your `.gallery` selector should have a `flex-wrap` property set to `wrap` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap === 'wrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
new file mode 100644
index 0000000000..6f8a34d276
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md
@@ -0,0 +1,87 @@
+---
+id: 6153938dce8b294ff8f5a4e9
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.
+
+Give your `.gallery` selector a `justify-content` property with `center` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have a `justify-content` property set to `center` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
new file mode 100644
index 0000000000..8803a6b2e2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md
@@ -0,0 +1,88 @@
+---
+id: 6153947986535e5117e60615
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+The `align-items` property positions the flex content along the cross axis. In this case, with your `flex-direction` set to `row`, your cross axis would be vertical.
+
+To vertically center your images, give your `.gallery` selector an `align-items` property with `center` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have an `align-items` property set to `center` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
new file mode 100644
index 0000000000..1994f1565a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md
@@ -0,0 +1,104 @@
+---
+id: 61539e07e7430b528fbffe21
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Give your `.gallery` selector a `padding` property set to `20px 10px` to create some space around the container.
+
+Then, give it a `max-width` of `1400px` and add a `margin` of `0 auto` to center it.
+
+# --hints--
+
+Your `.gallery` selector should have a `padding` property set to `20px 10px` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingTop, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingBottom, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingLeft, '10px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingRight, '10px');
+```
+
+Your `.gallery` selector should have a `max-width` property set to `1400px` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth === '1400px');
+```
+
+Your `.gallery` element should be centered using a `margin` with `0 auto` as the value.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.gallery').cssText, 'margin: 0px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
new file mode 100644
index 0000000000..fa88f83ba5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md
@@ -0,0 +1,92 @@
+---
+id: 61539f32a206bd53ec116465
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Notice how some of your images have become distorted. This is because the images have different aspect ratios. Rather than setting each aspect ratio individually, you can use the `object-fit` property to determine how images should behave.
+
+Give your `.gallery img` selector the `object-fit` property and set it to `cover`. This will tell the image to fill the `img` container while maintaining aspect ratio, resulting in cropping to fit.
+
+# --hints--
+
+Your `.gallery img` selector should have an `object-fit` property set to `cover` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
new file mode 100644
index 0000000000..23268a5f38
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md
@@ -0,0 +1,95 @@
+---
+id: 6153a04847abee57a3a406ac
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Your images need some space between them.
+
+The `gap` CSS shorthand property sets the gaps, also known as gutters, between rows and columns. The `gap` property and its `row-gap` and `column-gap` sub-properties provide this functionality for flex, grid, and multi-column layout. You apply the property to the container element.
+
+Give your `.gallery` flex container a `gap` property with `16px` as the value.
+
+# --hints--
+
+Your `.gallery` selector should have a `gap` property with `16px` set as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
new file mode 100644
index 0000000000..639e9b7cb6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md
@@ -0,0 +1,92 @@
+---
+id: 6153a3485f0b20591d26d2a1
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Smooth out your images a bit by giving the `.gallery img` selector a `border-radius` property with `10px` set as the value.
+
+# --hints--
+
+Your `.gallery img` selector should have a `border-radius` property with `10px` set as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
new file mode 100644
index 0000000000..44bec2cf27
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md
@@ -0,0 +1,112 @@
+---
+id: 6153a3952facd25a83fe8083
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `::after` pseudo-element creates an element that is the last child of the selected element. You can use it to add an empty element after the last image. If you give it the same `width` as the images it will push the last image to the left when the gallery is in a two-column layout. Right now, it is in the center because you set `justify-content: center` on the flex container.
+
+Example:
+
+```CSS
+.container::after {
+  content: "";
+  width: 860px;
+}
+```
+
+Create a new selector using an `::after` pseudo-element on the `.gallery` element. Add a `content` property set to an empty string `""` and `350px` set for the `width` property.
+
+# --hints--
+
+Your `.gallery::after` selector should have an empty string `""` set for the `content` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\"");
+```
+
+Your `.gallery::after` selector should have `350px` set for the `width` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
new file mode 100644
index 0000000000..971b0ddd65
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md
@@ -0,0 +1,181 @@
+---
+id: 6153a3ebb4f7f05b8401b716
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+
+The `alt` image attribute should describe the image content. Screen readers announce the alternative text in place of images. If the image can't be loaded, this text is presented in place of the image.
+
+To complete the project, add an `alt` attribute to all nine of your cat images to describe them. Use a value at least five characters long for each.
+
+
+# --hints--
+
+All nine of your `img` elements should have a `alt` attribute with text describing each image, with each description using at least `5` letters.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('alt')));
+assert(images.every(image => image.getAttribute('alt').length >= 5));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      --fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="Gallery">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
new file mode 100644
index 0000000000..9765d1e93b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md
@@ -0,0 +1,92 @@
+---
+id: 615f171d05def3218035dc85
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Remove the margin from your body element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.
+
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `margin` property set to 0 as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
+
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
+```
+
+Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
+```
+
+Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
new file mode 100644
index 0000000000..4b6ce33d27
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6493bc0d99879635209565aa.md
@@ -0,0 +1,75 @@
+---
+id: 6493bc0d99879635209565aa
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `border-box` sizing model does the opposite of `content-box`. The total width of the element, including padding and border, will be the explicit width set. The content of the element will shrink to make room for the padding and border.
+
+Change the `box-sizing` property to `border-box`. Notice how your blue image borders now fit within your red gallery border.
+
+# --hints--
+
+
+Your * selector should have a `box-sizing` property set to `border-box` as the value.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+--fcc-editable-region--
+ * {
+  box-sizing: content-box;
+}
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
new file mode 100644
index 0000000000..11895a275c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/6494da0daf5df5197963671d.md
@@ -0,0 +1,83 @@
+---
+id: 6494da0daf5df5197963671d
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
+
+The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
+
+Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
+
+# --hints--
+
+You should have a `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
+```
+
+Your `*` selector should have its `box-sizing` property set to `content-box`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+  ```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
new file mode 100644
index 0000000000..40a707dd74
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/64dd076a1b33c86d84b4232f.md
@@ -0,0 +1,126 @@
+---
+id: 64dd076a1b33c86d84b4232f
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+In order to better visualize how your elements are sized, adding a border can be helpful.
+
+Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
+
+Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
+```
+
+Your `.gallery` selector should have a `width` property set to `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
+```
+
+Your `.gallery` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
+```
+
+Your `.gallery` selector should have a `border` property set to `5px solid red`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
+```
+
+You should have an `img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+Your `img` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
+```
+
+Your `img` selector should have a `width` property set to `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
+```
+
+Your `img` selector should have a `padding` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
+```
+
+Your `img` selector should have a `padding` property set to `5px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
+```
+
+Your `img` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
+```
+
+Your `img` selector should have a `border` property set to `5px solid blue`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
new file mode 100644
index 0000000000..92603787c3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-flexbox-photo-gallery/64dd136e4e8b0894f9c70d86.md
@@ -0,0 +1,79 @@
+---
+id: 64dd136e4e8b0894f9c70d86
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.
+
+Remove your `.gallery` and `img` selectors, and all rules within.
+
+# --hints--
+
+You should not have a `.gallery` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+You should not have an `img` selector.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+
+
+```
+
+```css
+ * {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+.gallery {
+  border: 5px solid red;
+  width: 50%;
+}
+
+img {
+  width: 100%;
+  border: 5px solid blue;
+  padding: 5px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
index 7386f27ef2..a49b84d26d 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
@@ -7,7 +7,7 @@ dashedName: step-3
 
 # --description--
 
-To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropraite message in the block of each condition.
+To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropriate message in the block of each condition.
 
 Starting with the duplex loan, check if `annualIncome` is greater than or equal to `minIncomeForDuplex` AND if `creditScore` is greater than `minCreditScoreForDuplex`.
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
new file mode 100644
index 0000000000..10c2147f74
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f2abbe7d18d49a1e0e1c8.md
@@ -0,0 +1,58 @@
+---
+id: 615f2abbe7d18d49a1e0e1c8
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You've been provided with a basic HTML boilerplate.
+
+Create an `h1` element within your `body` element and give it the text `Nutrition Facts`.
+
+# --hints--
+
+You should add a new `h1` element.
+
+```js
+assert.exists(document.querySelector('h1'));
+```
+
+Your `h1` element should be within your `body` element.
+
+```js
+assert(document.querySelector('h1')?.parentElement?.localName === 'body');
+```
+
+Your `h1` element should have the text `Nutrition Facts`.
+
+```js
+assert(document.querySelector('h1')?.innerText === 'Nutrition Facts');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
new file mode 100644
index 0000000000..272ccd55ff
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f2d4150fe0d4cbd0f2628.md
@@ -0,0 +1,62 @@
+---
+id: 615f2d4150fe0d4cbd0f2628
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Below your `h1` element, add a `p` element with the text `8 servings per container`.
+
+# --hints--
+
+You should add a new `p` element.
+
+```js
+assert.exists(document.querySelector('p'));
+```
+
+Your `p` element should be within your `body` element.
+
+```js
+assert(document.querySelector('p')?.parentElement?.localName === 'body');
+```
+
+Your `p` element should come after your `h1` element.
+
+```js
+assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1');
+```
+
+Your `p` element should have the text `8 servings per container`.
+
+```js
+assert(document.querySelector('p')?.innerText === '8 servings per container');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
new file mode 100644
index 0000000000..2ae877fe38
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f34948891834dd77655a6.md
@@ -0,0 +1,63 @@
+---
+id: 615f34948891834dd77655a6
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Add a second `p` element with the text `Serving size 2/3 cup (55g)`.
+
+# --hints--
+
+You should have a second `p` element.
+
+```js
+assert(document.querySelectorAll('p')?.length === 2);
+```
+
+Your second `p` element should be within your `body` element.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.parentElement?.localName === 'body');
+```
+
+Your second `p` element should come after your existing `p` element.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p');
+```
+
+Your second `p` element should have the text `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
new file mode 100644
index 0000000000..986fa60763
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
@@ -0,0 +1,88 @@
+---
+id: 615f34ecc1091b4fd5a8a484
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Within your `head` element, add a `link` element with the `rel` attribute set to `stylesheet` and the `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+This will import the `Open Sans` font family, with the font weight values `400`, `700`, and `800`.
+
+Also add a `link` element to link your `styles.css` file.
+
+# --hints--
+
+Your code should have two `link` elements.
+
+```js
+assert.strictEqual(document.querySelectorAll('link').length, 2);
+```
+
+Your `link` elements should be void elements, they should not have a end tag `</link>`.
+
+```js
+assert.notMatch(code, /<\/link>/);
+```
+
+Your two `link` elements should be inside the `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.strictEqual(headElement.querySelectorAll('link').length, 2);
+```
+
+Both of your `link` elements should have the `rel` attribute set to `stylesheet`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert.isTrue(links.every(link => link.getAttribute('rel') === 'stylesheet'));
+```
+
+One of your `link` elements should have an `href` attribute set to `styles.css`.
+
+```js
+const styleElement = document.querySelector('[data-href]');
+assert.isNotNull(styleElement);
+```
+
+One of your `link` elements should have an `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert.exists(links.find(link => link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
new file mode 100644
index 0000000000..d66790fd30
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f357957e370510f21ea16.md
@@ -0,0 +1,55 @@
+---
+id: 615f357957e370510f21ea16
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Create a `body` selector and give it a `font-family` set to `Open Sans` with a fallback of `sans-serif`.
+
+Remember that fonts with spaces in the name must be wrapped in quotes for CSS.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+Your `body` selector should have a `font-family` property set to `"Open Sans", sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === '"Open Sans", sans-serif');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
new file mode 100644
index 0000000000..82f736ff48
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f378014c2da526a109c81.md
@@ -0,0 +1,57 @@
+---
+id: 615f378014c2da526a109c81
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The font is a bit small. Create an `html` selector and set the font to have a size of `16px`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have a `font-size` property set to `16px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
new file mode 100644
index 0000000000..6ceffde047
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f38279e5c3d53692ea441.md
@@ -0,0 +1,66 @@
+---
+id: 615f38279e5c3d53692ea441
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Wrap your `h1` and `p` elements in a `div` element. Give that `div` a `class` attribute set to `label`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelector('div'));
+```
+
+Your new `div` element should have the `class` attribute set to `label`.
+
+```js
+assert(document.querySelector('div')?.classList?.contains('label'));
+```
+
+Your `h1` and `p` elements should be within your new `.label` element.
+
+```js
+const children = [...document.querySelectorAll('h1'), ...document.querySelectorAll('p')];
+assert(children?.every(child => child?.parentElement?.classList?.contains('label')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+--fcc-editable-region--
+<body>
+  <h1>Nutrition Facts</h1>
+  <p>8 servings per container</p>
+  <p>Serving size 2/3 cup (55g)</p>
+</body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
new file mode 100644
index 0000000000..1ea4ac044a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f38cabc64e3556f98cc1a.md
@@ -0,0 +1,65 @@
+---
+id: 615f38cabc64e3556f98cc1a
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Borders can be used to group and prioritize content.
+
+Create a `.label` selector and give it a `border` set to `2px solid black`.
+
+# --hints--
+
+You should have a `.label` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label'));
+```
+
+Your `.label` selector should have a `border` property set to `2px solid black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
new file mode 100644
index 0000000000..e436f20dcd
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3949f58e12577dcefb00.md
@@ -0,0 +1,61 @@
+---
+id: 615f3949f58e12577dcefb00
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Good use of white space can bring focus to the important elements of your page, and help guide your user's eyes through your text.
+
+Give your `.label` selector a `width` property set to `270px`.
+
+# --hints--
+
+Your `.label` selector should have a `width` property set to `270px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.width === '270px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
new file mode 100644
index 0000000000..ca53749464
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f39d7da41b15851fa3fb9.md
@@ -0,0 +1,66 @@
+---
+id: 615f39d7da41b15851fa3fb9
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Give your `.label` selector a `margin` property set to `20px auto`, and a `padding` property set to `0 7px`.
+
+# --hints--
+
+Your `.label` selector should have a `margin` property set to `20px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.margin === '20px auto');
+```
+
+Your `.label` selector should have a `padding` property set to `0 7px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+  width: 270px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
new file mode 100644
index 0000000000..694a4e9ff3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3b091162165948e1cb33.md
@@ -0,0 +1,72 @@
+---
+id: 615f3b091162165948e1cb33
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+If you inspect your `.label` element with your browser's developer tools, you may notice that it's actually 288 pixels wide instead of 270. This is because, by default, the browser includes the border and padding when determining an element's size.
+
+To solve this, reset the box model by creating a `*` selector and giving it a `box-sizing` property of `border-box`.
+
+# --hints--
+
+You should create a `*` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
new file mode 100644
index 0000000000..84ea6cab71
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3cafd794015aa9547a6d.md
@@ -0,0 +1,76 @@
+---
+id: 615f3cafd794015aa9547a6d
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Remember that the use of `h1`, `h2`, and similar tags determine the semantic structure of your HTML. However, you can adjust the CSS of these elements to control the visual flow and hierarchy.
+
+Create an `h1` rule and set the `font-weight` property to `800`. This will make your `h1` text bolder.
+
+# --hints--
+
+You should create an `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+Your `h1` selector should have a `font-weight` property set to `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
new file mode 100644
index 0000000000..fe53466124
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3d9e59db4b5b8e960762.md
@@ -0,0 +1,70 @@
+---
+id: 615f3d9e59db4b5b8e960762
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Give your `h1` selector a `text-align` property of `center`.
+
+# --hints--
+
+Your `h1` selector should have a `text-align` property set to `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
new file mode 100644
index 0000000000..0c437fb4e8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3e1b7233ee5c7595771f.md
@@ -0,0 +1,71 @@
+---
+id: 615f3e1b7233ee5c7595771f
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Fine-tune the placement of your `h1` by giving it a top and bottom margin of `-4px` and a left and right margin of `0`.
+
+# --hints--
+
+Your `h1` selector should have a `margin` property set to `-4px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.margin === '-4px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
new file mode 100644
index 0000000000..2448838c5f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3e4af8008c5d494d3afe.md
@@ -0,0 +1,80 @@
+---
+id: 615f3e4af8008c5d494d3afe
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Create a `p` selector and remove all margins.
+
+# --hints--
+
+You should create a `p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p'));
+```
+
+Your `p` selector should have a `margin` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
new file mode 100644
index 0000000000..53f6d70c15
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f3ed16592445e57941aec.md
@@ -0,0 +1,96 @@
+---
+id: 615f3ed16592445e57941aec
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Lines can help separate and group important content, especially when space is limited.
+
+Create a `div` element below your `h1` element, and give it a `class` attribute set to `divider`.
+
+# --hints--
+
+You should create a new `div`.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('divider'));
+```
+
+Your `.divider` element should be within your `.label` element.
+
+```js
+assert(document.querySelector('.label')?.querySelector('.divider'));
+```
+
+Your `.divider` element should come after your `h1` element.
+
+```js
+assert(document.querySelector('.divider')?.previousElementSibling?.localName === 'h1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
new file mode 100644
index 0000000000..f8e43c0a29
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f405b89a7ec5f8e2d11f4.md
@@ -0,0 +1,91 @@
+---
+id: 615f405b89a7ec5f8e2d11f4
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Create a selector for your new `.divider` and set the `border-bottom` property to `1px solid #888989`. Also give it a top and bottom margin of `2px`. It should not have any left or right margin.
+
+# --hints--
+
+You should create a `.divider` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider'));
+```
+
+Your `.divider` selector should have a `border-bottom` property set to `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+Your `.divider` selector should have a `margin` property set to `2px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.margin === '2px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
new file mode 100644
index 0000000000..aa3594ecc5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f40b01f680e608d360ed4.md
@@ -0,0 +1,84 @@
+---
+id: 615f40b01f680e608d360ed4
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+The `letter-spacing` property can be used to adjust the space between each character of text in an element.
+
+Give your `h1` selector a `letter-spacing` property set to `0.15px` to space them out a bit more.
+
+# --hints--
+
+Your `h1` selector should have a `letter-spacing` property set to `0.15px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
new file mode 100644
index 0000000000..a1f84535ff
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4172e9eec061d6456221.md
@@ -0,0 +1,91 @@
+---
+id: 615f4172e9eec061d6456221
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Nutrition labels have a lot of bold text to draw attention to important information. Rather than targeting each element that needs to be bold, it is more efficient to use a class to apply the bold styling to every element.
+
+Give your second `p` element a `class` attribute set to `bold`.
+
+# --hints--
+
+Your second `p` element should have a `class` attribute set to `bold`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.classList?.contains('bold'));
+```
+
+Your first `p` element should not have a `class` attribute set to `bold`.
+
+```js
+assert(!document.querySelector('p')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
new file mode 100644
index 0000000000..bcbaaf757a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f41c979787462e76dab90.md
@@ -0,0 +1,104 @@
+---
+id: 615f41c979787462e76dab90
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Your new class does not have any styling yet. Create a `.bold` selector and give it a `font-weight` property set to `800` to make the text bold.
+
+Go ahead and remove the `font-weight` property from your `h1` selector as well.
+
+# --hints--
+
+You should have a `.bold` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold'));
+```
+
+Your `.bold` selector should have a `font-weight` property set to `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold')?.fontWeight === '800');
+```
+
+Your `h1` selector should not have a `font-weight` property.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === "");
+```
+
+You should not remove your `h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
new file mode 100644
index 0000000000..05d8bb7562
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f423cf65d5864132a0956.md
@@ -0,0 +1,86 @@
+---
+id: 615f423cf65d5864132a0956
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Give your `h1` element a `class` attribute set to `bold`. This will make the text bold again.
+
+# --hints--
+
+Your `h1` element should have a `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('h1')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1>Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
new file mode 100644
index 0000000000..64189f1570
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f42a021625f656101ef93.md
@@ -0,0 +1,100 @@
+---
+id: 615f42a021625f656101ef93
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Horizontal spacing between equally important elements can increase the readability of your text.
+
+Wrap the text `2/3 cup (55g)` in a `span` element.
+
+# --hints--
+
+You should create a new `span` element.
+
+```js
+assert(document.querySelector('span'));
+```
+
+Your `span` element should have the text `2/3 cup (55g)`.
+
+```js
+assert(document.querySelector('span')?.textContent?.trim() === '2/3 cup (55g)');
+```
+
+Your `p` element should still have the text `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size 2/3 cup (55g)</p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
new file mode 100644
index 0000000000..686336b2dc
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4bfb9de4a16703b56eb6.md
@@ -0,0 +1,92 @@
+---
+id: 615f4bfb9de4a16703b56eb6
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now we can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`.
+
+# --hints--
+
+Your `p` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.display === 'flex');
+```
+
+Your `p` selector should have a `justify-content` property set to `space-between`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.justifyContent === 'space-between');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+--fcc-editable-region--
+p {
+  margin: 0;
+}
+--fcc-editable-region--
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
new file mode 100644
index 0000000000..4c960b7219
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4ce9d877b668417c0c42.md
@@ -0,0 +1,104 @@
+---
+id: 615f4ce9d877b668417c0c42
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Wrap everything within the `.label` element in a new `header` element.
+
+# --hints--
+
+You should create a new `header` element.
+
+```js
+assert(document.querySelector('header'));
+```
+
+Your `header` element should be within your `.label` element.
+
+```js
+assert(document.querySelector('header')?.parentElement?.classList?.contains('label'));
+```
+
+Your `h1`, `div`, and `p` elements should be within your new `header` element.
+
+```js
+const children = document.querySelector('header')?.children;
+assert(children?.[0]?.localName === 'h1');
+assert(children?.[1]?.localName === 'div');
+assert(children?.[2]?.localName === 'p');
+assert(children?.[3]?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+--fcc-editable-region--
+  <div class="label">
+    <h1 class="bold">Nutrition Facts</h1>
+    <div class="divider"></div>
+    <p>8 servings per container</p>
+    <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+  </div>
+--fcc-editable-region--
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
new file mode 100644
index 0000000000..ea61500923
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4dde9d72e3694cb9ee3b.md
@@ -0,0 +1,105 @@
+---
+id: 615f4dde9d72e3694cb9ee3b
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Now update your `h1` selector to be `header h1` to specifically target your `h1` element within your new `header`.
+
+# --hints--
+
+You should have a `header h1` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('header h1'));
+```
+
+You should not have an `h1` selector.
+
+```js
+assert.isNull(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+You should not change any properties in the selector.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('header h1');
+assert(style?.textAlign === 'center');
+assert(style?.margin === '-4px 0px');
+assert(style?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
new file mode 100644
index 0000000000..6830eadac2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4ec58334106a4170c2a8.md
@@ -0,0 +1,105 @@
+---
+id: 615f4ec58334106a4170c2a8
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Create a new `div` element below your `header` element, and give it a `class` attribute set to `divider large`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 3);
+```
+
+Your new `div` element should come after your `header` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` element should have the `class` attribute set to `divider large`.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider'));
+assert(div?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
new file mode 100644
index 0000000000..4fd89a7f1f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f4f9e4a40566b776a8f38.md
@@ -0,0 +1,111 @@
+---
+id: 615f4f9e4a40566b776a8f38
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Create a new `.large` selector and give it a `height` property set to `10px`. Also create an `.large, .medium` selector and set the `background-color` property to `black`.
+
+# --hints--
+
+You should have a new `.large` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large'));
+```
+
+Your `.large` selector should have a `height` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large')?.height === '10px');
+```
+
+You should have a new `.large, .medium` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium'));
+```
+
+Your `.large, .medium` selector should have a `background-color` property set to `black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.backgroundColor === 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
new file mode 100644
index 0000000000..971d93624c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f50473cc0196c6dd3892a.md
@@ -0,0 +1,101 @@
+---
+id: 615f50473cc0196c6dd3892a
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+You may notice there is still a small border at the bottom of your `.large` element. To reset this, give your `.large, .medium` selector a `border` property set to `0`.
+
+Note: the `medium`(medium) class will be utilized later for the thinner bars of the nutrition label.
+
+# --hints--
+
+Your `.large, .medium` selector should have a `border` property set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.borderWidth === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+--fcc-editable-region--
+.large, .medium {
+  background-color: black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
new file mode 100644
index 0000000000..47197f64cc
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f51257a8a516d80b6c743.md
@@ -0,0 +1,113 @@
+---
+id: 615f51257a8a516d80b6c743
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Create a new `div` below your `.large` element and give it a `class` attribute set to `calories-info`.
+
+# --hints--
+
+You should create another `div` element.
+
+```js
+assert(document.querySelectorAll('div')?.length === 4);
+```
+
+Your new `div` should have a `class` attribute set to `calories-info`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info'));
+```
+
+Your new `div` should come after the `.large` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
new file mode 100644
index 0000000000..136c3e5dfc
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f51e4e5b24a6e80eccce1.md
@@ -0,0 +1,128 @@
+---
+id: 615f51e4e5b24a6e80eccce1
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Within your `.calories-info` element, create a `div` element. Give that `div` element a `class` attribute set to `left-container`. Within the newly created `div` element, create a `h2` element with the text `Amount per serving`. Give the `h2` element a `class` attribute set to `bold small-text`.
+
+# --hints--
+
+You should create a new `div` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'div');
+```
+
+Your new `div` element should have a `class` attribute set to `left-container`.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('left-container'));
+```
+
+You should create a new `h2` element within your `.left-container` element.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.localName === 'h2');
+```
+
+Your new `h2` element should have a `class` attribute set to `bold small-text`.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('bold'));
+assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('small-text'));
+```
+
+Your new `h2` element should have the text `Amount per serving`.
+
+```js
+assert(document.querySelector('.left-container')?.children?.[0]?.innerText === 'Amount per serving');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+    <div class="calories-info">
+
+    </div>
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
new file mode 100644
index 0000000000..c71a25214c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f522dea4f776f64dc3e91.md
@@ -0,0 +1,115 @@
+---
+id: 615f522dea4f776f64dc3e91
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `rem` unit stands for `root em`, and is relative to the font size of the `html` element.
+
+Create a `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`).
+
+# --hints--
+
+You should have an `.small-text` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.small-text'));
+```
+
+Your `.small-text` selector should have a `font-size` property set to `0.85rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.small-text')?.fontSize === '0.85rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
new file mode 100644
index 0000000000..deabca353f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f5486b8fd4b71633f69b0.md
@@ -0,0 +1,143 @@
+---
+id: 615f5486b8fd4b71633f69b0
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Below your `.small-text` element, create a new `p` element with the text `Calories`. Also below the `.left-container` element, create a new `span` element with the text `230`.
+
+# --hints--
+
+You should have a new `p` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.querySelector('p'))
+```
+
+You should have a new `span` element within your `.calories-info` element.
+
+```js
+assert(document.querySelector('.calories-info')?.querySelector('span'))
+```
+
+Your `p` element should come after your `.small-text` element.
+
+```js
+assert(document.querySelector('.small-text')?.nextElementSibling?.localName === 'p');
+```
+
+Your `span` element should come after your `.left-container` element.
+
+```js
+assert(document.querySelector('.left-container')?.nextElementSibling?.localName ==='span');
+```
+
+Your `p` element should have the text `Calories`.
+
+```js
+assert(document.querySelector('.small-text')?.nextElementSibling?.innerText === 'Calories');
+```
+
+Your `span` element should have the text `230`.
+
+```js
+assert(document.querySelector('.left-container')?.nextElementSibling?.innerText === '230');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+--fcc-editable-region--
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
new file mode 100644
index 0000000000..14f20ffb78
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f575b50b91e72af079480.md
@@ -0,0 +1,144 @@
+---
+id: 615f575b50b91e72af079480
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Create a new `.left-container p` selector setting the top and bottom margin to `-5px`, and the left and right margin to `-2px`. Also set the `font-size` to `2em` and `font-weight` to `700`.
+
+# --hints--
+
+You should have a new `.left-container p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p'));
+```
+
+Your new `.left-container p` selector should have a `margin` property set to `-5px -2px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginTop, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginBottom, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginLeft, '-2px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginRight, '-2px');
+```
+
+Your new `.left-container p` selector should have a `font-size` property set to `2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontSize === '2em');
+```
+
+Your new `.left-container p` selector should have a `font-weight` property set to `700`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontWeight === '700');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
new file mode 100644
index 0000000000..b833b5f471
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f5af373a68e744a3c5a76.md
@@ -0,0 +1,141 @@
+---
+id: 615f5af373a68e744a3c5a76
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Create a `.calories-info span` selector, set its `font-size` to `2.4em` and `font-weight` to `700`.
+
+# --hints--
+
+You should create a `.calories-info span` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span'));
+```
+
+Your `.calories-info span` selector should have a `font-size` property set to `2.4em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '2.4em');
+```
+
+Your `.calories-info span` selector should have a `font-weight` property set to `700`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontWeight === '700');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
new file mode 100644
index 0000000000..84d0ba9d98
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f5fd85d0062761f288364.md
@@ -0,0 +1,134 @@
+---
+id: 615f5fd85d0062761f288364
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Typography is often more art than science. You may have to tweak things like alignment until it looks correct.
+
+Give your `.calories-info span` selector a `margin` set to `-7px -2px`. This will shift your `230` text into place.
+
+# --hints--
+
+Your `.calories-info span` selector should have a `margin` set to `-7px -2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.margin === '-7px -2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+.calories-info span {
+  font-size: 2.4em;
+  font-weight: 700;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
new file mode 100644
index 0000000000..31f049fa2d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f61338c8ca176d6445574.md
@@ -0,0 +1,141 @@
+---
+id: 615f61338c8ca176d6445574
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider medium`.
+
+# --hints--
+
+You should create a new `div` within your `.label` element.
+
+```js
+assert(document.querySelectorAll('.label > div')?.length === 3)
+```
+
+Your new `div` should have the `class` attribute set to `divider medium`. This div should be the last element in your `.label` element.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider') && div?.classList?.contains('medium'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
new file mode 100644
index 0000000000..f074a2cf76
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f666ac5edea782feb7e75.md
@@ -0,0 +1,142 @@
+---
+id: 615f666ac5edea782feb7e75
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Create an `.medium` selector and give it a `height` property of `5px`.
+
+# --hints--
+
+You should create an `.medium` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.medium'));
+```
+
+Your `.medium` selector should have a `height` property set to `5px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.medium')?.height === '5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
new file mode 100644
index 0000000000..0c0aa78424
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f671b6d1919792745aa5d.md
@@ -0,0 +1,167 @@
+---
+id: 615f671b6d1919792745aa5d
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Create a new `div` element below your `.medium` element. Give it a `class` attribute set to `daily-value small-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `bold right`.
+
+# --hints--
+
+You should create a new `div` element after your `.medium` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('medium'));
+```
+
+Your new `div` should have a `class` attribute set to `daily-value small-text`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value'));
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('small-text'));
+```
+
+Your new `div` element should have a `p` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `% Daily Value *`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *');
+```
+
+Your new `p` element should have a `class` attribute set to `bold right`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    --fcc-editable-region--
+    <div class="divider medium"></div>
+
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
new file mode 100644
index 0000000000..3873e85fbf
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6823d0815b7a991f2a75.md
@@ -0,0 +1,157 @@
+---
+id: 615f6823d0815b7a991f2a75
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Use your existing `.divider` element as an example to add a new divider after the `p` element.
+
+# --hints--
+
+You should create a new `div` within your `.daily-value` element.
+
+```js
+assert(document.querySelectorAll('.daily-value.small-text > div')?.length === 1)
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text > div')?.classList?.contains('divider'))
+```
+
+Your new `div` should come after your `p` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text > div')?.previousElementSibling?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
new file mode 100644
index 0000000000..74ebd1c18c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6b2d164f81809efd9bdc.md
@@ -0,0 +1,182 @@
+---
+id: 615f6b2d164f81809efd9bdc
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Then, wrap the text `Total Fat` in one `span` element, the text `10%` in another, and give them each a class of `bold`.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Total Fat 8g 10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g[\s|\n]+10%/));
+```
+
+Your `p` element should have two `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
+```
+
+One `span` element should wrap the text `Total Fat`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat');
+```
+
+The `span` element around `Total Fat` should have the `class` set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.className === 'bold');
+```
+
+A `span` element should wrap the text `10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span + span')?.innerText === '10%');
+```
+
+The `span` element around `10%` should have the `class` set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
new file mode 100644
index 0000000000..de2aab3150
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6cc778f7698258467596.md
@@ -0,0 +1,172 @@
+---
+id: 615f6cc778f7698258467596
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Below your element with the `Total Fat` text, create a new `p` element with the text `Saturated Fat 1g 5%`. Wrap the `5%` in a `span` with the `class` attribute set to `bold`. In this case this is enough to align the percentage to `5%`.
+
+# --hints--
+
+You should create a new `p` element below your element with the `Total Fat` text.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/));
+```
+
+Your new `p` element should have the text `Saturated Fat 1g 5%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.localName === 'span');
+```
+
+Your `span` element should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+Your `span` element should wrap the `5%` text.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === "5%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
new file mode 100644
index 0000000000..5f2aad0b62
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f6fddaac1e083502d3e6a.md
@@ -0,0 +1,148 @@
+---
+id: 615f6fddaac1e083502d3e6a
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+This new `p` element will need to be indented. Give it a `class` set to `indent`.
+
+# --hints--
+
+Your `p` element with the text `Saturated Fat 1g 5%` should have a `class` attribute set to `indent`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p>Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
new file mode 100644
index 0000000000..2e1a5c3f79
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f70077a4ff98424236c1e.md
@@ -0,0 +1,163 @@
+---
+id: 615f70077a4ff98424236c1e
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create a new `.indent` selector and give it a `margin-left` property set to `1em`.
+
+# --hints--
+
+You should have a new `.indent` selector.
+
+```js
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.indent'));
+```
+
+Your `.indent` selector should have a `margin-left` property set to `1em`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft, '1em');
+```
+
+Your `.indent` selector should only set the `margin-left` property, not other margin properties.
+
+```js
+const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.indent') ?? {};
+assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
new file mode 100644
index 0000000000..1d696789f3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f72a872354a850d4f533e.md
@@ -0,0 +1,160 @@
+---
+id: 615f72a872354a850d4f533e
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Create a `.daily-value p` selector to target all of your `p` elements in the `daily-value` section. Give this new selector a `border-bottom` set to `1px solid #888989`.
+
+# --hints--
+
+You should have a new `.daily-value p` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+Your `.daily-value p` selector should have a `border-bottom` property set to `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
new file mode 100644
index 0000000000..96cbc9639f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f74a71f1e498619e38ee8.md
@@ -0,0 +1,166 @@
+---
+id: 615f74a71f1e498619e38ee8
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+The bottom borders under your `% Daily Value *` and `Saturated Fat 1g 5%` elements do not extend the full width of the label. Add `no-divider` to the `class` for these two elements.
+
+# --hints--
+
+Your `p` element with the text `% Daily Value *` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.firstElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('bold'));
+```
+
+Your `p` element with the text `Saturated Fat 1g 5%` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
new file mode 100644
index 0000000000..d3d0a81e57
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7ad94380408d971d14f6.md
@@ -0,0 +1,181 @@
+---
+id: 615f7ad94380408d971d14f6
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+The `:not` pseudo-selector can be used to select all elements that do not match the given CSS rule.
+
+```css
+div:not(#example) {
+  color: red;
+}
+```
+
+The above selects all `div` elements without an `id` of `example`.
+
+Modify your `.daily-value p` selector to exclude the `.no-divider` elements.
+
+# --hints--
+
+You should have a `.daily-value p:not(.no-divider)` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)'));
+```
+
+You should not have a `.daily-value p` selector.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+You should not change the properties in the `.daily-value p:not(.no-divider)` selector.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)');
+assert(style?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
new file mode 100644
index 0000000000..aac27eb5b6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7bc680f7168ea01ebf99.md
@@ -0,0 +1,165 @@
+---
+id: 615f7bc680f7168ea01ebf99
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Now you will have to add separate dividers below your `.no-divider` elements.
+
+Your first `.no-divider` element has a `.divider` after it. Create another `.divider` after your second `.no-divider` element.
+
+# --hints--
+
+You should create a new `div` at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
new file mode 100644
index 0000000000..6504be1b04
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7c71eab8218f846e4503.md
@@ -0,0 +1,196 @@
+---
+id: 615f7c71eab8218f846e4503
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+After your last `.divider`, create another `p` element with the text `Trans Fat 0g`. Italicize the word `Trans` by wrapping it in an `i` element. Give the new `p` element the `class` attribute set to `indent no-divider`. Wrap `Trans Fat 0g` in a `span` element for alignment.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Trans Fat 0g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText === 'Trans Fat 0g');
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+const p = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(p?.classList?.contains('indent'));
+assert(p?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have an `i` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i'));
+```
+
+Your `i` element should wrap the text `Trans`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i')?.innerText === 'Trans');
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span'));
+```
+
+Your `span` element should wrap the text `Trans Fat 0g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText?.match(/Trans[\s|\n]+Fat 0g/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
new file mode 100644
index 0000000000..b038b1dfc2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7d489a581590d1350288.md
@@ -0,0 +1,165 @@
+---
+id: 615f7d489a581590d1350288
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Create another `.divider` after your last `p` element.
+
+# --hints--
+
+You should create a new `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `div` element should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
new file mode 100644
index 0000000000..ce39f09eae
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7de4487b64919bb4aa5e.md
@@ -0,0 +1,215 @@
+---
+id: 615f7de4487b64919bb4aa5e
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Then, wrap the text `Cholesterol` in a `span` element, `0%` in another, and give each of them a class of `bold`.
+
+Finally, nest the `span` element containing the text `Cholesterol` along with the text `0mg`, in an additional `span` element for alignment.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Cholesterol 0mg 0%`.
+
+```js
+const text = document.querySelector('.daily-value.small-text')?.lastElementChild?.textContent?.trim()?.replace(/\n/g, ' ')?.replace(/\s\s+/g, ' ');
+assert(text === 'Cholesterol 0mg 0%');
+```
+
+Your new `p` element should have exactly three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+The text `Cholesterol` should be nested in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
+assert(cholesterolSpan.length === 1);
+```
+
+Your `Cholesterol` `span` should have the `class` attribute set to `bold`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cholesterol[\s\n]*$/));
+assert(cholesterolSpan[0]?.classList?.contains('bold'));
+```
+
+The text `0%` should be nested in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
+assert(zeroPercentSpan.length === 1);
+```
+
+Your `0%` `span` should have the `class` attribute set to `bold`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const zeroPercentSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*0%[\s\n]*$/));
+assert(zeroPercentSpan[0]?.classList?.contains('bold'));
+```
+
+Your `Cholesterol` `span` and your `0mg` text should be wrapped in a `span`.
+
+```js
+const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
+const cholesterolZeroSpan = spans.filter(span => span?.innerText === 'Cholesterol 0mg');
+assert(cholesterolZeroSpan.length === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
new file mode 100644
index 0000000000..f165c8568f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7e7281626a92bbd62da8.md
@@ -0,0 +1,205 @@
+---
+id: 615f7e7281626a92bbd62da8
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Put `Sodium` and `7%` each in their own `span` with a class of a `bold` like you did with the others.
+
+Then, add an additional `span` element around `Sodium 160mg` for alignment again.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Sodium 160mg 7%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Sodium[\s|\n]160mg[\s|\n]+7%/));
+```
+
+Your new `p` element should have three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+A `span` element should wrap the text `Sodium 160mg`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/));
+```
+
+A `span` element should wrap the text `Sodium`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === "Sodium");
+```
+
+The `span` around `Sodium` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+A `span` element should wrap the text `7%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '7%');
+```
+
+The `span` element around `7%` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
new file mode 100644
index 0000000000..58d410f432
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7ecb09de9a938ef94756.md
@@ -0,0 +1,210 @@
+---
+id: 615f7ecb09de9a938ef94756
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Below your last `p` element, add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Then, wrap the nutrient and amount in a `span` for alignment again.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Total Carbohydrate 37g 13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g[\s|\n]+13%/));
+```
+
+Your new `p` element should have three `span` elements.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
+```
+
+One `span` element should wrap the text `Total Carbohydrate 37g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g/));
+```
+
+One `span` element should wrap the text `Total Carbohydrate`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Total Carbohydrate');
+```
+
+The `span` element around `Total Carbohydrate` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+A `span` element should wrap the text `13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
+```
+
+The `span` element around `13%` should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+```
+
+Your second `span` element should wrap the text `13%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
new file mode 100644
index 0000000000..15003310e7
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f7fa959ab75948f96a0d6.md
@@ -0,0 +1,183 @@
+---
+id: 615f7fa959ab75948f96a0d6
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Below your last `p` element, add another `p` element with the text `Dietary Fiber 4g`. Give the `p` element the `class` necessary to indent it and remove the dividing border. Then create a divider below that `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Dietary Fiber 4g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/));
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
new file mode 100644
index 0000000000..b47f77498e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f808d85793195b0f53be9.md
@@ -0,0 +1,185 @@
+---
+id: 615f808d85793195b0f53be9
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Create another `p` element after your last `.divider`, and give it the text `Total Sugars 12g`. Assign that `p` element the `class` values necessary to indent it and remove the bottom border. Then create another `.divider` below your new `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Total Sugars 12g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/));
+```
+
+Your new `p` element should have the `class` attribute set to `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+    </div>    
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
new file mode 100644
index 0000000000..d7b411b930
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f829d07b18f96f6f6684b.md
@@ -0,0 +1,169 @@
+---
+id: 615f829d07b18f96f6f6684b
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+The advantage to creating these dividers is that you can apply specific classes to style them individually. Add `double-indent` to the `class` for your last `.divider`.
+
+# --hints--
+
+Your last `.divider` element should have `double-indent` added to the `class`. Do not remove the existing value.
+
+```js
+const last = document.querySelector('.daily-value.small-text')?.lastElementChild;
+assert(last?.classList?.contains('double-indent'));
+assert(last?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      --fcc-editable-region-- 
+      <div class="divider"></div>
+      --fcc-editable-region-- 
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
new file mode 100644
index 0000000000..1c85a5b53a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f83ef928ec9982b785b6a.md
@@ -0,0 +1,182 @@
+---
+id: 615f83ef928ec9982b785b6a
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Create a `.double-indent` selector and give it a left margin of `2em`.
+
+# --hints--
+
+You should have a new `.double-indent` selector.
+
+```js
+assert.isNotNull(new __helpers.CSSHelp(document).getStyle('.double-indent'));
+```
+
+Your `.double-indent` selector should have a `margin-left` property set to `2em`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.double-indent')?.marginLeft, '2em');
+```
+
+Your `.double-indent` selector should only set the `margin-left` property, not other margin properties.
+
+```js
+const { marginTop, marginRight, marginBottom } = new __helpers.CSSHelp(document).getStyle('.double-indent') ?? {};
+assert.isTrue([marginTop, marginRight, marginBottom].every(prop => prop === ''));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+    </div>    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region-- 
+
+--fcc-editable-region-- 
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
new file mode 100644
index 0000000000..a39f4b879c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f84f246e8ba98e3cd97be.md
@@ -0,0 +1,211 @@
+---
+id: 615f84f246e8ba98e3cd97be
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+Below your `.double-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. Your new `p` element should also be double indented, and have no bottom border. Use a `span` to make the `20%` bold and right aligned.
+
+Then create another divider after that `p` element.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Includes 10g Added Sugars 20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/));
+```
+
+Your new `p` element should have the `class` attribute set to `double-indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('double-indent'));
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.localName === 'span');
+```
+
+Your `span` element should have the `class` attribute set to `bold`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.classList?.contains('bold'));
+```
+
+Your `span` element should wrap the text `20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type span')?.innerText === '20%');
+```
+
+Your new `div` should have the `class` attribute set to `divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
new file mode 100644
index 0000000000..d4af4e85bd
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f887466db4ba14b5342cc.md
@@ -0,0 +1,208 @@
+---
+id: 615f887466db4ba14b5342cc
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+After your last divider, create another `p` element with the text `Protein 3g`. Use the necessary classes to remove the bottom border, and a `span` to make the `Protein` bold. Then wrap the text `Protein 3g` including the new `span` element, in a new `span` element.
+
+Following this element, create a large divider.
+
+# --hints--
+
+You should create a new `p` and `div` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
+```
+
+Your new `p` element should have the text `Protein 3g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/));
+```
+
+Your new `p` element should have the `class` attribute set to `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+You should have a `span` element with the class `bold` around the text `Protein`.
+
+```js
+assert(document.querySelector('.daily-value.small-text p:last-of-type span.bold')?.innerText === 'Protein');
+```
+
+You should have a `span` element around the text `Protein 3g`.
+
+```js
+assert(document.querySelector('.daily-value.small-text > p:last-of-type > span > span.bold')?.innerText === 'Protein');
+assert(document.querySelector('.daily-value.small-text > p:last-of-type > span')?.innerText === 'Protein 3g');
+```
+
+Your new `div` should have the `class` attribute set to `divider large`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('large'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
new file mode 100644
index 0000000000..0477e6cf30
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f89e055040ba294719d2f.md
@@ -0,0 +1,195 @@
+---
+id: 615f89e055040ba294719d2f
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`.
+
+The `p` element contains only text, you can wrap the percentage in a `span` element so that it is considered a separate entity from the rest of the text, and it's moved to the right.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the text `Vitamin D 2mcg 10%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+Your `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+    </div>
+    --fcc-editable-region--    
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
new file mode 100644
index 0000000000..1f4bf4fb22
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f8bfe0f30a1a3c340356b.md
@@ -0,0 +1,219 @@
+---
+id: 615f8bfe0f30a1a3c340356b
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+Create another `p` element, give it the text `Calcium 260mg 20%`. Align `20%` to the right. Below that, create a `p` element with the text `Iron 8mg 45%`, aligning the `45%` to the right.
+
+# --hints--
+
+You should create two new `p` elements at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+```
+
+Your first new `p` element should have the text `Calcium 260mg 20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/));
+```
+
+Your first new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span');
+```
+
+Your first `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold'));
+```
+
+Your first `span` element should wrap the text `20%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%');
+```
+
+Your second new `p` element should have the text `Iron 8mg 45%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/));
+```
+
+Your second new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.localName === 'span');
+```
+
+Your second `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+    </div>
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
new file mode 100644
index 0000000000..9734aee18e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f8f1223601fa546e93f31.md
@@ -0,0 +1,202 @@
+---
+id: 615f8f1223601fa546e93f31
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Create the final `p` element for your `.daily-value` section. Give it the text `Potassium 235mg 6%`. Align the `6%` text to the right, and remove the bottom border of the `p` element.
+
+# --hints--
+
+You should create a new `p` element at the end of your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the `class` attribute set to `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('no-divider'));
+```
+
+Your new `p` element should have the text `Potassium 235mg 6%`.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/));
+```
+
+Your new `p` element should have a `span` element.
+
+```js
+assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+Your `span` element should not be bold.
+
+```js
+assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    --fcc-editable-region--
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+    </div>
+    --fcc-editable-region--      
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
new file mode 100644
index 0000000000..c098518ca5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f905fbd1017a65ca224eb.md
@@ -0,0 +1,211 @@
+---
+id: 615f905fbd1017a65ca224eb
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Add a medium divider after your `.daily-value` element. Below that new divider, create a `p` element with the `class` attribute set to `note`.
+
+Give the `p` element the following text:
+
+```markup
+* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
+```
+
+# --hints--
+
+You should create a new `div` after your `.daily-value` element.
+
+```js
+assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div');
+```
+
+Your new `div` should have the `class` set to `divider medium`.
+
+```js
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('medium'));
+```
+
+You should create a `p` element after your new `div` element.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'p');
+```
+
+Your new `p` element should have the `class` set to `note`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note'));
+```
+
+Your new `p` element should have the provided text.
+
+```js
+assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    --fcc-editable-region--      
+
+    --fcc-editable-region--
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
new file mode 100644
index 0000000000..0dd1ac2ee2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f94786869e1a7fec54375.md
@@ -0,0 +1,196 @@
+---
+id: 615f94786869e1a7fec54375
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Create a `.note` selector, and set the size of the font to `0.6rem`. Also set the top and bottom margins to `5px`, removing the left and right margins.
+
+# --hints--
+
+You should have a new `.note` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note'));
+```
+
+Your `.note` selector should have a `font-size` property set to `0.6rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem');
+```
+
+Your `.note` selector should have a `margin` property set to `5px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
new file mode 100644
index 0000000000..845b9f2d7f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/615f951dff9317a900ef683f.md
@@ -0,0 +1,365 @@
+---
+id: 615f951dff9317a900ef683f
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Give the `.note` selector a left and right padding of `8px`, removing the top and bottom padding. Also set the `text-indent` property to `-8px`.
+
+With these last changes, your nutrition label is complete!
+
+# --hints--
+
+Your `.note` selector should have a `padding` property set to `0 8px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px');
+```
+
+Your `.note` selector should have a `text-indent` property set to `-8px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right no-divider">% Daily Value *</p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
+      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
+      <div class="divider"></div>
+      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
+      <div class="divider"></div>
+      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
+      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
+      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
+      <p class="indent no-divider">Dietary Fiber 4g</p>
+      <div class="divider"></div>
+      <p class="indent no-divider">Total Sugars 12g</p>
+      <div class="divider double-indent"></div>
+      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
+      <div class="divider"></div>
+      <p class="no-divider"><span><span class="bold">Protein</span> 3g</span></p>
+      <div class="divider large"></div>
+      <p>Vitamin D 2mcg <span>10%</span></p>
+      <p>Calcium 260mg <span>20%</span></p>
+      <p>Iron 8mg <span>45%</span></p>
+      <p class="no-divider">Potassium 235mg <span>6%</span></p>
+    </div>
+    <div class="divider medium"></div>
+    <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
+      diet. 2,000 calories a day is used for general nutrition advice.</p>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.double-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+  padding: 0 8px;
+  text-indent: -8px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
new file mode 100644
index 0000000000..93d1888599
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/635bde33c91c80540eae239b.md
@@ -0,0 +1,153 @@
+---
+id: 635bde33c91c80540eae239b
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+The text `% Daily Value *` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it.
+
+# --hints--
+
+You should have a `.right` selector.
+
+```js
+const hasRight = new __helpers.CSSHelp(document).getStyle('.right');
+assert(hasRight);
+
+```
+
+The `.right` selector should have the `justify-content` property set to `flex-end`.
+
+```js
+const rightJustifyContent = new __helpers.CSSHelp(document).getStyle('.right')?.getPropertyValue('justify-content');
+assert(rightJustifyContent === 'flex-end');
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
new file mode 100644
index 0000000000..e6f009b7e0
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/6395d33ab5d91bf317107c48.md
@@ -0,0 +1,117 @@
+---
+id: 6395d33ab5d91bf317107c48
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Create a `.calories-info h2` selector and remove all margins.
+
+# --hints--
+
+Create a `.calories-info h2` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2'));
+```
+
+Your `.calories-info h2` selector should have a `margin` set to `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
new file mode 100644
index 0000000000..6a2dbb37aa
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/6396e33fe478dd264ebbf278.md
@@ -0,0 +1,135 @@
+---
+id: 6396e33fe478dd264ebbf278
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Create a new `.calories-info` selector and give it a `display` property set to `flex`. Also give it a `justify-content` property set to `space-between` and `align-items` property set to `flex-end`.
+
+# --hints--
+
+You should create a `.calories-info` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info'));
+```
+
+Your `.calories-info` selector should have a `display` property set to `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.display === 'flex');
+```
+
+Your `.calories-info` selector should have a `justify-content` property set to `space-between`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.justifyContent === 'space-between');
+```
+
+Your `.calories-info` selector should have a `align-items` property set to `flex-end`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.alignItems === 'flex-end');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.calories-info h2 {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
new file mode 100644
index 0000000000..170468d17b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-nutritional-label/667d1bb875f5961913176069.md
@@ -0,0 +1,147 @@
+---
+id: 667d1bb875f5961913176069
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Notice how the text `8g` appears centered in the preview. Nest the `span` element containing the text `Total Fat` along with the text `8g`, in an additional `span` element for alignment.
+
+# --hints--
+
+You should have a `span` element around the code `<span class="bold">Total Fat</span> 8g`.
+
+```js
+assert.match(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerHTML, /^<span class=("|')bold\1>Total Fat<\/span> 8g\s?$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Nutrition Label</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+  <link href="./styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="label">
+    <header>
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
+    </header>
+    <div class="divider large"></div>
+    <div class="calories-info">
+      <div class="left-container">
+        <h2 class="bold small-text">Amount per serving</h2>
+        <p>Calories</p>
+      </div>
+      <span>230</span>
+    </div>
+    <div class="divider medium"></div>
+    <div class="daily-value small-text">
+      <p class="bold right">% Daily Value *</p>
+      <div class="divider"></div>
+--fcc-editable-region--
+      <p><span class="bold">Total Fat</span> 8g <span class="bold">10%</span></p>
+--fcc-editable-region--
+    </div>
+  </div>
+</body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.large {
+  height: 10px;
+}
+
+.large, .medium {
+  background-color: black;
+  border: 0;
+}
+
+.medium {
+  height: 5px;
+}
+
+.small-text {
+  font-size: 0.85rem;
+}
+
+.calories-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.calories-info h2 {
+  margin: 0;
+}
+
+.left-container p {
+  margin: -5px -2px;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+.calories-info span {
+  margin: -7px -2px;
+  font-size: 2.4em;
+  font-weight: 700;
+}
+
+.right {
+  justify-content: flex-end;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
new file mode 100644
index 0000000000..3a5d413485
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e78af05201622d4bab8aa.md
@@ -0,0 +1,58 @@
+---
+id: 612e78af05201622d4bab8aa
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Create a `div` element within your `body` element with the `id` set to `piano`.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+const div = document.querySelector('div');
+assert.exists(div);
+```
+
+Your `div` should be within your `body` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.parentElement?.localName === 'body');
+```
+
+Your `div` should have the `id` set to `piano`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.getAttribute('id') === 'piano');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
new file mode 100644
index 0000000000..e5c80cf6b4
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e7d1c29fb872d6384379c.md
@@ -0,0 +1,60 @@
+---
+id: 612e7d1c29fb872d6384379c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Nest a second `div` within your existing `div`, and set the `class` to be `keys`.
+
+# --hints--
+
+You should create a second `div` element.
+
+```js
+const divDiv = document.querySelectorAll('div');
+assert(divDiv?.length === 2);
+```
+
+Your new `div` element should be within your existing `div` element.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.length === 1);
+assert(div?.children?.[0]?.localName === 'div');
+```
+
+Your new `div` element should have the `class` set to `keys`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.[0]?.className === 'keys');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="piano">
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
new file mode 100644
index 0000000000..bfbbe7748d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e804c54d5e7308d7ebe56.md
@@ -0,0 +1,60 @@
+---
+id: 612e804c54d5e7308d7ebe56
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Within your `.keys` element, add seven `div` elements, each with the class `key`.
+
+# --hints--
+
+You should create seven new `div` elements.
+
+```js
+const divDivDiv = document.querySelectorAll('div');
+assert(divDivDiv?.length === 9);
+```
+
+Your seven new `div` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].length === 7);
+assert([...keys?.children].every(child => child?.tagName === 'DIV'));
+```
+
+Your seven new `div` elements should all have the `class` set to `key`.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].every(child => child?.classList?.contains('key')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys"></div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
new file mode 100644
index 0000000000..93e60db476
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e813b3ba67633222cbe54.md
@@ -0,0 +1,95 @@
+---
+id: 612e813b3ba67633222cbe54
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Remember, a `class` attribute can hold multiple values. To differentiate between your white and black keys, add a second `class` value of `black--key` to your second, third, fifth, sixth, and seventh `.key` elements.
+
+# --hints--
+
+Your second `.key` element should also have a `class` of `black--key`.
+
+```js
+const key = document.querySelectorAll('.key')?.[1];
+assert(key?.className?.includes('black--key'));
+```
+
+Your third `.key` should have `black--key` in the `class`.
+
+```js
+const third = document.querySelectorAll('.key')?.[2];
+assert(third?.classList?.contains('black--key'));
+```
+
+Your fifth `.key` should have `black--key` in the `class`.
+
+```js
+const fifth = document.querySelectorAll('.key')?.[4];
+assert(fifth?.classList?.contains('black--key'));
+```
+
+Your sixth `.key` should have `black--key` in the `class`.
+
+```js
+const sixth = document.querySelectorAll('.key')?.[5];
+assert(sixth?.classList?.contains('black--key'));
+```
+
+Your seventh `.key` should have `black--key` in the `class`.
+
+```js
+const seventh = document.querySelectorAll('.key')?.[6];
+assert(seventh?.classList?.contains('black--key'));
+```
+
+You should have five `.black--key` elements.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 5);
+```
+
+You should have seven `.key` elements.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 7);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
new file mode 100644
index 0000000000..d42477e30c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e8279827a28352ce83a72.md
@@ -0,0 +1,74 @@
+---
+id: 612e8279827a28352ce83a72
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Now, copy the set of seven `.key` elements and paste two additional sets into the `.keys` div.
+
+# --hints--
+
+You should have 21 `.key` elements.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 21);
+```
+
+You should have 15 `.black--key` elements.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 15);
+```
+
+All `.key` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.key')?.length === 21);
+```
+
+All `.black--key` elements should be within your `.keys` element.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.black--key')?.length === 15);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
new file mode 100644
index 0000000000..1f4190864e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e83ec2eca1e370f830511.md
@@ -0,0 +1,107 @@
+---
+id: 612e83ec2eca1e370f830511
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Add a `link` element inside your `head` element. Set its `rel` attribute to `stylesheet` and its `href` attribute to `styles.css`.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert.isNotNull(document.querySelector('link'));
+```
+
+You should not change your existing `head` tags. Make sure you did not delete the closing tag.
+
+```js
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
+```
+
+You should have one `link` element.
+
+```js
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
+```
+
+Your `link` element should be inside your `head` element.
+
+```js
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    --fcc-editable-region--
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    --fcc-editable-region--
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e89562043183c86df287c.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
new file mode 100644
index 0000000000..a5dad2247f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e89562043183c86df287c.md
@@ -0,0 +1,77 @@
+---
+id: 612e89562043183c86df287c
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Browsers often apply default margin and padding values to specific elements. To make sure your piano layout displays correctly, you need to reset the box model.
+
+Add an `html` rule selector to your CSS file, and set the `box-sizing` property to `border-box`.
+
+# --hints--
+
+You should have an `html` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+Your `html` selector should have the `box-sizing` property set to `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
new file mode 100644
index 0000000000..cd1ca1882c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e89d254fe5d3df7d6693d.md
@@ -0,0 +1,83 @@
+---
+id: 612e89d254fe5d3df7d6693d
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now that you've reset the `html` box model, you need to apply this to the elements inside it as well. To do this, set the `box-sizing` property to `inherit`, which ensures that the targeted elements adopt the same value as their parent element.
+
+You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the `::before` and `::after` pseudo-elements.
+
+The `::before` selector creates a pseudo-element which is the first child of the selected element, while the `::after` selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project.
+
+For now, create a CSS selector to target all elements using `*`, and include the pseudo-elements `::before` and `::after`. Set the `box-sizing` property to `inherit`.
+
+# --hints--
+
+You should have a `*, ::before, ::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
+```
+
+Your `*, ::before, ::after` selector should have the `box-sizing` property set to `inherit`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+html {
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
new file mode 100644
index 0000000000..46f69e2b59
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e8eebe3a6dc3fcc33a66f.md
@@ -0,0 +1,95 @@
+---
+id: 612e8eebe3a6dc3fcc33a66f
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Now target your `#piano` element with an `id` selector. Set its `background-color` property to `#00471b`, the `width` property to `992px` and the `height` property to `290px`.
+
+# --hints--
+
+You should have a `#piano` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano'));
+```
+
+Your `#piano` selector should have the `background-color` property set to `#00471b`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)');
+```
+
+Your `#piano` selector should have a `width` property set to `992px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px');
+```
+
+Your `#piano` selector should have the `height` set to `290px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
new file mode 100644
index 0000000000..85c97c2924
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e95ef2e4bdf41f69067f9.md
@@ -0,0 +1,81 @@
+---
+id: 612e95ef2e4bdf41f69067f9
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Set the `margin` of the `#piano` to `80px auto`.
+
+# --hints--
+
+Your `#piano` selector should have the `margin` property set to `80px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
new file mode 100644
index 0000000000..26f7c9217a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e96fc87fe8e44f69f7ec5.md
@@ -0,0 +1,102 @@
+---
+id: 612e96fc87fe8e44f69f7ec5
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Time to style the keys. Below the `#piano` rule, target the `.keys` element with a `class` selector. Give the new rule a `background-color` property of `#040404`, a `width` property of `949px` and a `height` property of `180px`.
+
+# --hints--
+
+You should have a `.keys` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys'));
+```
+
+Your `.keys` selector should have a `background-color` property set to `#040404`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
+```
+
+Your `.keys` selector should have the `width` property set to `949px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
+```
+
+Your `.keys` selector should have a `height` property set to `180px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
new file mode 100644
index 0000000000..d877f447ad
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e98f3245c98475e49cfc6.md
@@ -0,0 +1,88 @@
+---
+id: 612e98f3245c98475e49cfc6
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Give the `.keys` a `padding-left` of `2px`.
+
+# --hints--
+
+Your `.keys` selector should have a `padding-left` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
new file mode 100644
index 0000000000..01ea9f27a9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e9a21381a1949327512e6.md
@@ -0,0 +1,89 @@
+---
+id: 612e9a21381a1949327512e6
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Move the keys into position by adjusting the `#piano` selector. Set the `padding` property to `90px 20px 0 20px`.
+
+# --hints--
+
+Your `#piano` selector should have the `padding` property set to `90px 20px 0 20px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
new file mode 100644
index 0000000000..0f8ca9d6ba
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e9d142affc44a453655db.md
@@ -0,0 +1,117 @@
+---
+id: 612e9d142affc44a453655db
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Time to style the keys themselves. Create a `class` selector for the `.key` elements. Set the `background-color` set to the value `#ffffff`, the `position` property to `relative`, the `width` property to `41px`, and the `height` property to `175px`.
+
+# --hints--
+
+You should have a `.key` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key'));
+```
+
+Your `.key` selector should have a `background-color` property set to `#ffffff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)');
+```
+
+Your `.key` selector should have the `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative');
+```
+
+Your `.key` selector should have a `width` property set to `41px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px');
+```
+
+Your `.key` selector should have a `height` property set to `175px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
new file mode 100644
index 0000000000..28c5419dac
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612e9f1e7e5ccd4fa9ada0be.md
@@ -0,0 +1,103 @@
+---
+id: 612e9f1e7e5ccd4fa9ada0be
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Give the `.key` a `margin` of `2px` and a `float` property set to `left`.
+
+# --hints--
+
+Your `.key` selector should have a `margin` property set to `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
+```
+
+Your `.key` selector should have a `float` property set to `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
new file mode 100644
index 0000000000..f0e8088dd8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ea4c4993aba52ab4aa32e.md
@@ -0,0 +1,119 @@
+---
+id: 612ea4c4993aba52ab4aa32e
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now it's time to use the pseudo-selectors you set up earlier. To create the black keys, add a new `.key.black--key::after` selector. This targets elements with both `key` and `black--key` classes and selects the pseudo-element created after these elements in the HTML.
+
+In the new selector, set the `background-color` to `#1d1e22`. Also set the `content` property to `""`. This will make the pseudo-elements empty.
+
+The `content` property is used to set or override the content of an element. By default, the pseudo-elements created by the `::before` and `::after` selectors are empty, which means they are not rendered on the page. By setting the `content` property to an empty string `""`, you ensure that the pseudo-elements are rendered, while still appearing empty.
+
+If you would like to experiment, try removing the `background-color` property and setting different values for the `content` property, such as `"♥"`. Remember to undo these changes when you are done so the tests pass.
+
+# --hints--
+
+You should have a `.key.black--key::after` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
+```
+
+Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
+```
+
+Your `.key.black--key::after` selector should have a `content` property set to `""`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
new file mode 100644
index 0000000000..a7340d458d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ea97df5742154772f312e.md
@@ -0,0 +1,110 @@
+---
+id: 612ea97df5742154772f312e
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Give the `.key.black--key::after` a `position` property set to `absolute` and a `left` property set to `-18px`.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute');
+```
+
+Your `.key.black--key::after` selector should have a `left` property set to `-18px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
new file mode 100644
index 0000000000..72dbf9cc19
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ead8788d28655ef8db056.md
@@ -0,0 +1,112 @@
+---
+id: 612ead8788d28655ef8db056
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+For the `.key.black--key::after`, set the `width` to `32px` and the `height` to `100px`.
+
+# --hints--
+
+Your `.key.black--key::after` should have a `width` property set to `32px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px');
+```
+
+Your `.key.black--key::after` should have a `height` property set to `100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
new file mode 100644
index 0000000000..37d6779238
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eaf56b7ba3257fdbfb0db.md
@@ -0,0 +1,144 @@
+---
+id: 612eaf56b7ba3257fdbfb0db
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The piano needs the freeCodeCamp logo to make it official.
+
+Add an `img` element before your `.keys` element. Give the `img` a `class` of `logo`, and set the `src` to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Give it an `alt` text of `freeCodeCamp Logo`.
+
+# --hints--
+
+You should add a new `img` element.
+
+```js
+assert(document.querySelectorAll('img')?.length === 1);
+```
+
+Your `img` element should come before your first `.keys` element.
+
+```js
+const img = document.querySelector('img');
+assert(img?.nextElementSibling?.className === 'keys');
+assert(img?.previousElementSibling === null);
+```
+
+Your `img` element should have a `class` set to `logo`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.className === 'logo');
+```
+
+Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
+```
+
+Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo');
+```
+
+Remember that casing and spelling matter.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+    --fcc-editable-region--
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
new file mode 100644
index 0000000000..2e461ef48a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb4893b63c75bb9251ddf.md
@@ -0,0 +1,129 @@
+---
+id: 612eb4893b63c75bb9251ddf
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Start styling the logo by creating a `.logo` selector. Set the `width` to `200px`, a `position` of `absolute` and a `top` set to `23px`.
+
+# --hints--
+
+You should have a `.logo` selector.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo'));
+```
+
+Your `.logo` selector should have a `width` property set to `200px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px');
+```
+
+Your `.logo` selector should have a `position` property set to `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute');
+```
+
+Your `.logo` selector should have a `top` property set to `23px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
new file mode 100644
index 0000000000..dc900814fd
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb75153591b5e3b1ab65e.md
@@ -0,0 +1,115 @@
+---
+id: 612eb75153591b5e3b1ab65e
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+The `img` element needs its parent to have a `position` set as a point of reference. Set the `position` of the `#piano` selector to `relative`.
+
+# --hints--
+
+Your `#piano` selector should have a `position` property set to `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
new file mode 100644
index 0000000000..62dbbd5686
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb7ca8c275d5f89c73333.md
@@ -0,0 +1,116 @@
+---
+id: 612eb7ca8c275d5f89c73333
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+To soften the sharp edges of the piano and its keys, start by giving the `#piano` a `border-radius` of `10px`.
+
+# --hints--
+
+Your `#piano` selector should have a `border-radius` property set to `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
new file mode 100644
index 0000000000..777b6e023b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb8e984cd73677a92b7e9.md
@@ -0,0 +1,117 @@
+---
+id: 612eb8e984cd73677a92b7e9
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Give the `.key` selector a `border-radius` value of `0 0 3px 3px`.
+
+# --hints--
+
+Your `.key` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+--fcc-editable-region--
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
new file mode 100644
index 0000000000..80785c1dbf
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612eb934f64a4d6890a45518.md
@@ -0,0 +1,118 @@
+---
+id: 612eb934f64a4d6890a45518
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Give the `.key.black--key::after` selector a `border-radius` of `0 0 3px 3px` to match the keys.
+
+# --hints--
+
+Your `.key.black--key::after` selector should have a `border-radius` property set to `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+--fcc-editable-region--
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
new file mode 100644
index 0000000000..a0c170c27e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebcba99bfa46a15370b11.md
@@ -0,0 +1,139 @@
+---
+id: 612ebcba99bfa46a15370b11
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+The `@media` at-rule, also known as a media query, is used to conditionally apply CSS. Media queries are commonly used to apply CSS based on the viewport width using the `max-width` and `min-width` properties.
+
+In the below example the padding is applied to the `.card` class when the viewport is `960px` wide and below.
+
+```css
+@media (max-width: 960px) {
+  .card {
+    padding: 2rem;
+  }
+}
+```
+
+Add a media query that will be applied when the viewport is `768px` wide and below.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
+```
+
+Your `@media` query should have a `max-width` of `768px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
new file mode 100644
index 0000000000..3291a4dac2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebe7fe6d07e6b76d1cae2.md
@@ -0,0 +1,133 @@
+---
+id: 612ebe7fe6d07e6b76d1cae2
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Add a new `#piano` selector within your `@media` query, and set the `width` to `358px`.
+
+# --hints--
+
+Your `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `358px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '358px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
new file mode 100644
index 0000000000..5cfe1e3cac
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebedec97e096c8bf64999.md
@@ -0,0 +1,136 @@
+---
+id: 612ebedec97e096c8bf64999
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Within the `@media` query, add a `.keys` selector and set the `width` to `318px`.
+
+# --hints--
+
+
+Your `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `318px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '318px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
new file mode 100644
index 0000000000..0dbf2d1e3c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ebf9a210f2b6d77001e68.md
@@ -0,0 +1,139 @@
+---
+id: 612ebf9a210f2b6d77001e68
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Now add a `.logo` selector to the `@media` query, and set the `width` property to `150px`.
+
+# --hints--
+
+Your `@media` rule should have a `.logo` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo);
+```
+
+Your new `.logo` selector should have a `width` of `150px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo?.style.width === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
new file mode 100644
index 0000000000..a32cab125e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ec0490ae8626e9adf82e4.md
@@ -0,0 +1,133 @@
+---
+id: 612ec0490ae8626e9adf82e4
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+You may have noticed that the keys collapse when the browser window is smaller than `768px`. To address this issue, set `overflow` to `hidden` in the first `.keys` selector. This property will hide any elements that are pushed outside the defined `width` of `.keys`, preventing unwanted layout changes.
+
+# --hints--
+
+Your original `.keys` selector should have the `overflow` property set to `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+--fcc-editable-region--
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
new file mode 100644
index 0000000000..097b595db2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ec19d5268da7074941f84.md
@@ -0,0 +1,154 @@
+---
+id: 612ec19d5268da7074941f84
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Logical operators can be used to construct more complex media queries. The `and` logical operator is used to query two media conditions.
+
+For example, a media query that targets a display width between 500px and 1000px would be:
+
+```css
+@media (min-width: 500px) and (max-width: 1000px){
+
+}
+```
+
+Add another `@media` rule to apply if the browser window is wider than `769px` but smaller than `1199px`.
+
+# --hints--
+
+You should add a new `@media` query.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
+```
+
+Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`.
+
+```js
+const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText;
+assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
new file mode 100644
index 0000000000..de83d05ac4
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-piano/612ec29c84b9a6718b1f5cec.md
@@ -0,0 +1,288 @@
+---
+id: 612ec29c84b9a6718b1f5cec
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+For the new `@media` rule, set the `width` of the `#piano` to `675px` and the `width` of the `.keys` to `633px`.
+
+With that, your piano is complete!
+
+# --hints--
+
+Your second `@media` rule should have a `#piano` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+Your new `#piano` selector should have a `width` of `675px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '675px');
+```
+
+Your second `@media` rule should have a `.keys` selector.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+Your new `.keys` selector should have a `width` of `633px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '633px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+@media (max-width: 1199px) and (min-width: 769px) {
+
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+@media (max-width: 1199px) and (min-width: 769px) {
+  #piano {
+    width: 675px;
+  }
+
+  .keys {
+    width: 633px;
+  }
+}
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
new file mode 100644
index 0000000000..9d986165f5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcdfed6848e48947dbbc9.md
@@ -0,0 +1,36 @@
+---
+id: 66fbcdfed6848e48947dbbc9
+title: Step 1
+challengeType: 1
+dashedName: step-1
+---
+
+# --description--
+
+In this workshop, you will create a recipe tracker using JavaScript objects.
+
+Start by creating an empty array named `recipes`. This is the array you'll push the recipe objects into later.
+
+# --hints--
+
+You should create an array named `recipes`.
+
+```js
+assert.isArray(recipes)
+```
+
+Your `recipes` array should be empty.
+
+```js
+assert.isEmpty(recipes)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
new file mode 100644
index 0000000000..0186623c8b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562d.md
@@ -0,0 +1,81 @@
+---
+id: 66fbcf750a62784cf11f562d
+title: Step 2
+challengeType: 1
+dashedName: step-2
+---
+
+# --description--
+
+Create an object named `recipe1`. Inside the `recipe1` object, create a `name` property with the value `"Spaghetti Carbonara"`.
+
+Also inside the `recipe1` object, create an `ingredients` property with an array as the value. The array should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` inside it.
+
+Create another `ratings` property with array value. The array should have `4`, `5`, `4`, and `5` inside it.
+
+# --hints--
+
+You should create an object named `recipe1`.
+
+```js
+assert.isObject(recipe1)
+```
+
+Your `recipe1` object should have a `name` property.
+
+```js
+assert.property(recipe1, 'name');
+```
+
+Your `name` property should be set to `Spaghetti Carbonara`.
+
+```js
+assert.equal(recipe1.name, 'Spaghetti Carbonara');
+```
+
+Your `recipe1` object should have an `ingredients` property.
+
+```js
+assert.property(recipe1, 'ingredients');
+```
+
+Your `ingredients` property should have an array value.
+
+```js
+assert.isArray(recipe1.ingredients)
+```
+
+The array value of your `ingredients` property should have `spaghetti`, `Parmesan cheese`, `pancetta`, and `black pepper` in it.
+
+```js
+assert.deepEqual(recipe1.ingredients, ["spaghetti", "Parmesan cheese", "pancetta", "black pepper"]);
+```
+
+Your `recipe1` object should have a `ratings` property.
+
+```js
+assert.property(recipe1, "ratings");
+```
+
+Your `ratings` property should have an array value.
+
+```js
+assert.isArray(recipe1.ratings)
+```
+
+The array value of your `ratings` property should have `4`, `5`, `4`, and `5` in it.
+
+```js
+assert.deepEqual(recipe1.ratings, [4, 5, 4, 5]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
new file mode 100644
index 0000000000..77dac4da29
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f562e.md
@@ -0,0 +1,152 @@
+---
+id: 66fbcf750a62784cf11f562e
+title: Step 4
+challengeType: 1
+dashedName: step-4
+---
+
+# --description--
+
+Create another `recipe2` object with the following properties and values:
+
+| Key                | Value                                                                   |
+| ------------------ | ----------------------------------------------------------------------- |
+| `name`             | `Chicken Curry`                                                         |
+| `ingredients`      | `["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]` |
+| `ratings`          | `[4, 5, 5, 5]`                                                          |
+| `cookingTime`      | `42`                                                                    |
+| `totalIngredients` | `null`                                                                  |
+| `difficultyLevel`  | `''`                                                                    |
+| `averageRating`    | `null`                                                                  |
+
+# --hints--
+
+You should create an object named `recipe2`.
+
+```js
+assert.isObject(recipe2)
+```
+
+Your `recipe2` object should have a `name` property.
+
+```js
+assert.property(recipe2, "name");
+```
+
+Your `name` property should be set to `Chicken Curry`.
+
+```js
+assert.equal(recipe2.name, "Chicken Curry");
+```
+
+Your `recipe2` object should have an `ingredients` property.
+
+```js
+assert.property(recipe2, "ingredients");
+```
+
+Your `ingredients` property should have an array value.
+
+```js
+assert.isArray(recipe2.ingredients)
+```
+
+The array value of your `ingredients` property should have `chicken breast`, `coconut milk`, `curry powder`, `onion` and `garlic` in it.
+
+```js
+assert.deepEqual(recipe2.ingredients, ["chicken breast", "coconut milk", "curry powder", "onion", "garlic"]);
+```
+
+Your `recipe2` object should have a `ratings` property.
+
+```js
+assert.property(recipe2, "ratings");
+```
+
+Your `ratings` property should have an array value.
+
+```js
+assert.isArray(recipe2.ratings)
+```
+
+The array value of your `ratings` property should have `4`, `5`, `5`, and `5` in it.
+
+```js
+assert.deepEqual(recipe2.ratings, [4, 5, 5, 5]);
+```
+
+Your `recipe2` object should have a `cookingTime` property.
+
+```js
+assert.property(recipe2, "cookingTime");
+```
+
+Your `cookingTime` property value should be a number.
+
+```js
+assert.isNumber(recipe2.cookingTime);
+```
+
+Your `cookingTime` property should be set to `42`.
+
+```js
+assert.equal(recipe2.cookingTime, 42);
+```
+
+Your `recipe2` object should have a `totalIngredients` property.
+
+```js
+assert.property(recipe2, "totalIngredients");
+```
+
+Your `totalIngredients` property should be set to `null`.
+
+```js
+assert.isNull(recipe2.totalIngredients);
+```
+
+Your `recipe2` object should have a `difficultyLevel` property.
+
+```js
+assert.property(recipe2, "difficultyLevel");
+```
+
+Your `difficultyLevel` property should be set to an empty string.
+
+```js
+assert.deepEqual(recipe2.difficultyLevel, "");
+```
+
+Your `recipe2` object should have an `averageRating` property.
+
+```js
+assert.property(recipe2, "averageRating");
+```
+
+Your `averageRating` property should be set to `null`.
+
+```js
+assert.isNull(recipe2.averageRating);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
new file mode 100644
index 0000000000..a010c6c140
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5630.md
@@ -0,0 +1,98 @@
+---
+id: 66fbcf750a62784cf11f5630
+title: Step 6
+challengeType: 1
+dashedName: step-6
+---
+
+# --description--
+
+A third `recipe3` object has been filled in for you. It has the same properties as `recipe1` and `recipe2`.
+
+You should now push the three objects into the `recipes` array. To do thus, you can use the `push()` method.
+
+Use the `push()` method to push all the recipe objects into the `recipes` array. Make sure to push `recipe1`, `recipe2`, and `recipe3` in that order.
+
+# --hints--
+
+You should remove `recipe1Name` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe1Name\s*=\s*recipe1\.name;?\s*console\.log\(recipe1Name\);?/)
+```
+
+You should remove `recipe2Name` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe2Name\s*=\s*recipe2\.name;?\s*console\.log\(recipe2Name\);?/)
+```
+
+You should remove `recipe1CookingTime` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe1CookingTime\s*=\s*recipe1\.cookingTime;?\s*console\.log\(recipe1CookingTime\);?/)
+```
+
+You should remove `recipe2CookingTime` and its console log.
+
+```js
+assert.notMatch(code, /const\s*recipe2CookingTime\s*=\s*recipe2\.cookingTime;?\s*console\.log\(recipe2CookingTime\);?/)
+```
+
+You should push all the recipes objects into the `recipes` array. Make sure to push them in the order they are declared.
+
+```js
+assert.deepEqual(recipes, [recipe1, recipe2, recipe3]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+const recipe1Name = recipe1.name;
+console.log(recipe1Name);
+
+const recipe2Name = recipe2.name;
+console.log(recipe2Name);
+
+const recipe1CookingTime = recipe1.cookingTime;
+console.log(recipe1CookingTime);
+
+const recipe2CookingTime = recipe2.cookingTime;
+console.log(recipe2CookingTime);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
new file mode 100644
index 0000000000..292feedbae
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5631.md
@@ -0,0 +1,104 @@
+---
+id: 66fbcf750a62784cf11f5631
+title: Step 7
+challengeType: 1
+dashedName: step-7
+---
+
+# --description--
+
+Now, you should work on calculating the `averageRating`, `totalIngredients`, and the `difficultyLevel` for each recipe in the `recipes` array.
+
+Start by creating a `getAverageRating` function that takes a `ratings` parameter. Inside the function, calculate the average rating using the items in the `ratings` property of each recipe.
+
+Your `getAverageRating` function must return a number.
+
+# --hints--
+
+You should create a `getAverageRating` function.
+
+```js
+assert.isFunction(getAverageRating)
+```
+
+Your `getAverageRating` function should have a `ratings` parameter.
+
+```js
+assert.match(getAverageRating.toString(), /ratings/);
+```
+
+Your `getAverageRating` function should return a number.
+
+```js
+assert.isNumber(getAverageRating(recipe1.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.00`.
+
+```js
+assert.isNumber(getAverageRating(recipe2.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.75`.
+
+```js
+assert.isNumber(getAverageRating(recipe2.ratings))
+```
+
+You `getAverageRating` function should return a number when the average rating is `4.50`.
+
+```js
+assert.isNumber(getAverageRating(recipe1.ratings))
+```
+
+Your `getAverageRating` function should return the correct rating.
+
+```js
+assert.equal(getAverageRating(recipe1.ratings), 4.50)
+assert.equal(getAverageRating(recipe2.ratings), 4.75)
+assert.equal(getAverageRating(recipe3.ratings), 4.00)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
new file mode 100644
index 0000000000..ace358ab7f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5632.md
@@ -0,0 +1,105 @@
+---
+id: 66fbcf750a62784cf11f5632
+title: Step 8
+challengeType: 1
+dashedName: step-8
+---
+
+# --description--
+
+Create a `getTotalIngredients` function that takes an `ingredients` parameter. This function should return the number of ingredients for each recipe by returning the length of the `ingredients` array.
+
+# --hints--
+
+You should create a `getTotalIngredients` function.
+
+```js
+assert.isFunction(getTotalIngredients)
+```
+
+You `getTotalIngredients` function should have an `ingredients` parameter.
+
+```js
+assert.match(getTotalIngredients.toString(), /ingredients/);
+```
+
+Your `getTotalIngredients` function should return a number.
+
+```js
+assert.isNumber(getTotalIngredients(recipe1.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `5`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe2.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `3`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe3.ingredients))
+```
+
+Your `getTotalIngredients` function should return a number when the total ingrendients is `4`.
+
+```js
+assert.isNumber(getTotalIngredients(recipe1.ingredients))
+```
+
+Your `getTotalIngredients` function should return the correct number of ingredients.
+
+```js
+assert.equal(getTotalIngredients(recipe1.ingredients), 4)
+assert.equal(getTotalIngredients(recipe2.ingredients), 5)
+assert.equal(getTotalIngredients(recipe3.ingredients), 3)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
new file mode 100644
index 0000000000..c686ff0e9a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5633.md
@@ -0,0 +1,106 @@
+---
+id: 66fbcf750a62784cf11f5633
+title: Step 9
+challengeType: 1
+dashedName: step-9
+---
+
+# --description--
+
+Create a `getDifficultyLevel` function that takes `cookingTime` as a parameter.
+
+If `cookingTime` is less than `30`, the function should return `"easy"`. If it is less than or equal to `60`, the function should return `"medium"`. Otherwise, the function should return `"hard"`.
+
+# --hints--
+
+You should create a `getDifficultyLevel` function.
+
+```js
+assert.isFunction(getDifficultyLevel)
+```
+
+You `getDifficultyLevel` function should have a `cookingTime` parameter.
+
+```js
+assert.match(getDifficultyLevel.toString(), /cookingTime/);
+```
+
+Your `getDifficultyLevel` function should return `"easy"` when the `cookingTime` is less than or equal to `30`.
+
+```js
+assert.strictEqual(getDifficultyLevel(10), "easy")
+assert.strictEqual(getDifficultyLevel(20), "easy")
+assert.strictEqual(getDifficultyLevel(29), "easy")
+assert.strictEqual(getDifficultyLevel(30), "easy")
+```
+
+Your `getDifficultyLevel` function should return `"medium"` when the `cookingTime` is greater than `31` and less than `60`.
+
+```js
+assert.strictEqual(getDifficultyLevel(31), "medium")
+assert.strictEqual(getDifficultyLevel(40), "medium")
+assert.strictEqual(getDifficultyLevel(50), "medium")
+assert.strictEqual(getDifficultyLevel(60), "medium")
+```
+
+Your `getDifficultyLevel` function should return `"hard"` when the `cookingTime` is greater than `60`.
+
+```js
+assert.strictEqual(getDifficultyLevel(61), "hard")
+assert.strictEqual(getDifficultyLevel(65), "hard")
+assert.strictEqual(getDifficultyLevel(70), "hard")
+assert.strictEqual(getDifficultyLevel(75), "hard")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
new file mode 100644
index 0000000000..38ec100fd5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5634.md
@@ -0,0 +1,133 @@
+---
+id: 66fbcf750a62784cf11f5634
+title: Step 10
+challengeType: 1
+dashedName: step-10
+---
+
+# --description--
+
+It's time to test each of the functions. You can use any of the recipes for this, but let's start with `recipe1`.
+
+Create three new variables: `recipe1AverageRating`, `recipe1TotalIngredients`, and `recipe1DifficultyLevel`. Assign them the values by calling the corresponding function for each variable and passing in the appropriate `recipe1` property.
+
+Finally, log each variable to the console to see the results.
+
+# --hints--
+
+You should create a `recipe1AverageRating` variable.
+
+```js
+assert.isNotNull(recipe1AverageRating)
+```
+
+Your `recipe1AverageRating` variable should be set to `getAverageRating(recipe1.ratings)`.
+
+```js
+assert.equal(recipe1AverageRating, getAverageRating(recipe1.ratings));
+```
+
+You should log `recipe1AverageRating` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1AverageRating\);?/)
+```
+
+You should create a `recipe1TotalIngredients` variable.
+
+```js
+assert.isNotNull(recipe1TotalIngredients)
+```
+
+Your `recipe1TotalIngredients` variable should be set to `getTotalIngredients(recipe1.ingredients)`.
+
+```js
+assert.equal(recipe1TotalIngredients, getTotalIngredients(recipe1.ingredients));
+```
+
+You should log `recipe1TotalIngredients` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1TotalIngredients\);?/)
+```
+
+You should create a `recipe1DifficultyLevel` variable.
+
+```js
+assert.isNotNull(recipe1DifficultyLevel)
+```
+
+Your `recipe1DifficultyLevel` variable should be set to `getDifficultyLevel(recipe1.cookingTime)`.
+
+```js
+assert.equal(recipe1DifficultyLevel, getDifficultyLevel(recipe1.cookingTime));
+```
+
+You should log `recipe1DifficultyLevel` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1DifficultyLevel\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
new file mode 100644
index 0000000000..3a34c4658f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5635.md
@@ -0,0 +1,124 @@
+---
+id: 66fbcf750a62784cf11f5635
+title: Step 11
+challengeType: 1
+dashedName: step-11
+---
+
+# --description--
+
+You can now fill in each item of the `recipes` array with values for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties.
+
+To do this, access the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of each recipe object and assign them the results of the corresponding function calls with the appropriate arguments.
+
+For now, access the `averageRating`, `totalIngredients`, and `difficultyLevel` of `recipe1` and set them to the appropriate function calls and arguments.
+
+# --hints--
+
+You should access the `averageRating` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.averageRating/)
+```
+
+You should set the `averageRating` of `recipe1` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter.
+
+```js
+assert.match(code, /recipe1\.averageRating\s*=\s*getAverageRating\(recipe1\.ratings\);?/)
+```
+
+You should access the `totalIngredients` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.totalIngredients/)
+```
+
+You should set the `totalIngredients` of `recipe1` you accessed to the calling of `getTotalIngredients` with `recipe1.ingredients` as its parameter.
+
+```js
+assert.match(code, /recipe1\.totalIngredients\s*=\s*getTotalIngredients\(recipe1\.ingredients\);?/)
+```
+
+You should access the `difficultyLevel` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.difficultyLevel/)
+```
+
+You should set the `difficultyLevel` of `recipe1` you accessed to the calling of `getDifficultyLevel` with `recipe1.cookingTime` as its parameter.
+
+```js
+assert.match(code, /recipe1\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe1\.cookingTime\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
new file mode 100644
index 0000000000..bd9aceddf5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5636.md
@@ -0,0 +1,124 @@
+---
+id: 66fbcf750a62784cf11f5636
+title: Step 12
+challengeType: 1
+dashedName: step-12
+---
+
+# --description--
+
+Repeat the process for the `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe2`.
+
+# --hints--
+
+You should access the `averageRating` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.averageRating/)
+```
+
+You should set the `averageRating` of `recipe2` you accessed to the calling of `getAverageRating` with `recipe1.ratings` as its parameter.
+
+```js
+assert.match(code, /recipe2\.averageRating\s*=\s*getAverageRating\(recipe2\.ratings\);?/)
+```
+
+You should access the `totalIngredients` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.totalIngredients/)
+```
+
+You should set the `totalIngredients` of `recipe2` you accessed to the calling of `getTotalIngredients` with `recipe2.ingredients` as its parameter.
+
+```js
+assert.match(code, /recipe2\.totalIngredients\s*=\s*getTotalIngredients\(recipe2\.ingredients\);?/)
+```
+
+You should access the `difficultyLevel` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.difficultyLevel/)
+```
+
+You should set the `difficultyLevel` of `recipe2` you accessed to the calling of `getDifficultyLevel` with `recipe2.cookingTime` as its parameter.
+
+```js
+assert.match(code, /recipe2\.difficultyLevel\s*=\s*getDifficultyLevel\(recipe2\.cookingTime\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
new file mode 100644
index 0000000000..032cb8cd78
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66fbcf750a62784cf11f5637.md
@@ -0,0 +1,186 @@
+---
+id: 66fbcf750a62784cf11f5637
+title: Step 13
+challengeType: 1
+dashedName: step-13
+---
+
+# --description--
+
+The `averageRating`, `totalIngredients`, and `difficultyLevel` properties of `recipe3` have been filled in for you.
+
+Now, log the `recipes` array to the console to see all its items filled with the updated values.
+
+With that, your recipes tracker project is complete.
+
+# --hints--
+
+You should log the `recipes` array to the console.
+
+```js
+assert.match(code, /console\.log\(recipes\);?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return total / ratings.length.toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(recipe1AverageRating);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(recipe1TotalIngredients);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(recipe1DifficultyLevel);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+recipe2.averageRating = getAverageRating(recipe2.ratings);
+recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients);
+recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime);
+
+recipe3.averageRating = getAverageRating(recipe3.ratings);
+recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients)
+recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime)
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+const recipe3 = {
+  name: 'Vegetable Stir Fry',
+  ingredients: ['broccoli', 'carrot', 'bell pepper'],
+  cookingTime: 15,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 3, 4, 5],
+  averageRating: null,
+};
+
+recipes.push(recipe1, recipe2, recipe3);
+
+function getAverageRating(ratings) {
+  const total = ratings[0] + ratings[1] + ratings[2] + ratings[3];
+  return (total / ratings.length).toFixed(2);
+}
+
+function getTotalIngredients(ingredients) {
+  return ingredients.length;
+}
+
+function getDifficultyLevel(cookingTime) {
+  if (cookingTime <= 30) {
+    return 'easy';
+  } else if (cookingTime <= 60) {
+    return 'medium';
+  } else {
+    return 'hard';
+  }
+}
+
+const recipe1AverageRating = getAverageRating(recipe1.ratings);
+console.log(`Recipe 1 Average Rating ${recipe1AverageRating}`);
+
+const recipe1TotalIngredients = getTotalIngredients(recipe1.ingredients);
+console.log(`Recipe 1 Total Ingredients: ${recipe1TotalIngredients}`);
+
+const recipe1DifficultyLevel = getDifficultyLevel(recipe1.cookingTime);
+console.log(`Recipe 1 Difficulty: ${recipe1DifficultyLevel}`);
+
+recipe1.averageRating = getAverageRating(recipe1.ratings);
+recipe1.totalIngredients = getTotalIngredients(recipe1.ingredients)
+recipe1.difficultyLevel = getDifficultyLevel(recipe1.cookingTime)
+
+recipe2.averageRating = getAverageRating(recipe2.ratings);
+recipe2.totalIngredients = getTotalIngredients(recipe2.ingredients);
+recipe2.difficultyLevel = getDifficultyLevel(recipe2.cookingTime);
+
+recipe3.averageRating = getAverageRating(recipe3.ratings);
+recipe3.totalIngredients = getTotalIngredients(recipe3.ingredients)
+recipe3.difficultyLevel = getDifficultyLevel(recipe3.cookingTime)
+
+console.log(recipes);
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
new file mode 100644
index 0000000000..193d3d702f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/66ff02792b3042a2b811f475.md
@@ -0,0 +1,86 @@
+---
+id: 66ff02792b3042a2b811f475
+title: Step 3
+challengeType: 1
+dashedName: step-3
+---
+
+# --description--
+
+Add the following properties to the `recipe1` object:
+
+| Key                | Value  |
+| ------------------ | ------ |
+| `cookingTime`      | `22`   |
+| `totalIngredients` | `null` |
+| `difficultyLevel`  | `""`   |
+| `averageRating`    | `null` |
+
+The properties with `null` and empty string values will be updated later after you calculate them.
+
+# --hints--
+
+Your `recipe1` object should have a `cookingTime` property.
+
+```js
+assert.property(recipe1, "cookingTime");
+```
+
+Your `cookingTime` property should be set to `22`.
+
+```js
+assert.equal(recipe1.cookingTime, 22);
+```
+
+Your `recipe1` object should have a `totalIngredients` property.
+
+```js
+assert.property(recipe1, "totalIngredients");
+```
+
+Your `totalIngredients` property should be set to `null`.
+
+```js
+assert.isNull(recipe1.totalIngredients);
+```
+
+Your `recipe1` object should have a `difficultyLevel` property.
+
+```js
+assert.property(recipe1, "difficultyLevel");
+```
+
+Your `difficultyLevel` property should be set to an empty string.
+
+```js
+assert.deepEqual(recipe1.difficultyLevel, "");
+```
+
+Your `recipe1` object should have a `averageRating` property.
+
+```js
+assert.property(recipe1, "averageRating");
+```
+
+Your `averageRating` property should be set to `null`.
+
+```js
+assert.isNull(recipe1.averageRating);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  ratings: [4, 5, 4, 5],
+--fcc-editable-region--
+
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
new file mode 100644
index 0000000000..6e051af223
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-recipe-tracker/670e4f45f7116c0f216a5177.md
@@ -0,0 +1,135 @@
+---
+id: 670e4f45f7116c0f216a5177
+title: Step 5
+challengeType: 1
+dashedName: step-5
+---
+
+# --description--
+
+Before we move on, you should practice how to access properties from an object.
+
+You can use either dot (`.`) or bracket (`[]`) notation to do this. Here's an example:
+
+```js
+const person = {
+  name: 'John',
+  age: 30,
+  job: 'Software Engineer'
+};
+
+console.log(person.name); // John
+console.log(person['age']);  // 30
+```
+
+Access the `name` properties of both `recipe1` and `recipe2`, and assign them to the variables `recipe1Name` and `recipe2Name`, respectively.
+
+Next, access the `cookingTime` properties of both recipes and assign them to the variables `recipe1CookingTime` and `recipe2CookingTime`, respectively.
+
+Make sure all the variables you created are logged to the console.
+
+# --hints--
+
+You should create a `recipe1Name` variable.
+
+```js
+assert.isNotNull(recipe1Name)
+```
+
+You should set your `recipe1Name` variable to the accessment of the `name` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.name|recipe1\[("|'|`)name("|'|`)\]/)
+```
+
+You should log `recipe1Name` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1Name\)/)
+```
+
+You should create a `recipe2Name` variable.
+
+```js
+assert.isNotNull(recipe2Name)
+```
+
+You should set your `recipe2Name` variable to the accessment of the `name` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.name|recipe2\[("|'|`)name("|'|`)\]/)
+```
+
+You should log `recipe2Name` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe2Name\)/)
+```
+
+You should create a `recipe1CookingTime` variable.
+
+```js
+assert.isNotNull(recipe1CookingTime)
+```
+
+You should set your `recipe1CookingTime` variable to the accessment of the `cookingTime` property of `recipe1`.
+
+```js
+assert.match(code, /recipe1\.cookingTime|recipe1\[("|'|`)cookingTime("|'|`)\]/)
+```
+
+You should log `recipe1CookingTime` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe1CookingTime\)/)
+```
+
+You should create a `recipe2CookingTime` variable.
+
+```js
+assert.isNotNull(recipe2CookingTime)
+```
+
+You should set your `recipe2CookingTime` variable to the accessment of the `cookingTime` property of `recipe2`.
+
+```js
+assert.match(code, /recipe2\.cookingTime|recipe2\[("|'|`)cookingTime("|'|`)\]/)
+```
+
+You should log `recipe2CookingTime` to the console.
+
+```js
+assert.match(code, /console\.log\(recipe2CookingTime\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const recipes = [];
+
+const recipe1 = {
+  name: 'Spaghetti Carbonara',
+  ingredients: ['spaghetti', 'Parmesan cheese', 'pancetta', 'black pepper'],
+  cookingTime: 22,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 4, 5],
+  averageRating: null,
+};
+
+const recipe2 = {
+  name: 'Chicken Curry',
+  ingredients: ['chicken breast', 'coconut milk', 'curry powder', 'onion', 'garlic'],
+  cookingTime: 42,
+  totalIngredients: null,
+  difficultyLevel: '',
+  ratings: [4, 5, 5, 5],
+  averageRating: null,
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
new file mode 100644
index 0000000000..f86b2c6d43
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996b.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996b
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+Begin your project by adding an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` within the `body` element.
+
+# --hints--
+
+Your code should have an `img` element.
+
+```js
+assert(document.querySelectorAll('img').length === 1);
+```
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
new file mode 100644
index 0000000000..ba70369909
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996c.md
@@ -0,0 +1,42 @@
+---
+id: 60a3e3396c7b40068ad6996c
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+In the previous lecture videos about the CSS box model, you learned that every HTML element is treated as a box with four areas.
+
+Imagine you receive a box from your favorite online retailer — the content is the item in the box, or in your case, a header, paragraph, or image element.
+
+Change the `src` attribute in the `<img>` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`.
+
+# --hints--
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
new file mode 100644
index 0000000000..53f6395c12
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996d.md
@@ -0,0 +1,41 @@
+---
+id: 60a3e3396c7b40068ad6996d
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it.
+
+Think of the border like the cardboard box your item was shipped in.
+
+Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+# --hints--
+
+The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
new file mode 100644
index 0000000000..070dc57d06
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996e.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Margin is the area outside of the box, and can be used to control the space between other boxes or elements.
+
+Here the bottom element has a larger top margin, pushing it further down the page.
+
+Now that you quickly reviewed the CSS box model, let's get started on the Rothko painting.
+
+Remove the `<img>` element.
+
+# --hints--
+
+You should not have an `img` element in your code.
+
+```js
+assert(document.querySelector('img') === null);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
new file mode 100644
index 0000000000..33aa91b710
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6996f.md
@@ -0,0 +1,47 @@
+---
+id: 60a3e3396c7b40068ad6996f
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Add a `div` element in the `body`.
+
+Set the `class` attribute equal to `canvas`.
+
+This will act as the canvas for your painting.
+
+# --hints--
+
+Your code should have a `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 1)
+```
+
+The `div` element should have a `class` with the value `canvas`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('canvas'))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
new file mode 100644
index 0000000000..4ef6fabe87
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69970.md
@@ -0,0 +1,53 @@
+---
+id: 60a3e3396c7b40068ad69970
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Before you can start styling the `div` you added, you need to link your CSS to your HTML.
+
+Add a `link` element to link your `styles.css` file. Set the `href` to `styles.css`, and remember to set the `rel` attribute to `stylesheet`.
+
+# --hints--
+
+Your code should have a `link` element.
+
+```js
+assert(/<link/.test(code))
+```
+
+Your `link` element should have a `rel` attribute with the value `stylesheet`.
+
+```js
+assert.match(code, /<link.*?rel=('|"|`)stylesheet\1/)
+```
+
+Your `link` element should have an `href` attribute with the value `styles.css`.
+
+```js
+assert.match(code, /<link.*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
new file mode 100644
index 0000000000..286d537b9e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69971.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69971
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Time for CSS.
+
+Even though your `<div>` has no text, it's still treated as a box with content. Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels. Here's a CSS rule that sets the width of the class `card` to 300 pixels:
+
+```css
+.card {
+  width: 300px;
+}
+```
+
+# --hints--
+
+Your code should have a `.canvas` selector.
+
+```js
+const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas');
+assert(hasCanvas)
+```
+
+You should set the `width` property to `500px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px')
+assert(hasWidth);
+```
+
+Your `.canvas` element should have a `width` of `500px`.
+
+```js
+const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width');
+assert(width === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
new file mode 100644
index 0000000000..9151276320
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69972.md
@@ -0,0 +1,54 @@
+---
+id: 60a3e3396c7b40068ad69972
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Add the `height` property with the value `600px` to your `.canvas` rule.
+
+# --hints--
+
+You should set the `height` property to `600px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px');
+assert(hasHeight);
+```
+
+Your `.canvas` element should have a `height` of `600px`.
+
+```js
+const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height');
+assert(canvasHeight === '600px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
new file mode 100644
index 0000000000..66a17e01da
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69973.md
@@ -0,0 +1,55 @@
+---
+id: 60a3e3396c7b40068ad69973
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Change the `background-color` of the canvas to `#4d0f00`.
+
+# --hints--
+
+You should set the `background-color` property to `#4d0f00`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)');
+assert(hasBackground);
+```
+
+Your `.canvas` element should have a `background-color` of `#4d0f00`.
+
+```js
+const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color');
+assert(canvasBackground === 'rgb(77, 15, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
new file mode 100644
index 0000000000..45d4fc208c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69974.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69974
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Every painting needs a frame.
+
+Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class.
+# --hints--
+
+You should add a new `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 2)
+```
+
+Your `.canvas` element should be nested in the new `div` element.
+
+```js
+assert(document.querySelector('.canvas').parentElement.tagName === 'DIV');
+```
+
+Your new `div` should have a `class` with the value `frame`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('frame'));
+```
+
+Your new `div` should be within your `body` element.
+
+```js
+assert(document.querySelector('div').parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+--fcc-editable-region--
+
+    <div class="canvas">
+    </div>
+
+--fcc-editable-region--
+  </body>
+  ```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
new file mode 100644
index 0000000000..8943f3095f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69975.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69975
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Write a new rule using the `.frame` class selector.
+
+Use the `border` shorthand declaration to give the `.frame` element a solid, black border with a width of `50px`.
+
+# --hints--
+
+Your code should have a `.frame` selector.
+
+```js
+const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame');
+assert(hasFrame);
+```
+
+You should set the `border` property to `50px solid black`.
+
+```js
+const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black');
+assert(hasBorder);
+```
+
+Your `.frame` element should have a `50px solid black` `border`.
+
+```js
+const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border');
+assert(frameBorder === '50px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
new file mode 100644
index 0000000000..67d334708d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69976.md
@@ -0,0 +1,64 @@
+---
+id: 60a3e3396c7b40068ad69976
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+The frame is much too wide.
+
+In `.frame`, set its `width` to 500 pixels.
+
+# --hints--
+
+You should set the `width` property to `500px`.
+
+```js
+const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px');
+assert(widthFilter.length === 2);
+```
+
+Your `.frame` element should have a `width` of `500px`.
+
+```js
+const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width');
+assert(frameWidth === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
new file mode 100644
index 0000000000..bba60c94f2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69977.md
@@ -0,0 +1,65 @@
+---
+id: 60a3e3396c7b40068ad69977
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Use padding to adjust the spacing within an element.
+
+In `.frame`, use the `padding` shorthand property to increase the space between the `.frame` and `.canvas` elements by `50px`. The shorthand will increase space in the top, bottom, left, and right of the element's border and canvas within.
+
+# --hints--
+
+You should set the `padding` property to `50px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px');
+assert(hasPadding);
+```
+
+Your `.frame` element should have a `padding` value of `50px`.
+
+```js
+const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding');
+assert(framePadding === '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
new file mode 100644
index 0000000000..5bdf662a15
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69978.md
@@ -0,0 +1,66 @@
+---
+id: 60a3e3396c7b40068ad69978
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Use margins to adjust the spacing outside of an element.
+
+Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. This will move the frame down 20 pixels and horizontally center it on the page.
+
+# --hints--
+
+You should set the `margin` property to `20px auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto');
+assert(hasMargin);
+```
+
+Your `.frame` element should have a `margin` value of `20px auto`.
+
+```js
+const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin');
+assert(frameMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
new file mode 100644
index 0000000000..cbbaa5bd1d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69979.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad69979
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Add a new `div` element inside of your `.canvas` element.
+
+Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle.
+
+# --hints--
+
+You should create a new `div` element.
+
+```js
+assert(document.querySelectorAll('div').length === 3);
+```
+
+You should nest the new `div` element within your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[0].tagName === 'DIV');
+```
+
+Your new `div` should have a `class` attribute with a value `one`.
+
+```js
+assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
new file mode 100644
index 0000000000..de2c2b089c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997a.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997a
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Write a new rule that targets `.one` and set its `width` to 425 pixels.
+
+# --hints--
+
+You should have a `.one` selector.
+
+```js
+const hasOne = new __helpers.CSSHelp(document).getStyle('.one');
+assert(hasOne);
+```
+
+You should set the `width` property to `425px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px');
+assert(hasWidth);
+```
+
+Your `.one` element should have a `width` value of `425px`.
+
+```js
+const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width');
+assert(oneWidth === '425px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
new file mode 100644
index 0000000000..aa9033dc8b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997b.md
@@ -0,0 +1,70 @@
+---
+id: 60a3e3396c7b40068ad6997b
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Now set the `height` for `.one` to 150 pixels.
+
+# --hints--
+
+You should set the `height` property to `150px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px');
+assert(hasHeight);
+```
+
+Your `.one` element should have a `height` value of `150px`.
+
+```js
+const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height');
+assert(oneHeight === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
new file mode 100644
index 0000000000..bec4b8fdf3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997c.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad6997c
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Set the `background-color` of `.one` to `#efb762`.
+
+# --hints--
+
+You should set the `background-color` property to `#efb762`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)');
+assert(hasBackground)
+```
+
+Your `.one` element should have a `background-color` value of `#efb762`.
+
+```js
+const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color');
+assert(oneBackground === 'rgb(239, 183, 98)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
new file mode 100644
index 0000000000..29042741c7
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997d.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997d
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Use margins to position the `.one` element on the canvas.
+
+Add the shorthand `margin` property with a vertical margin of `20px` and a horizontal margin of `auto`.
+
+# --hints--
+
+You should set the `margin` property to `20px auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto');
+assert(marginFilter.length === 2);
+```
+
+Your `.one` element should have a `margin` value of `20px auto`.
+
+```js
+const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin');
+assert(oneMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
new file mode 100644
index 0000000000..365ecbaec6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997e.md
@@ -0,0 +1,75 @@
+---
+id: 60a3e3396c7b40068ad6997e
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels.
+
+Add `padding` of `1px` to the `.canvas` element to give the `.one` element something solid to push off of.
+
+# --hints--
+
+You should set the `padding` property to `1px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
+assert(hasPadding);
+```
+
+Your `.canvas` element should have a `padding` value of `1px`.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding');
+assert(canvasPadding === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
new file mode 100644
index 0000000000..9ffd481ee9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6997f.md
@@ -0,0 +1,82 @@
+---
+id: 60a3e3396c7b40068ad6997f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels.
+
+Replace the `padding` property with `overflow` set to `hidden` - changing the canvas back to its original dimensions.
+
+# --hints--
+
+You should remove the `padding` property from the `.canvas` selector.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding');
+assert(!canvasPadding);
+```
+
+You should set the `overflow` property to `hidden`.
+
+```js
+const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden');
+assert(hasOverflow);
+```
+
+Your `.canvas` element should have an `overflow` value of `hidden`.
+
+```js
+const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow');
+assert(canvasOverflow === 'hidden')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+  padding: 1px;
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
new file mode 100644
index 0000000000..84694dcaba
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69980.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69980
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle.
+
+# --hints--
+
+You should not change the existing `.one` element.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+```
+
+You should have a second `div` element in your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[1].tagName === 'DIV');
+```
+
+Your second `div` element should have a `class` value of `two`.
+
+```js
+assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two'));
+```
+
+Your `.two` element should come after your `.one` element.
+
+```js
+assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
new file mode 100644
index 0000000000..905c846534
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69981.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69981
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels.
+
+# --hints--
+
+You should have a `.two` selector.
+
+```js
+const hasTwo = new __helpers.CSSHelp(document).getStyle('.two');
+assert(hasTwo);
+```
+
+You should set the `width` property to `475px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px');
+assert(hasWidth);
+```
+
+Your `.two` element should have a `width` value of `475px`.
+
+```js
+const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width');
+assert(twoWidth === '475px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
new file mode 100644
index 0000000000..deb83104e5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69982.md
@@ -0,0 +1,79 @@
+---
+id: 60a3e3396c7b40068ad69982
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Set the `height` of the `.two` element to 200 pixels.
+
+# --hints--
+
+You should set the `height` property to `200px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px');
+assert(hasHeight);
+```
+
+Your `.two` element should have a `height` value of `200px`.
+
+```js
+const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height');
+assert(twoHeight === '200px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
new file mode 100644
index 0000000000..b473fbe95e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69983.md
@@ -0,0 +1,80 @@
+---
+id: 60a3e3396c7b40068ad69983
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Set the `background-color` of the `.two` element to `#8f0401`.
+
+# --hints--
+
+You should set the `background-color` property to `#8f0401`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)');
+assert(hasBackground);
+```
+
+Your `.two` element should have a `background-color` value of `#8f0401`.
+
+```js
+const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color');
+assert(twoBackground === 'rgb(143, 4, 1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
new file mode 100644
index 0000000000..aa6bfc9b10
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69984.md
@@ -0,0 +1,81 @@
+---
+id: 60a3e3396c7b40068ad69984
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Center the `.two` element by setting its `margin` to `auto`.
+
+# --hints--
+
+You should set the `margin` property to `auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto');
+assert(hasMargin);
+```
+
+Your `.two` element should have a `margin` value of `auto`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
new file mode 100644
index 0000000000..d4e9204170
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69986.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad69986
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle.
+
+# --hints--
+
+Your existing `.one` and `.two` elements should not be changed.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+assert(document.querySelectorAll('.two').length === 1);
+```
+
+Your new `div` should be nested in your `.canvas` element.
+
+```js
+assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
+```
+
+Your new `div` should come after your `.two` element.
+
+```js
+assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
+```
+
+Your new `div` element should have a `class` with the value `three`.
+
+```js
+assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
new file mode 100644
index 0000000000..a8ed43828e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69987.md
@@ -0,0 +1,94 @@
+---
+id: 60a3e3396c7b40068ad69987
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+You don't always have to use pixels when sizing an element.
+
+Create a new rule, `.three`, and set its `width` to `91%`.
+
+# --hints--
+
+You should use the `.three` selector.
+
+```js
+const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
+assert(hasThree);
+```
+
+You should set the `width` property to `91%`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
+assert(hasWidth);
+```
+
+Your `.three` element should have a `width` value of `91%`.
+
+```js
+const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
+assert(threeWidth === '91%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
new file mode 100644
index 0000000000..4bac9123c8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69988.md
@@ -0,0 +1,87 @@
+---
+id: 60a3e3396c7b40068ad69988
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Set the `height` of `.three` to `28%`.
+
+# --hints--
+
+You should set the `height` property to `28%`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
+assert(hasHeight);
+```
+
+Your `.three` element should have a `height` value of `28%`.
+
+```js
+const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
+assert(threeHeight === '28%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
new file mode 100644
index 0000000000..aa949defd3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69989.md
@@ -0,0 +1,88 @@
+---
+id: 60a3e3396c7b40068ad69989
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Change the `background-color` of `.three` to `#b20403`.
+
+# --hints--
+
+You should set the `background-color` property to `#b20403`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
+assert(hasBackground);
+```
+
+Your `.three` element should have a `background-color` value of `#b20403`.
+
+```js
+const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
+assert(threeBackground === 'rgb(178, 4, 3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
new file mode 100644
index 0000000000..6a8b129773
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998a.md
@@ -0,0 +1,89 @@
+---
+id: 60a3e3396c7b40068ad6998a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Center the `.three` element on the canvas by setting its `margin` to `auto`.
+
+# --hints--
+
+You should set the `margin` property to `auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
+assert(marginFilter.length === 2);
+```
+
+Your `.three` element should have a `margin` value of `auto`.
+
+```js
+const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
+assert(threeMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
new file mode 100644
index 0000000000..ba32bd466f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998b.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad6998b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+It's helpful to have your margins push in one direction.
+
+In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels.
+
+In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels.
+
+# --hints--
+
+You should set the `margin` property to `0 auto 20px`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
+assert(hasMargin);
+```
+
+Your `.two` element should have a `margin` value of `0 auto 20px`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === '0px auto 20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+  margin: auto;
+--fcc-editable-region--
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
new file mode 100644
index 0000000000..db47cb9346
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998c.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad6998c
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The colors and shapes of your painting are too sharp to pass as a Rothko.
+
+Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element.
+
+Here's an example of a rule that add a 3px `blur`:
+
+```css
+p {
+  filter: blur(3px);
+}
+```
+
+# --hints--
+
+You should set the `filter` property to `blur(2px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
+assert(hasFilter);
+```
+
+Your `.canvas` element should have a `filter` value of `blur(2px)`.
+
+```js
+const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
+assert(canvasFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+
+}
+--fcc-editable-region--
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
new file mode 100644
index 0000000000..06f7c56156
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998d.md
@@ -0,0 +1,108 @@
+---
+id: 60a3e3396c7b40068ad6998d
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel.
+
+# --hints--
+
+You should have a `.one, .two` selector list.
+
+```js
+const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
+assert(oneTwo);
+```
+
+You should set the `filter` property to `blur(1px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
+assert(hasFilter)
+```
+
+Your `.one` element should have a `filter` value of `blur(1px)`.
+
+```js
+const one = document.querySelector('.one');
+const oneFilter = getComputedStyle(one).filter;
+assert(oneFilter === 'blur(1px)');
+```
+
+Your `.two` element should have a `filter` value of `blur(1px)`.
+
+```js
+const two = document.querySelector('.two');
+const twoFilter = getComputedStyle(two).filter;
+assert(twoFilter === 'blur(1px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
new file mode 100644
index 0000000000..dafc3792ec
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998e.md
@@ -0,0 +1,95 @@
+---
+id: 60a3e3396c7b40068ad6998e
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Increase the `blur` of `.three` by 2 pixels.
+
+# --hints--
+
+You should set the `filter` property to `blur(2px)`.
+
+```js
+const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
+assert(filterFilter.length === 2);
+```
+
+Your `.three` element should have a `filter` value of `blur(2px)`.
+
+```js
+const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
+assert(threeFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
new file mode 100644
index 0000000000..9971a7dda8
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad6998f.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad6998f
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+The rectangles are too small and their edges don't have the soft quality of a painting.
+
+Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
+
+```js
+const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
+assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
new file mode 100644
index 0000000000..70123d3e87
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69990.md
@@ -0,0 +1,97 @@
+---
+id: 60a3e3396c7b40068ad69990
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 3px 3px #8f0401`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`.
+
+```js
+const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
+assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
new file mode 100644
index 0000000000..e7582ebc5a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69991.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad69991
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
+
+# --hints--
+
+You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+assert(hasBoxShadow);
+```
+
+Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
+
+```js
+const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
+assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
new file mode 100644
index 0000000000..f78535e86c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69992.md
@@ -0,0 +1,101 @@
+---
+id: 60a3e3396c7b40068ad69992
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+The corners of each rectangle are still too sharp.
+
+Round each corner of the `.one` element by 9 pixels, using the `border-radius` property.
+
+# --hints--
+
+You should set the `border-radius` property to `9px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
+assert(hasBorderRadius);
+```
+
+Your `.one` element should have a `border-radius` value of `9px`.
+
+```js
+const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
+assert(oneBorderRadius === '9px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
new file mode 100644
index 0000000000..e99b91467f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69993.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad69993
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Use the `border-radius` property on the `.two` selector, to set its top-left radius and bottom-right radius to `8px`, and top-right radius and bottom-left radius to `10px`.
+
+# --hints--
+
+You should set the `border-radius` property to `8px 10px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
+assert(hasBorderRadius);
+```
+
+Your `.two` element should have a `border-radius` value of `8px 10px`.
+
+```js
+const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
+assert(twoBorderRadius === '8px 10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
new file mode 100644
index 0000000000..41be8e8fd5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69994.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69994
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners.
+
+Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels.
+
+# --hints--
+
+You should set the `border-radius` property to `30px 25px 60px 12px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
+assert(hasBorderRadius);
+```
+
+Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`.
+
+```js
+const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
+assert(threeBorderRadius === '30px 25px 60px 12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
new file mode 100644
index 0000000000..f5ebe9a726
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69995.md
@@ -0,0 +1,104 @@
+---
+id: 60a3e3396c7b40068ad69995
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Rotate each rectangle to give them more of an imperfect, hand-painted look.
+
+Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees.
+
+# --hints--
+
+You should set the `transform` property to `rotate(-0.6deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
+assert(hasTransform);
+```
+
+Your `.one` element should have a `transform` value of `rotate(-0.6deg)`.
+
+```js
+const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
+assert(oneTransform === 'rotate(-0.6deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
new file mode 100644
index 0000000000..3b25d4ac04
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69996.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69996
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Rotate the `.two` element clockwise by 0.4 degrees.
+
+# --hints--
+
+You should set the `transform` property to `rotate(0.4deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
+assert(hasTransform);
+```
+
+Your `.two` element should have a `transform` value of `rotate(0.4deg)`.
+
+```js
+const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
+assert(twoTransform === 'rotate(0.4deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
new file mode 100644
index 0000000000..a41a1976ff
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-rothko-painting/60a3e3396c7b40068ad69997.md
@@ -0,0 +1,180 @@
+---
+id: 60a3e3396c7b40068ad69997
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Rotate `.three` counter clockwise by 0.2 degrees.
+
+With this final step, your Rothko painting is now complete.
+
+# --hints--
+
+You should set the `transform` property to `rotate(-0.2deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
+assert(hasTransform);
+```
+
+Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
+
+```js
+const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
+assert(threeTransform === 'rotate(-0.2deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+  transform: rotate(-0.2deg);
+}
+```
diff --git a/curriculum/dictionaries/korean/comments.json b/curriculum/dictionaries/korean/comments.json
index 28c1148a4f..f416ee0ac8 100644
--- a/curriculum/dictionaries/korean/comments.json
+++ b/curriculum/dictionaries/korean/comments.json
@@ -77,7 +77,7 @@
   "1cfidd": "responseFromServer represents a response from a server",
   "96tntk": "Returns 30",
   "58a5g7": "Run and check the console",
-  "71bus9": "Run the tests to see the difference between the two consoles.",
+  "71bus9": "두 콘솔 간의 차이를 확인하기 위해 테스트를 실행하세요.",
   "7wp46n": "Setting in Fahrenheit scale",
   "oefvg5": "Setup",
   "mnt4d3": "Should display 'carrot'",